/* home.css — trang chu phuong an B (04/11/2026, DEC-261104-02)
   Chi trang chu nap file nay (body.home). Moi rule deu scope body.home de khong
   dung toi trang khac dung chung style.css.

   1. THANG CHU: 8 co co ten. Audit Luna do 26 co chu tren trang chu cu. Moi vai tro
      chu tren trang (ke ca nav, luoi thuong hieu, form, footer) phai lay tu 8 bien
      nay; them co moi la phai them bien moi, co y. Ba co lon dung clamp nen gia tri
      doi theo be rong, nhung o mot be rong bat ky van chi co 8 gia tri.
   2. NEN: chi paper / paper-alt xen ke, earth cho mot khoi nhan (lien he). Bo navy
      va den than (#1b1a1c) cua cac khoi feat cu.
   3. HERO: thap lai de man dau (1272x620 va 390x844) thay du nhan "Saigon Curation
      Lab", wordmark, cau gia tri (heroLead, CMS) va 2 nut vao hai cum.
   05/11/2026 · HUONG B "KIEN TRUC": hero, bang giai phap va khoi du an viet lai ben duoi.
      Them 2 co co y: --f9 tieu de hero (64-70px desktop, 36-40px mobile, Luna) va --fm 13px
      cho IBM Plex Mono (chi so thu tu; Luna: mono 12px qua nho). Chuyen dong: reveal mot lan
      <=0.7s, hover 180-240ms, khong marquee/carousel; prefers-reduced-motion tat het. */
body.home{
  --f1:12px;   /* nhan, eyebrow, nut, chu phu */
  --f2:14px;   /* link, chu nho, o tim, dia chi */
  --f3:16px;   /* than bai, o nhap form */
  --f4:18px;   /* lead */
  --f5:22px;   /* tieu de the, tagline */
  --f6:30px;   /* tieu de case, menu mobile */
  --f7:clamp(30px,3.2vw,40px);  /* h2 khoi */
  --f8:clamp(34px,4.4vw,56px);  /* cau lon khoi lien he */
  --f9:clamp(36px,calc(28px + 3vw),68px); /* tieu de hero: 390->40, 1280->66 */
  --fm:13px;   /* IBM Plex Mono: so thu tu */
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:var(--f3);
}
/* Nut va o nhap mac dinh cua trinh duyet la 13.33px: cho ke thua de khong lot co thu 9. */
body.home button,body.home input,body.home select,body.home textarea{font-size:inherit}
/* ---- ap thang chu len cac thanh phan dung chung ---- */
body.home .eyebrow,body.home .btn,body.home .nav .lang,body.home .nav .cta,body.home .slbtn,body.home .slbtn b,
body.home .bwchip,body.home .bwchip .bwn,body.home .bwcount,body.home .bwtag,body.home .bwcat,body.home .bwask,
body.home .bwdsc,body.home .bcard .cat,body.home .rfq label,body.home footer h5,body.home footer .fine,
body.home .projects .note,body.home .feat .fam span{font-size:var(--f1)}
body.home .tlink,body.home .nav .links a,body.home .drawer .lang2,body.home .bwsearch input,body.home .bwsearch .bwic,
body.home .bwempty,body.home .bwempty button,body.home .bwfold summary,body.home .bcard .ex,body.home .studio .addr,
body.home .dc-facts span,body.home .consent label,body.home .rfq .ok,body.home footer a,body.home footer div,
body.home .enquire .contact,body.home .studio .legal,body.home .clu-l{font-size:var(--f2)}
body.home p,body.home .dc-tx p,body.home .rfq input,body.home .rfq select,body.home .rfq textarea,body.home .clu p,
body.home .studio p{font-size:var(--f3)}
body.home .lead,body.home .bwwm{font-size:var(--f4)}
body.home .bcard h3,body.home .hero .tag,body.home .burger,body.home .drawer .x,body.home .clu h3{font-size:var(--f5)}
body.home .dc-tx h3,body.home .drawer a.ml{font-size:var(--f6)}
body.home h2.sec{font-size:var(--f7);margin:var(--s12) 0 var(--s16)}
body.home .enquire .big{font-size:var(--f8)}
body.home .studio p.legal{font-size:var(--f2)}
/* 901-1180: nav siet lai (hig.css) nhung van dung co cua thang */
@media(min-width:901px) and (max-width:1180px){body.home .nav .links a{font-size:var(--f1)}body.home .nav .cta{font-size:var(--f1)}}

/* ---- nen xen ke: paper / paper-alt, earth cho lien he ---- */
body.home .hero{background:var(--paper)}
body.home .brands{background:var(--paper-alt)}
body.home .blogteaser{background:var(--paper)}
body.home .studio{background:var(--paper-alt)}
body.home .enquire{background:var(--earth)}

/* ---- nhip section: mot bac padding cho moi khoi ---- */
body.home .projects,body.home .brands,body.home .blogteaser,body.home .enquire{padding:var(--s88) 0}
body.home .anchor{display:block;position:relative;top:-96px;visibility:hidden;height:0}

/* ---- 1. HERO (B "Kien truc") ----
   Luoi 12 cot: trai 6 cot chu, phai 6 cot luoi 2x2 anh hang. 901-1180: 7/5 de tieu de khong
   len 5-6 dong. <=900: mot cot, chu truoc, luoi anh sau (o thap, Luna: mau 163x276 qua cao). */
body.home .hb-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s24);padding:var(--s32) 0 var(--s48);min-height:min(calc(100svh - 70px),780px)}
body.home .hb-l{grid-column:span 6;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s32);min-width:0}
body.home .hb-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s16)}
body.home .hb-tag{font-size:var(--f2);color:var(--text-secondary)}
body.home .hb-h{display:flex;flex-direction:column;font-family:var(--disp);font-weight:500;font-size:var(--f9);line-height:1.08;letter-spacing:-.03em;color:var(--ink);margin:0;text-wrap:balance}
/* Lop mask reveal: dem tren/duoi de dau tieng Viet (Ồ, Ể, Ữ) va chan chu (g, p, y) khong bi cat
   (ban mau line-height .98 + overflow:hidden cat dau). Bu bang margin am nen khong doi nhip dong.
   h1 la flex cot: margin am cua hai .mk lien ke KHONG gop (margin collapse) nen khoang dong deu. */
body.home .hb-h .mk{display:block;overflow:hidden;padding:.2em 0 .24em;margin:-.2em 0 -.24em}
body.home .hb-h .mk>span{display:block;animation:hbUp .7s var(--ease) both}
body.home .hb-h .mk2>span{animation-delay:.08s;color:var(--olive)}
body.home .hb-h.still .mk>span{animation:none}
@keyframes hbUp{from{transform:translateY(calc(100% + .4em))}to{transform:none}}
body.home .hb-rule{height:1px;background:var(--ink);opacity:.5;margin:var(--s32) 0 var(--s24);transform-origin:left;animation:hbRule .8s .15s var(--ease) both}
@keyframes hbRule{from{transform:scaleX(0)}to{transform:none}}
body.home .hb-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s24);align-items:start}
body.home .hb-sub{margin:0;font-size:var(--f3);line-height:1.6;color:var(--text-secondary);max-width:40ch}
body.home .hb-cta{display:flex;flex-direction:column;gap:var(--s8)}
/* Nut B: vuong, chu thuong (khong HOA ca cau), mui ten ben phai. Cao 48 >= 44. */
body.home .hbtn{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);min-height:48px;padding:10px 18px;border:1px solid var(--ink);border-radius:2px;color:var(--ink);font-family:var(--grot);font-size:var(--f3);font-weight:600;line-height:1.25;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
body.home .hbtn:hover{background:var(--ink);color:var(--paper)}
body.home .hbtn:hover .arrow,body.home .hb-t:hover .arrow,body.home a.sol-r:hover .arrow{transform:translateX(4px)}
body.home .hbtn.on-dark{display:inline-flex;border-color:var(--text-on-dark);color:var(--text-on-dark)}
body.home .hbtn.on-dark:hover{background:var(--text-on-dark);color:var(--earth)}
/* Luoi 4 o: kich thuoc o CO DINH; hover chi phong anh ben trong (220ms), khong doi co o,
   khong lam nhat o khac (Luna). Caption tren dai nen chac mau ink, khong chu tran tren anh. */
body.home .hb-grid{grid-column:span 6;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;min-height:520px}
body.home .hb-t{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ink);color:var(--text-on-dark);overflow:hidden;animation:hbIn .6s var(--ease) both}
body.home .hb-t:nth-child(2){animation-delay:.06s}body.home .hb-t:nth-child(3){animation-delay:.12s}body.home .hb-t:nth-child(4){animation-delay:.18s}
@keyframes hbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.home .hb-im{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--paper-alt)}
body.home .hb-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .22s var(--ease)}
@media (hover:hover){body.home .hb-t:hover .hb-im img{transform:scale(1.04)}}
body.home .hb-t:focus-visible .hb-im img{transform:scale(1.04)}
body.home .hb-t:focus-visible{outline:3px solid var(--olive);outline-offset:3px;border-radius:0}
body.home .hb-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--s12);padding:12px 14px;background:var(--ink);min-height:56px}
body.home .hb-cn{display:flex;flex-direction:column;min-width:0;line-height:1.3}
body.home .hb-cn b,body.home .hb-cn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.home .hb-cn b{font-size:15px;font-weight:600}
body.home .hb-cn span{font-size:var(--fm);color:rgba(240,235,226,.82)}
body.home .hb-cap .arrow{flex:0 0 auto}
@media(min-width:901px) and (max-width:1180px){
  body.home .hb-l{grid-column:span 7}
  body.home .hb-grid{grid-column:span 5;min-height:480px}
  body.home .hb-foot{grid-template-columns:1fr;gap:var(--s16)}
  /* hai nut xep doc, rong ca cot: o 950 dat canh nhau thi "Hospitality & ngoai troi" xuong 2 dong */
}
@media(max-width:900px){
  body.home .hb-g{grid-template-columns:minmax(0,1fr);min-height:0;padding:var(--s24) 0 var(--s32);gap:var(--s32)}
  body.home .hb-l,body.home .hb-grid{grid-column:1/-1}
  body.home .hb-l{gap:var(--s24)}
  body.home .hb-rule{margin:var(--s24) 0 var(--s16)}
  body.home .hb-foot{grid-template-columns:minmax(0,1fr);gap:var(--s16)}
  body.home .hb-sub{max-width:none}
  body.home .hb-grid{min-height:0;grid-template-rows:auto auto}
  body.home .hb-im{flex:none;height:clamp(104px,30vw,180px)}
  body.home .hb-cap{padding:10px 12px;min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  body.home .hb-h .mk>span,body.home .hb-rule,body.home .hb-t{animation:none!important;transform:none!important;opacity:1!important}
  body.home .hb-im img,body.home .arrow,body.home .hbtn,body.home a.sol-r{transition:none!important}
}

/* ---- 2. GIAI PHAP CHO DU AN: bang "Tim theo khong gian" ----
   Hover/focus: nen earth dat THANG len hang <a> va chu doi sang cung mot transition,
   nen chu luon co nen (ban mau dung ::before z-index:-1, nen khong hien, chu sang tren nen sang). */
body.home .sol{background:var(--paper-alt);padding:var(--s88) 0}
body.home .sol-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s24);align-items:baseline;margin-bottom:var(--s32)}
body.home .sol-h .eyebrow{grid-column:span 3}
body.home .sol-h h2.sec{grid-column:span 9;margin:0}
body.home .sol-r{display:grid;grid-template-columns:56px minmax(0,2fr) minmax(0,2fr) minmax(0,3fr) 32px;gap:var(--s24);align-items:center;padding:var(--s24) var(--s16);border-top:1px solid rgba(43,35,24,.25);color:var(--ink);background-color:transparent;transition:background-color .2s var(--ease),color .2s var(--ease)}
body.home .sol-t .sol-r:last-child{border-bottom:1px solid rgba(43,35,24,.25)}
body.home .sol-hd{padding-block:0 var(--s12);border-top:0;font-size:var(--f1);letter-spacing:.06em;color:var(--text-secondary)}
body.home .sol-n{font-family:var(--mono);font-size:var(--fm);font-weight:500;color:var(--olive)}
body.home .sol-s{font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.02em}
body.home .sol-b{font-size:var(--f2);font-weight:600}
body.home .sol-p{font-size:var(--f2);opacity:.8}
body.home .sol-a{font-size:22px;justify-self:end}
body.home a.sol-r:hover,body.home a.sol-r:focus-visible{background-color:var(--earth);color:var(--text-on-dark)}
body.home a.sol-r:hover .sol-n,body.home a.sol-r:focus-visible .sol-n{color:var(--sky)}
body.home a.sol-r:focus-visible{outline:3px solid var(--olive);outline-offset:2px;border-radius:0}
body.home .sol-all{margin-top:var(--s16)}
@media(max-width:900px){
  body.home .sol{padding:var(--s64) 0}
  body.home .sol-h{grid-template-columns:1fr;gap:var(--s8)}
  body.home .sol-h .eyebrow,body.home .sol-h h2.sec{grid-column:1/-1}
  body.home .sol-hd,body.home .sol-p{display:none}
  body.home .sol-r{grid-template-columns:36px minmax(0,1fr) 24px;grid-template-rows:auto auto;column-gap:var(--s12);row-gap:4px;padding:var(--s16) var(--s8)}
  body.home .sol-n{grid-row:1/3;align-self:start;padding-top:6px}
  body.home .sol-s{grid-column:2;grid-row:1}
  body.home .sol-b{grid-column:2;grid-row:2;font-weight:500;color:inherit;opacity:.85}
  body.home .sol-a{grid-column:3;grid-row:1/3}
}

/* ---- 3. DU AN: nen earth, anh lon trai + chu thich ngan phai (Luna: muon nhip tho cua A,
   mau am cua C). Chu va claim Decathlon giu nguyen. ---- */
body.home .projects.pj{background:var(--earth);color:var(--text-on-dark)}
body.home .pj .eyebrow{color:var(--sky)}
body.home .pj h2.sec{color:var(--text-on-dark)}
body.home .pj .lead{max-width:62ch;margin-bottom:0;color:rgba(240,235,226,.78)}
body.home .pj-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s24);margin-top:var(--s40)}
body.home .pj-lead{grid-column:span 7;margin:0;min-height:0}
body.home .pj-lead img{width:100%;height:100%;min-height:360px;object-fit:cover}
body.home .pj-tx{grid-column:span 5;display:flex;flex-direction:column;gap:var(--s16)}
body.home .pj-tx h3{font-family:var(--disp);font-weight:500;font-size:var(--f6);line-height:1.15;letter-spacing:-.02em;color:var(--text-on-dark)}
body.home .pj-tx p{margin:0;line-height:1.6;color:rgba(240,235,226,.82)}
body.home .pj .dc-facts{display:flex;flex-wrap:wrap;gap:4px 0}
body.home .pj .dc-facts span{color:rgba(240,235,226,.9)}
body.home .pj-side{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
body.home .pj-side img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
body.home .pj .note{margin-top:var(--s24);color:rgba(240,235,226,.72)}
@media(max-width:900px){body.home .pj-lead,body.home .pj-tx{grid-column:1/-1}body.home .pj-lead img{min-height:0;aspect-ratio:4/3}body.home .pj-g{margin-top:var(--s24)}}

/* ---- 4. THUONG HIEU ---- */
body.home .brands .lead{margin-bottom:var(--s16)}
body.home .brlinks{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s8)}
body.home .bwfold{margin-top:0;width:100%}
body.home .bwtag{font-size:var(--f1);padding:3px 8px}

/* ---- 5. BLOG: tieu de + 1 cau, khong anh ---- */
body.home .blogteaser .head{margin-bottom:var(--s32)}
body.home .bgrid{gap:var(--s24)}
body.home .bcard.solcard{padding:var(--s24);background:var(--paper-alt);border-radius:var(--r-2xl,24px);gap:var(--s8)}
body.home .bcard.solcard .cat{margin:0}
body.home .bcard.solcard h3{margin:0}
body.home .bcard.solcard .ex{margin:0;line-height:1.55}

/* ---- 6. STUDIO ngan ---- */
body.home .studio .tx{padding:var(--s64) var(--s64)}
body.home .studio .im{min-height:380px}
body.home .studio .addr{margin:0}
body.home .studio .addr+.addr{margin-top:4px}
body.home .studio p.legal{margin:var(--s16) 0}
@media(max-width:900px){body.home .studio .tx{padding:var(--s48) var(--s24)}body.home .studio .im{min-height:240px}}

/* ---- 7. LIEN HE: giu nguyen form, chi siet khoang ---- */
body.home .enquire .big{margin:var(--s12) 0 var(--s32)!important}

@media(max-width:900px){
  body.home .projects,body.home .brands,body.home .blogteaser,body.home .enquire{padding:var(--s64) 0}
}