/* 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;
}