/* ==========================================================
   DUCPT MOBILE (NV-183, 2026-09-30)
   1. Khoa nen cho dien thoai: khong phong chu khi xoay ngang, khong zoom khi cham o nhap,
      khong phan tu nao rong hon man hinh.
   2. Menu danh muc moi o khung <=1050px: mot hang logo + nut "Danh muc", bam mo bang danh muc.
   Dung chung cho trang chu (.nav-inner) va cac trang con (.nav). Script: ducpt-mobile-nav.js.
   Selector co :not(#_) de thang cac rule !important cu ma khong can sua tung trang.
   ========================================================== */

/* ---------- 1. Nen ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,iframe{max-width:100%}
a,button,summary,label,input,select,textarea{touch-action:manipulation}

@media (max-width:1050px){
  /* iOS tu zoom vao o nhap co chu < 16px, sau do trang keo ngang duoc. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}
  pre,table{max-width:100%}
  /* Phan tu con cua luoi/flex khong co min-width:0 se bi o nhap, bang, code day rong hon man hinh. */
  :is(main,.wrap,.card,.grid,.register,form,section,article)>*{min-width:0}
  input,select,textarea{max-width:100%;box-sizing:border-box}
  th,td{overflow-wrap:anywhere}
  h1,h2,h3,p,li,a{overflow-wrap:break-word}
}

/* ---------- 2. Menu danh muc ---------- */
#dmn-toggle,#dmn-backdrop,.dmn-title,.dmn-ic{display:none}
#dmn-panel{display:contents}

@media (max-width:1050px){
  /* Thanh tren cung: logo ben trai, nut Danh muc ben phai, cao 64px o moi co may */
  header :is(nav.nav,.nav-inner):not(#_){display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;position:relative;min-height:64px;padding:9px 16px!important;overflow:visible!important}
  header :is(nav.nav,.nav-inner):not(#_)>:first-child{order:0!important;flex:0 0 auto!important;margin:0 auto 0 0!important}
  header :is(nav.nav,.nav-inner):not(#_)>:first-child img{width:148px!important;max-width:148px!important;padding:6px 10px!important;border-radius:12px!important}
  /* Truoc khi script chay: an san cac muc de khong co hang nut nhay len roi bien mat */
  header :is(nav.nav,.nav-inner):not(#_)>a:not(:first-child),
  header :is(nav.nav,.nav-inner):not(#_)>:is(.grow,.spacer){display:none!important}
  /* Chip tai khoan (sau khi dang nhap) nam canh nut Danh muc, chi hien avatar */
  header :is(nav.nav,.nav-inner):not(#_)>:is(#dabAcct,#dgsAccountChip,#navAcct){order:50!important;flex:0 0 auto!important;margin:0!important}
  header :is(nav.nav,.nav-inner):not(#_)>:is(#dabAcct,#dgsAccountChip) :is(.tx,.dgs-chip-txt){display:none!important}

  #dmn-toggle{display:inline-flex;align-items:center;gap:10px;order:99;flex:0 0 auto;min-height:46px;margin:0;padding:0 16px 0 14px;border:1px solid #d5deea;border-radius:14px;background:#fff;color:#0b2347;font:inherit;font-size:15px;font-weight:700;line-height:1;letter-spacing:-.01em;box-shadow:0 4px 14px rgba(11,35,71,.08);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s,border-color .18s}
  #dmn-toggle:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
  #dmn-toggle .dmn-bars{position:relative;display:block;width:20px;height:14px}
  #dmn-toggle .dmn-bars i{position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .15s,top .2s}
  #dmn-toggle .dmn-bars i:nth-child(1){top:0}
  #dmn-toggle .dmn-bars i:nth-child(2){top:6px}
  #dmn-toggle .dmn-bars i:nth-child(3){top:12px}
  #dmn-toggle[aria-expanded=true]{background:#0b2347;border-color:#0b2347;color:#fff}
  #dmn-toggle[aria-expanded=true] .dmn-bars i:nth-child(1){top:6px;transform:rotate(45deg)}
  #dmn-toggle[aria-expanded=true] .dmn-bars i:nth-child(2){opacity:0}
  #dmn-toggle[aria-expanded=true] .dmn-bars i:nth-child(3){top:6px;transform:rotate(-45deg)}

  /* Bang danh muc tha xuong duoi thanh tren, khong day noi dung trang */
  #dmn-panel{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;position:absolute;left:10px;right:10px;top:calc(100% + 6px);z-index:5;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);padding:14px;border:1px solid #e1e7f0;border-radius:22px;background:#fff;box-shadow:0 26px 60px rgba(11,35,71,.24);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
  html.dmn-open #dmn-panel{visibility:visible;opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease}
  .dmn-title{display:block;flex:1 1 100%;margin:0 2px 2px;color:#8a6a1f;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

  #dmn-panel>.dmn-link:not(#_){display:flex!important;align-items:center;justify-content:flex-start!important;gap:12px;order:0!important;flex:1 1 100%!important;min-width:0;min-height:56px;margin:0!important;padding:8px 12px!important;border:1px solid #edf1f6!important;border-radius:15px!important;background:#f7f9fc!important;color:#14213d!important;font-size:16px!important;font-weight:700!important;line-height:1.25!important;box-shadow:none!important;text-decoration:none}
  #dmn-panel>.dmn-link:not(#_):active{background:#eef3fb!important}
  .dmn-ic{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #e1e7f0;border-radius:12px;background:#fff;color:#173b6d}
  .dmn-ic svg{display:block;width:21px;height:21px}
  #dmn-panel>.dmn-link:not(#_)::after{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 4px 0 auto;border-top:2px solid #98a2b3;border-right:2px solid #98a2b3;transform:rotate(45deg)}
  #dmn-panel>.dmn-link.dmn-active:not(#_){border-color:#bfdbfe!important;background:#eff6ff!important;color:#1d4ed8!important}
  #dmn-panel>.dmn-link.dmn-active .dmn-ic{border-color:#1d4ed8;background:#1d4ed8;color:#fff}
  #dmn-panel>.dmn-link.dmn-active:not(#_)::after{border-color:#1d4ed8}

  #dmn-panel>.dmn-cta:not(#_){display:flex!important;align-items:center;justify-content:center!important;order:2!important;flex:1 1 calc(50% - 4px)!important;min-width:0;min-height:52px;margin:4px 0 0!important;padding:0 12px!important;border:1px solid #cbd5e1!important;border-radius:15px!important;background:#fff!important;color:#0b2347!important;font-size:15.5px!important;font-weight:800!important;line-height:1.2!important;text-align:center;box-shadow:none!important}
  #dmn-panel>.dmn-cta.dmn-primary:not(#_){border-color:transparent!important;background:linear-gradient(90deg,#2563eb,#7c3aed)!important;color:#fff!important;box-shadow:0 10px 24px rgba(37,99,235,.24)!important}
  /* Script dang nhap an nut bang style noi dong: phai ton trong */
  #dmn-panel>[style*="display: none"]:not(#_),#dmn-panel>[style*="display:none"]:not(#_),#dmn-panel>:is(.grow,.spacer){display:none!important}

  #dmn-backdrop{display:block;position:fixed;inset:0;z-index:1000;background:rgba(11,22,44,.46);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s;touch-action:none}
  html.dmn-open #dmn-backdrop{opacity:1;visibility:visible;transition:opacity .18s ease}
  html.dmn-open :is(header.header,header>nav){z-index:1001!important}
}
/* Man rong hon: danh muc chia 2 roi 3 cot, vua khung xoay ngang thap */
@media (min-width:520px) and (max-width:1050px){
  #dmn-panel>.dmn-link:not(#_){flex:1 1 calc(50% - 4px)!important}
}
@media (min-width:780px) and (max-width:1050px){
  #dmn-panel>.dmn-link:not(#_){flex:1 1 calc(33.333% - 6px)!important}
}
@media (max-width:1050px) and (max-height:430px){
  #dmn-panel>.dmn-link:not(#_){min-height:50px}
  .dmn-ic{flex-basis:34px;width:34px;height:34px}
}
@media (max-width:359px){
  header :is(nav.nav,.nav-inner):not(#_)>:first-child img{width:124px!important;max-width:124px!important}
  #dmn-toggle{padding:0 12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  #dmn-panel,#dmn-backdrop,#dmn-toggle,#dmn-toggle .dmn-bars i{transition:none!important}
}