/* app.css (M17) — SINH TU DONG boi src/test/bo-chuyen. DUNG SUA TAY.
   Phan 1: khoi <style> trong <helmet> cua "Sieutut Web.dc.html" — CHEP NGUYEN VAN.
   Day la TOAN BO phan responsive cua ban thiet ke (4 moc 1140/980/900/560px). Mat khoi nay la mat responsive. */

  html, body { margin: 0; padding: 0; background: var(--bg); }
  * { box-sizing: border-box; }
  a { color: var(--accent-dark); text-decoration: none; }
  a:hover { color: var(--accent); }
  @keyframes stFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes stPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
  html[data-theme="dark"] body { background: #12100E; }
  @media (max-width: 1140px) {
    [data-nav] { gap: 14px !important; font-size: 13.5px !important; margin-left: 0 !important; }
    [data-header] { gap: 16px !important; }
  }
  @media (max-width: 980px) {
    [data-nav] { display: none !important; }
  }
  @media (max-width: 900px) {
    [data-split] { grid-template-columns: 1fr !important; }
    [data-price-grid] { grid-template-columns: 1fr !important; }
    [data-pad] { padding-left: 22px !important; padding-right: 22px !important; }
    [data-hero-h1] { font-size: 40px !important; }
    [data-page-h1] { font-size: 30px !important; }
    [data-sticky] { position: static !important; }
  }
  @media (max-width: 560px) {
    [data-hero-h1] { font-size: 32px !important; }
  }


/* Phan 2: lop sinh tu thuoc tinh style-hover / style-focus cua ban ve. */
.f-focusinput:focus{border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,26,.14);}
.h-hoverbtnghost:hover{border-color: #D8CCC1; background: var(--soft);}
.h-hoverbtnghostdark:hover{border-color: rgba(255,252,249,.42); background: rgba(255,252,249,.12);}
.h-hoverbtnprimary:hover{background: #E85A0C;}
.h-hovercard:hover{transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23,18,14,.09); border-color: #E0D3C6;}
.h-hoverdark:hover{border-color: #4A3B2E; transform: translateY(-3px);}
.h-hovermenudanger:hover{background: var(--pink-bg);}
.h-hovermenuitem:hover{background: var(--soft);}
.h-hoverorange:hover{color: var(--accent);}
.h-hoverpay:hover{border-color: #FFC79E; background: #FFFAF6;}
.h-hoverrow:hover{background: #FDF9F5;}

/* ---------------------------------------------------------------------------
   Phan 3: bu cho ban ve. Do BO CHUYEN sinh — sua trong src/test/bo-chuyen/index.mjs.
   --------------------------------------------------------------------------- */

/* 3a. Nut doi Sang/Toi: ban ve tinh style nay bang JS theo state.dark (dong 2299-2305), ma may chu
   KHONG biet khach dang de che do nao (che do luu o localStorage phia khach). Neu de may chu doan
   thi khach dung che do toi se thay nut nhap nhay mot nhip khi tai trang. Dua ve bien CSS de trinh
   duyet tu chon — dung 3 gia tri cua chinh ban ve. */
:root{ --theme-btn-bg:#FAF6F2; --theme-btn-line:#ECE4DC; --theme-btn-ink:#57504A; }
html[data-theme="dark"]{ --theme-btn-bg:#2A231D; --theme-btn-line:#352C25; --theme-btn-ink:#FFC9A3; }

/* 3b. Nut mo MENU duoi 980px. Ban ve chi `display:none` toan bo [data-nav] ma KHONG thay bang gi
   -> khach dung dien thoai mat loi vao 5 muc chinh. Cong 3 nghiem thu bat phai tu bo sung
   (05-nghiem-thu.md muc 3). Nut nay bam token mau cua chinh ban ve. */
[data-menu-btn]{ display:none; }
@media (max-width: 980px){
  [data-menu-btn]{
    display:grid; place-items:center; width:40px; height:40px; padding:0; margin-left:auto;
    background:var(--soft); border:1px solid var(--line); border-radius:12px;
    color:var(--ink); font-family:inherit; cursor:pointer;
  }
  [data-nav][data-mo="1"]{
    display:flex !important; position:absolute; left:0; right:0; top:100%; z-index:80;
    flex-direction:column; align-items:stretch; gap:0 !important; padding:8px 22px 16px;
    background:var(--surface); border-bottom:1px solid var(--line-2);
  }
  [data-nav][data-mo="1"] > *{ padding:12px 0; min-height:44px; display:flex; align-items:center; }
  [data-header]{ position:relative; flex-wrap:wrap; }
}

/* 3c. TRAN NGANG tren dien thoai — LOI CUA CHINH BAN VE, da do: mo "Sieutut Web.dc.html" o
   390px va 320px thi `document.documentElement.scrollWidth` deu = 588px, tuc trang bi keo ngang
   ~200-270px, 3 phan tu trong header loi ra ngoai man. Thu pham la khoi ben PHAI cua header
   (`display:flex; ...; flex:none`) rong 392px: nhan "VI / EN" + nut Sang/Toi + "Dang nhap" +
   "Dung thu mien phi", tat ca deu `white-space:nowrap` va `flex:none` nen khong bao gio co lai.
   Chinh README cua bo thiet ke ghi y dinh la "duoi 980px giu logo + nut Dang nhap/Dung thu tren
   MOT hang" — y dinh dung, nhung so do khong du cho. Cong 3 nghiem thu chan tran ngang, va tran
   ngang la loi dung duoc: khach vuot ngang moi thay het nut.
   Vi vay CO Y KHAC BAN VE o day (da ghi implementation-notes): duoi 620px cho khoi do XUONG DONG.
   Chon 620px vi ban ve tran tu duoi 588px, cong them 40px nut menu ta them.
   Neo bang `[style*="flex: none"]` chu khong sua markup — ban ve khong co class= nao de bam. */
@media (max-width: 620px){
  [data-header]{ flex-wrap: wrap !important; row-gap: 12px !important; }
  [data-header] > div[style*="flex: none"]{
    flex: 1 1 auto !important; flex-wrap: wrap; justify-content: flex-end; gap: 10px !important;
  }
  /* "VI / EN" la nhan TRO o ban ve (doi ngon ngu KHONG thuoc dot M17) -> nhuong cho truoc tien. */
  [data-header] > div[style*="flex: none"] > span:first-child{ display: none; }
}

/* 3c-bis. NUT / O NHAP KHONG KHAI MAU CHU.
   Ban ve de nhieu <button> va <input> khong dat `color`, tuc dua vao mau MAC DINH cua trinh
   duyet — mau do la DEN. O che do sang thi den la dung; o che do toi thi thanh DEN TREN NEN TOI.
   Do that o man chi tiet: nut "Tai ban dung thu" tuong phan 1,17 (chuan can 4,5) — gan nhu doc
   khong ra. Dat `color: inherit` o do uu tien THAP: nut nao co color rieng trong style noi tuyen
   van thang, nut nao khong khai thi thua huong mau chu cua khoi chua no. */
button, input, select, textarea { color: inherit; }

/* 3c-ter. MAN HINH RAT HEP (<= 560px).
   Ban ve chi thiet ke toi moc 560px; duoi nua la ngoai pham vi. Do that o 320px: ruot man chi tiet
   rong 334px trong khung 320px -> tran ngang 54px, vi luoi giu nguyen so cot va le van 22px.
   O be rong nay, MOT COT la cach duy nhat doc duoc. */
@media (max-width: 560px){
  [data-pad]{ padding-left: 16px !important; padding-right: 16px !important; }
  [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  h1, h2, h3, p, div { overflow-wrap: anywhere; min-width: 0; }
}

/* 3d. CHU MO TREN KHOI TOI CO DINH — mot ma mau, hai so phan (lan nua).
   Ban ve co 17 khoi nen `#17120E` (nay la `var(--inverse-bg)`) SANG hay TOI deu giu mau toi.
   Chu mo trong nhung khoi do lai dung chung token voi chu mo tren nen sang. Sau khi anh Dao chot
   dam `--dim` xuong `#6E645C` cho dat 4,5 tren nen sang, chinh no lai tut xuong 3,22 khi nam
   tren nen toi — va nhanh toi thi khong doi duoc gi vi day la khoi toi CO DINH.
   Cach chua: trong pham vi khoi toi, keo cac token CHU ve dung gia tri cua nhanh toi.
   CHI ap o che do sang (`html:not([data-theme="dark"])`) — che do toi da la gia tri do roi.
   Da do: trang chu khong co mang sang nao long trong khoi toi. Van de phong xa cho 15 man con
   lai bang luat tra-token-ve ngay duoi. */
html:not([data-theme="dark"]) [style*="--inverse-bg"]{
  --ink:#F5EFE9; --ink-2:#E8E0D8; --muted:#B5AAA1; --muted-2:#A2968C;
  --dim:#9C9088; --dim-2:#A2968C; --accent-dark:#FF8A46;
}
/* Mang SANG long ben trong khoi toi (the neu co o man khac) -> tra token ve nhanh sang,
   neu khong chu se hoa trang tren nen trang. */
html:not([data-theme="dark"]) [style*="--inverse-bg"] :where(
  [style*="--card"],[style*="--surface"],[style*="--soft"],
  [style*="--cream"],[style*="--sunken"],[style*="--bg"]){
  --ink:#17120E; --ink-2:#2C2621; --muted:#57504A; --muted-2:#6B625B;
  --dim:#6E645C; --dim-2:#736861; --accent-dark:#B0400A;
}

/* 3e. Tieu diem ban phim. Ban ve khong ve trang thai focus cho the bam duoc -> nguoi dung ban phim
   khong biet minh dang o dau. Ca hai nhanh cua muc 11 quy tac chung deu bat buoc dat phan tiep can. */
:where(a,button,[data-di],[data-hanh],input,select,textarea):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
}