/* hig.css — lop co che Apple HIG dap len style.css (28/10/2026)
   Nap SAU style.css nen cung do uu tien thi file nay thang.
   CHI dong vao co che: luoi, bo goc, touch target, focus, chuyen dong.
   KHONG doi bang mau, khong doi font. Dark mode chua lam o day,
   vi style.css con rat nhieu mau viet cung, phai token hoa truoc. */

:root{
  /* bo goc dong tam */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-full:9999px;
  /* luoi 8pt, bu cac buoc style.css con thieu */
  --s4:4px; --s20:20px; --s40:40px;
  /* duong cong va thoi luong chuan Apple */
  --ease-hig:cubic-bezier(.25,.1,.25,1);
  --ease-out-hig:cubic-bezier(0,0,.58,1);
  --t-fast:160ms; --t-norm:280ms;
}

/* --- Touch target: moi dieu khien toi thieu 44x44 --- */
.btn{min-height:44px;border-radius:var(--r-full);transition:transform var(--t-fast) var(--ease-out-hig),background-color var(--t-fast) var(--ease-hig),box-shadow var(--t-fast) var(--ease-hig),color var(--t-fast) var(--ease-hig)}
.btn:active{transform:scale(.98)}
header .links a,.drawer .ml,footer h5+a,footer a{min-height:44px;display:inline-flex;align-items:center}
.lang2 button{min-height:44px;padding-inline:12px;border-radius:var(--r-full)}
/* Thanh nav desktop (901px tro len) rat chat: chi vua du cho 6 muc.
   Luat o day:
   1. Khong muc nao duoc vo chu. white-space:nowrap + khong co lai.
   2. Neu van khong vua thi CA MUC xuong hang duoi, nguyen khoi, va header cao
      len theo. Vo chu hoac tran ngang deu te hon xuong hang.
   3. Tu 901 den 1180 thi siet gap va co chu lai truoc khi phai xuong hang.
   Nut VI/EN chi lay chieu cao 44 cho du touch target, KHONG noi ngang, vi noi
   ngang la day ca hang qua kho va lam vo nav. Da can 28/10/2026. */
.nav .lang button{min-height:44px;padding-inline:2px;border-radius:var(--r-full)}
.nav{height:auto;min-height:70px;flex-wrap:wrap;padding-block:8px}
.nav>*{flex:0 0 auto}
.nav .links{flex-wrap:wrap}
.nav .links a,.nav .cta,.nav .lang button,.slbtn{white-space:nowrap}
.nav .cta{line-height:1.1}
@media(min-width:901px) and (max-width:1180px){
  .nav{gap:16px}
  .nav .links{gap:16px}
  .nav .links a{font-size:12px;letter-spacing:.04em}
  .nav .cta{padding:9px 12px;font-size:11px;letter-spacing:.06em}
  .slbtn span{display:none}
}
.slbtn{min-height:44px;border-radius:var(--r-full)}
.burger{min-width:44px;min-height:44px;border-radius:var(--r-full)}

/* --- Focus: luon nhin thay, khong bao gio go --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--olive);outline-offset:2px;border-radius:var(--r-sm)
}
.field input:focus,.field select:focus,.field textarea:focus,
form input:focus,form select:focus,form textarea:focus{
  outline:none;border-color:var(--olive);box-shadow:0 0 0 4px rgba(95,107,72,.10)
}

/* --- Bo goc dong tam: anh trong the nho hon the dung bang padding --- */
.bcard,.pcard,.scard,.bwcard,.card{border-radius:var(--r-2xl)}
.bcard .im,.bcard img,.pcard img,.bwcard img{border-radius:var(--r-lg)}
input,select,textarea{border-radius:var(--r-md)}

/* --- Chuyen dong: chi transform va opacity --- */
.reveal{transition:opacity .5s var(--ease-out-hig),transform .5s var(--ease-out-hig)}
.bcard,.pcard{transition:transform var(--t-norm) var(--ease-out-hig),box-shadow var(--t-norm) var(--ease-hig)}
.bcard:hover,.pcard:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* --- So lieu thang cot --- */
.knum,.pn,.pd,.fine,.addr,.num,time{font-variant-numeric:tabular-nums}

/* --- Case Decathlon trong muc Du an tham chieu --- */
.dcase{margin-top:var(--s32);background:#fff;border:1px solid rgba(43,35,24,.08);border-radius:var(--r-2xl);padding:8px;overflow:hidden}
.dcase-g{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.dcase-g img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);display:block}
.dc-lead{aspect-ratio:4/3;max-width:100%}
.dc-side{display:grid;grid-template-rows:1fr 1fr;gap:8px;min-height:0}
.dc-side img{min-height:140px}
.dcase-b{display:grid;grid-template-columns:1fr auto;gap:var(--s24);align-items:end;padding:var(--s24) var(--s20) var(--s16)}
.dc-tx h3{font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.01em;margin-top:8px;text-wrap:balance}
.dc-tx p{font-size:15px;line-height:1.55;color:var(--text-secondary);margin-top:var(--s12);max-width:62ch}
.dc-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s16)}
.dc-facts span{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:var(--r-sm);background:var(--paper-alt);font-size:13px;font-weight:600;color:var(--text-primary)}
@media(max-width:900px){.dcase-g{grid-template-columns:1fr}.dc-side{grid-template-rows:none;grid-template-columns:1fr 1fr}}
@media(max-width:720px){.dcase-b{grid-template-columns:1fr;align-items:start}}

/* --- Danh sach du an con lai: hang cao 44, vach ngan mong --- */
.proll .row{min-height:44px}

/* --- Hero: cap nut goi hanh dong (them 28/10/2026) --- */
.hero .herocta{display:flex;flex-wrap:wrap;gap:var(--s12);margin-top:var(--s32)}
@media(max-width:560px){.hero .herocta .btn{flex:1 1 100%}}

/* --- So lieu chot cua the giai phap (28/10/2026) ---
   Truoc: serif 22px mau olive, dai hai dong, canh tranh truc tiep voi tieu de
   cua chinh the do. Nguoi doc khong biet nhin vao dau truoc.
   Sau: chip gon, chu he grot, nen paper-alt. Tieu de gianh lai vai tro dan dat,
   con con so van noi bat vi co nen rieng. Dung chung ngon ngu voi .dc-facts. */
.bcard .knum{
  display:inline-block;
  font-family:var(--grot);
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--text-primary);
  background:var(--paper-alt);
  padding:7px 10px;
  border-radius:var(--r-sm);
  margin-top:var(--s12);
  font-variant-numeric:tabular-nums;
}

/* --- 04/11/2026: bo "nut gia" va vung bam nho ---
   Khach va team che "qua nhieu nut khong bam vao duoc". Do trang chu 04/11:
   18 nhan .fam/.dc-facts co vien hoac nen bo tron, trong y het nut, nhung la
   <span> khong co link. Nguoi dung bam vao khong co gi xay ra.
   Luat: cai gi trong nhu nut thi phai bam duoc. Nhan khong co link chi la chu,
   ngan bang dau cham. a.chip (co link that) giu nguyen dang nut. */
.feat .fam,.bbody .fam,.dc-facts{gap:4px 0}
.feat .fam span,.bbody .fam span:not(.chip),.dc-facts span{
  border:0;border-radius:0;background:none;padding:0;min-height:0;
  font-size:13px;font-weight:500;letter-spacing:.01em}
.dc-facts span{color:var(--text-secondary)}
.feat .fam span+span::before,.bbody .fam span:not(.chip)+span:not(.chip)::before,.dc-facts span+span::before{
  content:"\00B7";margin:0 10px;opacity:.55}
/* Dia chi o chan trang dang la <a> khong href (40+ file, ca app.js va shell.js):
   co con tro tay va hover nhu link. Sua bang CSS cho toan site, khong dung markup. */
footer a:not([href]){cursor:default;min-height:0;display:block}
footer a:not([href]):hover{color:rgba(240,235,226,.7)}
/* Vung bam 44pt (HIG, chot 28/10): link chu "... →" do duoc 23px,
   email/dien thoai o khoi lien he 19px. Noi chieu CAO, khong noi ngang. */
.tlink{min-height:44px}
.enquire .contact a{display:inline-flex;align-items:center;min-height:44px}

/* --- 04/11/2026 (W09, doi font Arimo): header mobile ---
   Do o khung 390 va 360: logo 140 + Shortlist 36 + VI/EN 61 + burger 44 + 3 khe 26px
   = 359px > 350px cho phep, nen burger rot xuong hang thu hai va header cao 130px
   (Luna do hero bat dau o y~131). Siet khe con 12px: tong 317px, vua ca o 360.
   Dau "/" giua VI va EN nam lech len tren vi nut cao 44 con span thi khong: canh giua. */
.nav .lang{align-items:center}
@media(max-width:900px){.nav{gap:12px}}

/* --- 05/11/2026 · B01: anh chinh trang san pham giu cho san, nut Shortlist khong nhay ---
   Luna do TAM.UNO 390px: truoc khi anh tai xong nut o y~791, sau khi tai y~1204 (lech ~413px).
   Co dinh chieu cao khung anh bang dung muc max-height cu; anh contain ben trong. */
.pdp .pstage{display:flex;align-items:center;justify-content:center;height:min(62vh,620px)}
.pdp .pstage img{width:100%;height:100%;max-height:none;object-fit:contain}
@media(max-width:900px){.pdp .pstage{height:52vh}}
/* B04: ten hang trong the cum la link that */
.clu-l b a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* --- 05/11/2026 · hoan thien huong B theo Luna (261105_1259) --- */
/* B-V03: h1 trang san pham (h1.sec) con Arimo 34px vi .sec chi co font tieu de khi la h2. */
h1.sec{font-family:var(--disp);font-weight:500;letter-spacing:-.02em}
/* B-V02: tu 760px tro xuong chu "Shortlist" bi an, chi con vong so "0" khong ro la gi.
   Them bieu tuong danh sach luu (mask SVG, mau theo currentColor), giu aria-label. */
.slbtn::before{content:"";width:16px;height:16px;flex:0 0 16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-6-4.2-6 4.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-6-4.2-6 4.2z'/%3E%3C/svg%3E") center/contain no-repeat}
/* B-V01: o vung noi dung 345-360px, .nav rong calc(100% - 40px) = 305px khong du cho
   logo + Shortlist + VI/EN + Menu, flex-wrap day nut Menu xuong hang 2 (header 117px).
   Duoi 400px: noi .nav ra 16px moi ben, gap 6px, wordmark nho lai, khong cho xuong hang. */
@media(max-width:400px){
  .wrap,.nav{width:calc(100% - 32px)}
  .nav{flex-wrap:nowrap;gap:6px}
  .nav .brandmark{flex:0 1 auto;min-width:0;gap:8px}
  .brandmark .lgi{height:26px;width:26px}
  .brandmark .lgw{height:13px}
  .nav .lang{gap:4px}
  .nav .slbtn{padding:8px 6px}
}