/* ============================================================
   DMDC — Mobile Header & Footer (GenJI)
   Áp dụng ≤991px. Header: burger trái · logo giữa · giỏ hàng phải.
   Bấm burger → drawer trượt từ phải (menu + tìm kiếm + logo).
   Footer: dồn toàn bộ vào giữa, 3 cột xếp dọc căn giữa.
   ============================================================ */

/* ============================================================
   DESKTOP HEADER (PC ≥992px): menu 1 hàng + submenu trang con + icon
   ============================================================ */
@media (min-width: 1280px) {
  /* Menu KHÔNG xuống dòng, khoảng cách gọn hơn (gap 32px gây tràn → wrap) */
  #site-header .genji-header #header-nav .dmdc-menu,
  #site-header .genji-header #header-nav .navbar-nav {
    flex-wrap: nowrap !important;
    gap: 24px !important;
  }
  #site-header .genji-header #header-nav .dmdc-menu-link,
  #site-header .genji-header #header-nav .nav-link { white-space: nowrap; }

  /* Cho submenu tràn ra ngoài, không bị cắt */
  #site-header .genji-header #header-inner,
  #site-header .genji-header #col-nav,
  #site-header .genji-header #col-actions,
  #site-header .genji-header #header-nav,
  #site-header .genji-header #header-nav .dmdc-nav-menu,
  #site-header .genji-header #header-nav .navbar-collapse { overflow: visible !important; }

  /* Submenu (trang con) — dropdown đổ xuống dưới mục cha, có nền + bóng */
  #site-header .genji-header #header-nav .dmdc-has-submenu { position: relative; }
  #site-header .genji-header #header-nav .dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    min-width: 230px;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 1080;
    list-style: none;
  }
  #site-header .genji-header #header-nav .dmdc-has-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  /* Mục con trong dropdown: căn trái, đủ rộng */
  #site-header .genji-header #header-nav .dropdown-menu > li { width: 100%; }
  #site-header .genji-header #header-nav .dropdown-menu a,
  #site-header .genji-header #header-nav .dropdown-menu .dmdc-menu-link {
    display: block;
    white-space: nowrap;
    text-align: left;
    padding: 10px 20px !important;
    color: #333 !important;
    font-size: 15px;
    letter-spacing: 0;
  }
  #site-header .genji-header #header-nav .dropdown-menu a:hover {
    color: #1A5FAB !important;
    background: #f4f8fc;
  }

  /* Icon search + giỏ hàng: rõ ràng, không bị cắt */
  #site-header .genji-header #col-actions .fa-search,
  #site-header .genji-header #col-actions .fa-shopping-cart { font-size: 20px !important; line-height: 1; }
}

/* Màn 992–1399px: header-inner có inline style max-width:1366 + padding ngang 0 (từ builder)
   → container chạm sát 2 mép màn, badge giỏ hàng (right:-12px) chòi ra ngoài viewport
   gây thanh trượt ngang. Bù padding ngang theo tỉ lệ màn (inline style nên cần !important). */
@media (min-width: 1280px) and (max-width: 1399.98px) {
  #site-header .genji-header #header-inner {
    padding-left: clamp(16px, 2vw, 28px) !important;
    padding-right: clamp(16px, 2vw, 28px) !important;
  }
}

/* Màn 992–1279px: menu ngang desktop KHÔNG đủ chỗ trong container (chỉ vừa ≥1280) → chuyển hẳn sang BURGER.
   Header thật là BUILDER header (KHÔNG có .genji-header — selector cũ trỏ nhầm nên vô hiệu). Phải:
   (1) đè Bootstrap navbar-expand-lg bằng class THẬT: hiện .navbar-toggler + ẩn .navbar-collapse (chứa .navbar-nav.dmdc-menu);
   (2) ÉP LẠI bố cục header-inner thành flex đơn giản (LOGO trái · cụm CART+BURGER phải) vì bố cục desktop của Builder
       khiến cụm actions nhảy lộn xộn/đè logo & tràn. Drawer do dmdc-mobile-nav.js dựng (MQ ≤1279.98). */
@media (min-width: 992px) and (max-width: 1279.98px) {
  #site-header .navbar-expand-lg .navbar-toggler { display: inline-block !important; }
  #site-header .navbar-expand-lg .navbar-collapse { display: none !important; }

  /* Badge giỏ hàng (right:-12px) chòi ra ~2px gây thanh trượt — chặn trong header (dải này không có dropdown desktop nên clip an toàn) */
  #site-header { overflow-x: clip !important; }

  /* Bố cục header gọn, không tràn. LƯU Ý: flex-item TRỰC TIẾP của header-inner là các WRAPPER
     .uid-hok-col-logo / .uid-hok-col-nav / .uid-hok-header-actions (logo & nav nằm BÊN TRONG wrapper)
     → phải đặt order/margin lên WRAPPER, không phải lên .uid-hok-header-logo/nav. */
  #site-header .uid-hok-header-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    gap: 12px !important;
    padding-left: clamp(16px, 2vw, 28px) !important;
    padding-right: clamp(20px, 2.6vw, 34px) !important; /* dư chỗ cho badge giỏ hàng (right:-12px) khỏi bị cắt */
  }
  /* Bố cục: LOGO trái (to hơn 20%) · nhóm [GIỎ HÀNG][burger] bên phải — ĐỒNG BỘ GIỐNG MOBILE.
     Wrapper nav giữ bề rộng menu desktop (~757px) dù menu ẩn → ép CO khít nút burger (max-content). */
  #site-header .uid-hok-col-nav,
  #site-header .uid-hok-col-nav .uid-hok-header-nav,
  #site-header .uid-hok-col-nav .dmdc-nav-menu-wrapper,
  #site-header .uid-hok-col-nav .navbar { width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; justify-content: flex-end !important; }
  /* LOGO trái, đẩy phần còn lại sang phải. Thứ tự giống mobile: [giỏ hàng] rồi [burger]. */
  #site-header .uid-hok-col-logo       { order: 1 !important; flex: 0 0 auto !important; min-width: 0 !important; margin-left: 0 !important; margin-right: auto !important; }
  #site-header .uid-hok-header-actions { order: 2 !important; flex: 0 0 auto !important; margin: 0 !important; }
  #site-header .uid-hok-col-nav        { order: 3 !important; flex: 0 0 auto !important; margin: 0 !important; }
  /* Burger GIỐNG MOBILE: bỏ viền/khung, nền trong suốt, padding 8px */
  #site-header .navbar-toggler { border: 0 !important; padding: 8px !important; background: transparent !important; box-shadow: none !important; }
  /* Ẩn ô tìm kiếm trên thanh (đã có trong drawer) cho gọn; giữ giỏ hàng */
  #site-header [class*="hdr-search"], #site-header .dmdc-el--search_form { display: none !important; }
  #site-header .uid-hok-header-logo img { max-height: 55px !important; width: auto !important; } /* 46 → 55 (+20%) */
}

@media (max-width: 1279.98px) {

  /* ---------- HEADER: thanh trên cùng 3 vùng ---------- */
  #site-header .genji-header #header-inner {
    position: relative;
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-height: 60px;
  }

  /* Cột MENU (chứa nút burger) → ngoài cùng bên trái */
  #site-header .genji-header #col-nav {
    order: -1;
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    z-index: 2;
  }
  #site-header .genji-header #col-nav .navbar-toggler {
    /* Bootstrap navbar-expand-lg ẩn burger ở ≥992px → buộc hiện để phủ dải 992–1279 (tablet dọc/ngang) */
    display: inline-block !important;
    border: 0; padding: 6px 8px; box-shadow: none !important; outline: none !important;
    font-size: 22px; line-height: 1;
  }
  /* Ẩn menu collapse mặc định của Bootstrap (đã thay bằng drawer). Đè cả .navbar-expand-lg .navbar-collapse của Bootstrap ở ≥992px nhờ specificity ID cao hơn. */
  #site-header .genji-header #col-nav .navbar-collapse { display: none !important; }

  /* LOGO → căn giữa tuyệt đối theo màn hình */
  #site-header .genji-header #col-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    max-width: 56% !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    justify-content: center !important;
    z-index: 1;
  }
  #site-header .genji-header #col-logo img { max-height: 42px; width: auto; display: block; }

  /* Cột ACTIONS → ngoài cùng bên phải; chỉ giữ giỏ hàng */
  #site-header .genji-header #col-actions {
    order: 1;
    width: auto !important;
    flex: 0 0 auto !important;
    margin-left: auto;
    overflow: visible !important;
    justify-content: flex-end !important;
    z-index: 2;
  }
  /* Ẩn tìm kiếm khỏi thanh trên (đưa vào drawer) */
  #site-header .genji-header #col-actions #hdr-search { display: none !important; }

  /* Giỏ hàng: hiện rõ icon + badge (không bị cắt) */
  #site-header .genji-header #col-actions,
  #site-header .genji-header #hdr-cart,
  #site-header .genji-header .dmdc-mini-cart,
  #site-header .genji-header .dmdc-cart-icon-wrap { overflow: visible !important; }
  #site-header .genji-header #hdr-cart { padding-right: 6px; }
  #site-header .genji-header .dmdc-cart-badge {
    top: -8px; right: -10px;
    min-width: 18px; height: 18px; line-height: 18px;
    box-shadow: 0 0 0 2px #fff;
  }

  /* ---------- DRAWER (menu trượt từ phải) ---------- */
  .dm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 1290;
  }
  .dm-overlay.is-open { opacity: 1; visibility: visible; }
  .dm-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
    width: min(330px, 86vw); background: #fff; z-index: 1300;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow: -10px 0 40px rgba(0,0,0,.2); overflow-y: auto;
  }
  .dm-drawer.is-open { transform: translateX(0); }
  .dm-drawer .dm-head { display: flex; justify-content: flex-end; padding: 14px 16px 6px; }
  .dm-drawer .dm-close {
    background: none; border: 0; font-size: 30px; line-height: 1; color: #555; cursor: pointer; padding: 0 4px;
  }
  .dm-drawer .dm-menu { padding: 6px 18px 8px; }
  .dm-drawer .dm-menu ul { list-style: none; margin: 0; padding: 0; }
  .dm-drawer .dm-menu li { border-bottom: 1px solid #eef1f4; }
  .dm-drawer .dm-menu a {
    display: block; padding: 14px 2px; color: #1f2933; text-decoration: none;
    font-size: 16px; font-weight: 500;
  }
  .dm-drawer .dm-menu a:hover { color: #1A5FAB; }
  /* Submenu (accordion): hàng cha = flex (link + NÚT chevron thật cùng hàng);
     JS drawer thêm .dm-sub-btn — KHÔNG dùng ::after trên <a> nữa (từng gây mũi tên đúp
     và không bấm riêng được khi link cha có URL thật). */
  .dm-drawer .dm-menu li.dm-has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .dm-drawer .dm-menu li.dm-has-sub > a { flex: 1 1 auto; min-width: 0; }
  .dm-drawer .dm-menu .dm-sub-btn {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    padding: 12px 6px 12px 18px;   /* vùng bấm rộng, dễ chạm */
    color: #9aa6b2; font-size: 13px; line-height: 1;
  }
  .dm-drawer .dm-menu .dm-sub-btn i { transition: transform .25s ease; }
  .dm-drawer .dm-menu li.dm-has-sub.open > .dm-sub-btn { color: #1A5FAB; }
  .dm-drawer .dm-menu li.dm-has-sub.open > .dm-sub-btn i { transform: rotate(180deg); }
  .dm-drawer .dm-menu .dropdown-menu,
  .dm-drawer .dm-menu ul ul {
    display: none; position: static; box-shadow: none; border: 0; padding: 0 0 8px 14px; margin: 0; background: transparent;
    flex-basis: 100%;               /* submenu chiếm hàng riêng dưới link cha (li là flex) */
  }
  .dm-drawer .dm-menu li.open > .dropdown-menu,
  .dm-drawer .dm-menu li.open > ul { display: block; }
  .dm-drawer .dm-menu .dropdown-menu a, .dm-drawer .dm-menu ul ul a { font-size: 15px; font-weight: 400; padding: 10px 2px; color: #525252; }
  /* An toàn: chặn tàn dư menu desktop lọt vào drawer (nút toggle mất style, caret Bootstrap) */
  .dm-drawer .dmdc-submenu-toggle { display: none !important; }
  .dm-drawer .dm-menu a.dropdown-toggle::after { display: none !important; }

  /* Các KHỐI trong drawer (logo / tìm kiếm) — dùng được ở đầu (.dm-top) lẫn chân (.dm-foot),
     thứ tự & thêm/bớt đặt trong Builder (widget Menu → MENU MOBILE → mobile_modules) */
  .dm-drawer .dm-top { padding: 4px 18px 10px; }
  .dm-drawer .dm-top .dm-block + .dm-block { margin-top: 12px; }
  .dm-drawer .dm-foot { margin-top: auto; padding: 18px; border-top: 1px solid #eef1f4; background: #f7fafc; }
  .dm-drawer .dm-foot .dm-block + .dm-block { margin-top: 14px; }
  .dm-drawer .dm-logo { display: block; text-align: center; }
  .dm-drawer .dm-logo img { max-height: 40px; width: auto; display: inline-block; }
  /* Khối TUỲ BIẾN clone từ builder (.dm-block-<tên>): hiện đầy đủ, bỏ ràng buộc bố cục nguồn */
  .dm-drawer .dm-block-custom { text-align: center; }
  .dm-drawer .dm-block-custom > * { display: block !important; width: 100% !important; max-width: 100% !important; }
  .dm-drawer .dm-search { display: flex; width: 100%; border: 1px solid #dadce0; border-radius: 8px; overflow: hidden; background: #fff; }
  .dm-drawer .dm-search input {
    flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 0; outline: none; font-size: 15px; background: #fff; color: #333;
  }
  .dm-drawer .dm-search button {
    background: #1A5FAB; color: #fff; border: 0; padding: 0 18px; cursor: pointer; display: flex; align-items: center; font-size: 16px;
  }
  body.dm-drawer-open { overflow: hidden; }

  /* ---------- BIẾN THỂ DRAWER (chọn trong Builder: mobile_style) ---------- */
  /* Trượt từ TRÁI sang */
  .dm-drawer.dm-drawer--left {
    left: 0; right: auto;
    transform: translateX(-100%);
    box-shadow: 10px 0 40px rgba(0,0,0,.2);
  }
  .dm-drawer.dm-drawer--left.is-open { transform: translateX(0); }
  /* Pop-up TOÀN TRANG nền trong mờ (ẩn mọi thành phần trang phía sau bằng lớp phủ mờ + blur) */
  .dm-drawer.dm-drawer--full {
    left: 0; right: 0; width: 100vw;
    transform: none; opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: none;
  }
  .dm-drawer.dm-drawer--full.is-open { opacity: 1; visibility: visible; }
  .dm-drawer.dm-drawer--full .dm-menu { padding: 12px 28px; }
  .dm-drawer.dm-drawer--full .dm-menu li { border-bottom: 0; }
  .dm-drawer.dm-drawer--full .dm-menu a { font-size: 20px; padding: 13px 2px; text-align: center; }
  .dm-drawer.dm-drawer--full .dm-menu .dropdown-menu a,
  .dm-drawer.dm-drawer--full .dm-menu ul ul a { font-size: 16px; }
  .dm-drawer.dm-drawer--full .dm-foot { background: transparent; border-top: 0; }

  /* ---------- FOOTER: dồn vào giữa ---------- */
  /* Thanh CTA (Trở thành đối tác) */
  #site-footer #cta-inner {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    gap: 18px !important;
  }
  #site-footer #cta-text {
    width: 100% !important; flex: 0 0 auto !important;
    align-items: center !important; text-align: center;
  }
  #site-footer #cta-b { margin: 0 auto; }

  /* 3 cột footer → xếp dọc, căn giữa */
  #site-footer #footer-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 30px !important;
  }
  #site-footer #footer-col-brand,
  #site-footer #footer-col-company,
  #site-footer #footer-col-social {
    width: 100% !important; flex: 0 0 auto !important;
    align-items: center !important; text-align: center;
  }
  /* Căn giữa nội dung bên trong các cột */
  #site-footer #footer-col-brand .dmdc-image-wrapper,
  #site-footer #footer-col-brand .dmdc-widget-container { text-align: center; margin-left: auto; margin-right: auto; }
  #site-footer #footer-address p,
  #site-footer #footer-desc p,
  #site-footer #footer-copyright p { justify-content: center !important; text-align: center; }
  #site-footer #footer-social-icons,
  #site-footer #footer-social-icons > div { justify-content: center !important; }
}

/* ============================================================
   Về chúng tôi (page 88) — Tầm nhìn / Sứ mệnh trên mobile
   Section render bằng inline baked styles: brand width:10%,
   vision width:40%, mission width:30% + margin lệch 150/150
   (hiệu ứng so le desktop). Trên mobile -> xếp dọc, full-width,
   bỏ phần lệch. Inline thắng CSS thường nên phải dùng !important.
   ============================================================ */
@media (max-width: 1279.98px) {
  /* Hàng 3 cột -> xếp dọc theo thứ tự: thương hiệu, Tầm nhìn, Sứ mệnh */
  #ab-vm-box {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 30px !important;
  }
  /* Mỗi cột full-width, bỏ width % và margin lệch của Sứ mệnh */
  #ab-vm-brand,
  #ab-vision,
  #ab-mission,
  .genji-about-vm .genji-about-col,
  .genji-about-vm .genji-about-brand {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  /* Khối thương hiệu "GENJI": xếp ngang & căn giữa cho gọn */
  #ab-vm-brand,
  .genji-about-vm .genji-about-brand {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
  }
  /* Nếu chữ thương hiệu để dọc -> chuyển ngang trên mobile */
  .genji-about-vm .genji-brand-vertical,
  .genji-about-vm .genji-brand-vertical .dmdc-heading-title {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  /* Ảnh Tầm nhìn co theo bề ngang màn hình */
  #ab-vision img,
  #ab-vis-img img {
    width: 100% !important;
    height: auto !important;
  }
}