/* ==========================================================================
   Sua giao dien desktop + mobile (ra soat 23/10/2026). Nap sau style.css va CSS noi tuyen trong _head.
   ========================================================================== */

/* ---- Tran ngang + bong mo o mep phai: menu mobile / gio hang an ben phai van do bong vao trang ---- */
html, body { overflow-x: clip; }
.mobile-menu-container:not(.active) { box-shadow: none !important; visibility: hidden; transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s !important; }
.mobile-menu-container.active { visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1) !important; }
.cart-sidebar-container:not(.active) { box-shadow: none !important; visibility: hidden; }

/* ---- Banner trang chu: khung cao 500px nhung anh 400px -> du dai trang 100px ---- */
/* Tren dien thoai anh bi cat 2 ben (mat chu "FOREVER") -> hien tron banner theo dung ty le anh */
.main-carousel { height: auto !important; }
.main-carousel .owl-stage-outer, .main-carousel .owl-stage, .main-carousel .owl-item { height: auto !important; }
.main-carousel .owl-item > div, .main-carousel .owl-item img { height: auto !important; }
.main-carousel .owl-item img { object-fit: contain !important; }
@media (max-width: 767.98px) {
  .main-carousel .owl-nav { display: none !important; } /* mui ten de len chu tren banner */
}

/* ---- The san pham (desktop): truoc chi hien anh, ten + gia chi hien khi re chuot ---- */
@media (min-width: 768px) {
  .one-product-container { height: auto !important; }
  .one-product-container .product-images { height: auto !important; overflow: visible !important; }
  .one-product-container .product-images .product-image { position: relative; height: auto !important; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden; }
  .one-product-container .product-images .product-image img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
  .one-product-container .product-images .pro-detail {
    position: static !important; opacity: 1 !important; transform: none !important;
    display: flex !important; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px 4px 2px !important; background: transparent !important; text-align: center;
  }
  .one-product-container .pro-detail .product-name { margin-bottom: 2px; }
}
.one-product-container .price { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .one-product-container .pro-detail .price-container .price:first-child { color: #d0021b !important; font-weight: 700; font-size: 14px; }
  .one-product-container .pro-detail .price-container .price { color: #999; }
}

/* ---- Trang san pham ---- */
.product-page .product-price { font-size: 1.6rem; margin: 6px 0 10px; }
.product-page .product-price .pp-now { color: #d0021b; font-weight: 700; }
.product-page .product-price .pp-old { color: #999; text-decoration: line-through; font-size: 1.2rem; margin-left: 8px; }
/* "Chua bao gom": 1 phu kien bi keo full be ngang (~1.000px) */
.component-grid--exclude { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 180px)) !important; justify-content: center; gap: 16px; }
.component-grid--exclude .component-item { max-width: 180px; width: 100%; }
.component-grid--exclude .component-thumb { aspect-ratio: 1 / 1; overflow: hidden; }
.component-grid--exclude .component-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-seo { margin-top: 8px; }
.product-seo-title, .item-faq-title { font-size: 1.35rem !important; margin: 26px 0 12px !important; }
.product-seo-content { line-height: 1.7; }
.product-seo-content img { max-width: 100%; height: auto; }
.product-seo-cats a { font-weight: 600; color: #1a1a1a; text-decoration: underline; text-decoration-color: #fce205; text-decoration-thickness: 3px; }
.product-seo-news { padding-left: 20px; line-height: 1.9; }
.product-seo-news a { color: #1a1a1a; }
.product-seo-news a:hover { color: #b8860b; text-decoration: underline; }

/* ---- Bai viet: tieu de trong bai bi can deu 2 ben (gian chu) va qua to ---- */
.article-content h2, .article-content h3, .article-content h4 { text-align: left !important; letter-spacing: 0; line-height: 1.3; margin: 1.4em 0 .5em; }
.article-content h2 { font-size: 1.6rem; font-weight: 700; }
.article-content h3 { font-size: 1.3rem; font-weight: 700; }
.article-content h4 { font-size: 1.12rem; font-weight: 700; }
.article-content img { max-width: 100%; height: auto; }
.article-content img.img-broken { display: none !important; }
@media (max-width: 767.98px) {
  .article-content h2 { font-size: 1.35rem; }
  .article-content h3 { font-size: 1.15rem; }
  .article-content p { text-align: left !important; }
}

/* ---- Trang chu: "Vi sao chon chung toi" chu trang tren nen be kho doc ---- */
.why-choose-us .description, .why-choose-us .feature p { color: #2b2620 !important; }

/* ---- Ban do: cao 650px tren desktop la qua lon ---- */
.map-responsive { height: auto !important; padding-bottom: 0 !important; border-radius: 12px; overflow: hidden; }
.map-responsive iframe { position: static !important; display: block; width: 100% !important; height: 420px !important; }
@media (max-width: 767.98px) { .map-responsive iframe { height: 300px !important; } }

/* ---- Chan trang: dong ban quyen mo (opacity .5 tren nen vang) ---- */
.footer-copyright { color: #1a1a1a; font-size: 14px; border-top: 1px solid rgba(0,0,0,.12); }

/* ---- Trang ngan (gio hang, 404): chan trang bi treo giua man hinh ---- */
.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.page-wrapper > footer { margin-top: auto; }

/* ---- Nut lien he noi: bo nut Zalo xanh trung lap (de len nut Messenger), thu nho tren dien thoai ---- */
.zalo-chat-widget { display: none !important; }
@media (max-width: 767.98px) {
  .float-contact { right: 10px !important; bottom: 84px !important; gap: 10px !important; }
  .float-contact .fc-icon { width: 42px !important; height: 42px !important; }
  .float-contact .fc-icon svg { width: 18px !important; height: 18px !important; }
  .float-contact .fc-zalo-txt { font-size: 12px !important; }
  .float-contact .fc-pulse { display: none !important; }
}

/* ---- Tin tuc: 2 cot tren dien thoai (truoc 1 cot, trang dai ~13.000px) ---- */
@media (max-width: 575.98px) {
  .blog-col { padding-left: 6px; padding-right: 6px; }
  .blog-col h3, .blog-col h4, .blog-col .title, .blog-col a { font-size: 14px !important; line-height: 1.35 !important; }
}

/* ---- Form dat thiep: tieu de trang nho hon tieu de buoc tren dien thoai ---- */
.signup-step-container h1.title-from { font-size: clamp(1.8rem, 6vw, 3.6rem); margin: 0; }

/* ---- Trang 404 ---- */
.page-404 { padding: 60px 0 80px; }
.page-404 .e404-code { font-size: 5rem; line-height: 1; margin: 0; color: #fce205; -webkit-text-stroke: 2px #1a1a1a; }
.page-404 .e404-title { font-size: 1.8rem; font-weight: 700; margin: 12px 0 8px; }
.page-404 .e404-text { color: #555; max-width: 520px; margin: 0 auto 20px; }
.page-404 .e404-search { display: flex; gap: 8px; max-width: 460px; margin: 0 auto 18px; }
.page-404 .e404-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.page-404 .e404-btn { display: inline-block; background: #fce205; color: #1a1a1a !important; border: 2px solid #1a1a1a; border-radius: 999px; padding: 8px 18px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.page-404 .e404-btn-o { background: #fff; }

/* ---- Trang lien he ---- */
.contact-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-weight: 600; }
.contact-alert.ok { background: #e6f6ea; color: #14632d; }
.contact-alert.err { background: #fdecea; color: #a1281c; }
.contact-block { background: #f6f6f6; border-radius: 12px; padding: 22px 24px; }
.contact-block p { margin-bottom: 6px; }
.contact-block a { color: #1a1a1a; text-decoration: underline; }
.contact-co { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.contact-btn { display: inline-flex; align-items: center; gap: 6px; background: #fce205; color: #1a1a1a !important; border: 2px solid #1a1a1a; border-radius: 999px; padding: 7px 14px; font-weight: 700; text-decoration: none !important; }
.contact-btn-dark { background: #1a1a1a; color: #fce205 !important; }
.contact-form { border: 1px solid #eee; border-radius: 12px; padding: 22px 24px; background: #fff; }
.contact-form-title { font-size: 1.6rem; margin-bottom: 4px; }
.contact-form-sub { color: #666; margin-bottom: 16px; }
.contact-form label { font-weight: 600; font-size: 14px; }
.contact-form .ct-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.contact-submit { background: #fce205; border: 2px solid #1a1a1a; border-radius: 999px; padding: 9px 26px; font-weight: 700; cursor: pointer; }
.contact-submit:focus-visible, .contact-btn:focus-visible, .page-404 .e404-btn:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
.contact-map { margin-top: 10px; }

/* ---- Trang san pham tren dien thoai: khong thay ten mau + gia (khoi tieu de chi bat tren desktop) ---- */
@media (max-width: 991.98px) {
  .product-page .detail-header.show-desktop { display: block !important; margin-top: 14px; }
  .product-page .detail-header.show-mobile { display: none !important; }
  .product-page .detail-header.show-desktop .product-name { font-size: 2rem; }
  .product-page .product-price { font-size: 1.35rem; }
}

/* Banner tren dien thoai: the a/div giu chieu cao cu -> vien trang tren/duoi anh */
.main-carousel .owl-item a, .main-carousel .owl-item div { height: auto !important; }
.main-carousel .owl-item img { display: block; }

/* Khoang trang ~190px giua ban do va "Cau hoi thuong gap" */
.faq-home { padding-top: 0 !important; }
.faq-home .title { margin-top: 0 !important; }

/* Banner dien thoai: khung anh co dinh 220px (CSS cu) -> giu "cover" nhung lech ve ben trai noi co chu */
@media (max-width: 767.98px) {
  .main-carousel .owl-item img { object-fit: cover !important; object-position: 12% center !important; }
}