/* kOBE theme.css: chế độ SÁNG (bảng 2 "Trắng ấm", chốt 4/9/2026).
   Nạp SAU <style> của từng trang để đè. Chế độ tối = bộ biến mặc định trong từng trang.
   Bật bằng <html data-theme="light">; script trong <head> tự đặt theo lựa chọn đã lưu hoặc cài đặt máy. */
:root{color-scheme:dark}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FBFAF7; --bg2:#F3F0E9;
  --card:#FFFFFF; --card2:rgba(0,0,0,.04);
  --line:rgba(20,18,16,.1);
  --text:#141210; --muted:#625a52;
  --terra:#EF4423; --terra2:#C9371A; --terra-soft:rgba(239,68,35,.11);
  /* biến mới, chỉ theme.css dùng */
  --hdr:rgba(251,250,247,.85); --nav:#3a3430; --ul:rgba(20,18,16,.35);
  --card-shadow:0 6px 22px rgba(0,0,0,.06);
}
:root[data-theme="light"] body{background:var(--bg);color:var(--text)}
/* header + menu */
:root[data-theme="light"] header{background:var(--hdr)}
:root[data-theme="light"] .nav .links,
:root[data-theme="light"] .dd-menu a,
:root[data-theme="light"] .mobile-menu a.mm-sub{color:var(--nav)}
:root[data-theme="light"] .mobile-menu{background:rgba(251,250,247,.98)}
:root[data-theme="light"] .dd-menu{background:#fff;border-color:var(--line);box-shadow:0 12px 32px rgba(0,0,0,.1)}
:root[data-theme="light"] .nav-cart{color:var(--text)}
/* thẻ nổi bằng bóng mỏng thay vì trắng mờ */
:root[data-theme="light"] .card,
:root[data-theme="light"] .pcard,
:root[data-theme="light"] .dish,
:root[data-theme="light"] .node,
:root[data-theme="light"] .pkg,
:root[data-theme="light"] .tier{box-shadow:var(--card-shadow)}
:root[data-theme="light"] .pcard .imph,
:root[data-theme="light"] .mimph{background:var(--bg2)}
/* viền, gradient, chân trang */
:root[data-theme="light"] section.blk,
:root[data-theme="light"] section.grp{border-top-color:var(--line)}
:root[data-theme="light"] .feature::after{background:linear-gradient(90deg,rgba(251,250,247,.9),rgba(251,250,247,.25) 55%,rgba(251,250,247,.55))}
:root[data-theme="light"] .reportfade{background:linear-gradient(to bottom,rgba(251,250,247,0),var(--bg))}
:root[data-theme="light"] .fd{background:rgba(0,0,0,.02)}
:root[data-theme="light"] .fd-links a{text-decoration-color:var(--ul)}
:root[data-theme="light"] .m-sizes button.szrow:hover{border-color:rgba(0,0,0,.3)}
:root[data-theme="light"] .modal-box{background:#fff}
:root[data-theme="light"] .tem .tip{background:#fff;border-color:var(--line);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.12)}
:root[data-theme="light"] .btn-terra{box-shadow:0 10px 26px rgba(239,68,35,.25)}
/* giỏ hàng (cart.js ghi cứng màu tối) */
:root[data-theme="light"] .kc-draw{background:#fff;border-left-color:var(--line);color:var(--text)}
:root[data-theme="light"] .kc-hd,
:root[data-theme="light"] .kc-grp,
:root[data-theme="light"] .kc-row,
:root[data-theme="light"] .kc-ft{border-color:var(--line)}
:root[data-theme="light"] .kc-row img,
:root[data-theme="light"] .kc-stp button{background:var(--bg2);border-color:var(--line);color:var(--text)}
:root[data-theme="light"] .kc-ft input,
:root[data-theme="light"] .kc-ft textarea{background:#fff;border-color:rgba(20,18,16,.2);color:var(--text)}
:root[data-theme="light"] .kc-msg{border-color:rgba(20,18,16,.2);color:var(--text)}
:root[data-theme="light"] .kc-empty,
:root[data-theme="light"] .kc-rm,
:root[data-theme="light"] .kc-clear,
:root[data-theme="light"] .kc-back,
:root[data-theme="light"] .kc-estnote,
:root[data-theme="light"] .kc-msgtip{color:var(--muted)}
:root[data-theme="light"] .kc-pr,
:root[data-theme="light"] .kc-nudge,
:root[data-theme="light"] .kc-shipnote,
:root[data-theme="light"] .kc-sc{color:var(--terra2)}
:root[data-theme="light"] .kc-pr s{color:var(--muted)}
:root[data-theme="light"] .kc-tier,
:root[data-theme="light"] .kc-plannote{background:rgba(14,59,36,.1);color:#0E3B24}
:root[data-theme="light"] .kc-suat{background:#fff}
/* nút chuyển sáng/tối (site.js chèn) */
.theme-switch{position:fixed;right:22px;bottom:88px;z-index:80;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:var(--card2);color:var(--text);backdrop-filter:blur(10px);cursor:pointer;font-size:20px;line-height:1;transition:transform .2s;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.theme-switch:hover{transform:translateY(-2px)}
:root[data-theme="light"] .theme-switch{background:#fff}
@media(max-width:820px){.theme-switch{width:50px;height:50px;right:16px;bottom:76px;font-size:18px}}

/* ===== Bổ sung 4/9/2026 sau khi soi preview: đè mọi màu ghi cứng còn sót ===== */
:root[data-theme="light"] .nav-dd .dd-menu{background:#fff;box-shadow:0 20px 44px rgba(0,0,0,.14)}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field input[type=text],
:root[data-theme="light"] .field input[type=email],
:root[data-theme="light"] .fsearch,
:root[data-theme="light"] .seg button,
:root[data-theme="light"] .iw input,
:root[data-theme="light"] .opt{background:#fff;color:var(--text);border-color:rgba(20,18,16,.18)}
:root[data-theme="light"] .field input::placeholder,
:root[data-theme="light"] .field textarea::placeholder{color:#9a928a}
/* chữ phụ sáng (#cfc7bf, #e9e2da, #efe9e2, #e7e0d8, #d8d0c8) -> muted / text */
:root[data-theme="light"] .msg-box p,
:root[data-theme="light"] .foot-col a,:root[data-theme="light"] .foot-plain,
:root[data-theme="light"] .foot-social a,
:root[data-theme="light"] .how span,
:root[data-theme="light"] .tabs button,
:root[data-theme="light"] .pcard .ord,
:root[data-theme="light"] .bsub,
:root[data-theme="light"] .leanpoke .lp-body p,
:root[data-theme="light"] .banner5 .t p,
:root[data-theme="light"] .modal-badges span,
:root[data-theme="light"] .m-desc,:root[data-theme="light"] .m-list li,
:root[data-theme="light"] .ing-note,
:root[data-theme="light"] .mbd .mdesc,:root[data-theme="light"] .ming li,
:root[data-theme="light"] .mbase,:root[data-theme="light"] .mbase .brow span,
:root[data-theme="light"] .mpkgbtn,
:root[data-theme="light"] .pbenz li,
:root[data-theme="light"] .prose p,:root[data-theme="light"] .note p,
:root[data-theme="light"] .band p,
:root[data-theme="light"] .rule p,
:root[data-theme="light"] .s-badges span,
:root[data-theme="light"] .modal li,
:root[data-theme="light"] .sidx a:hover{color:var(--muted)}
:root[data-theme="light"] .leanpoke .lp-chips span,
:root[data-theme="light"] .band .quote,
:root[data-theme="light"] .statement p,
:root[data-theme="light"] .opts label,
:root[data-theme="light"] .kick,
:root[data-theme="light"] .marquee .track{color:var(--text)}
:root[data-theme="light"] .kick .leaf{color:#2e8b57}
:root[data-theme="light"] .foot-col h5,
:root[data-theme="light"] .foot-bottom,
:root[data-theme="light"] .foot-mini,
:root[data-theme="light"] .soon .note,
:root[data-theme="light"] .sidx,:root[data-theme="light"] .sidx a{color:var(--muted)}
:root[data-theme="light"] .qlink.msg span{color:rgba(255,255,255,.95)}
/* nền tối của khung ảnh, popup, thumbnail */
:root[data-theme="light"] .pcard .im,
:root[data-theme="light"] .leanpoke .lp-media,
:root[data-theme="light"] .m-hero,
:root[data-theme="light"] .m-thumbs button,
:root[data-theme="light"] .mim,
:root[data-theme="light"] .hero-img,
:root[data-theme="light"] .believe .c-img{background:var(--bg2);background-color:var(--bg2)}
:root[data-theme="light"] .pcard .imph i{color:#c9c2b8}
:root[data-theme="light"] .pcard .imph span{color:var(--muted)}
:root[data-theme="light"] .pcard .imph small,:root[data-theme="light"] .mimph{color:#9a928a}
:root[data-theme="light"] .modal-ov{background:rgba(20,18,16,.45)}
:root[data-theme="light"] .modal-close{background:rgba(0,0,0,.08);color:var(--text)}
:root[data-theme="light"] .m-page{border-bottom-color:rgba(201,55,26,.4)}
:root[data-theme="light"] .psur{color:var(--terra2);background:rgba(239,68,35,.08);border-color:rgba(239,68,35,.35)}
:root[data-theme="light"] .step .n{box-shadow:0 4px 12px rgba(0,0,0,.15)}
:root[data-theme="light"] .final{border-top-color:var(--line)}
/* trang chủ */
:root[data-theme="light"] .fpill{background:#fff;color:var(--text);box-shadow:0 10px 24px rgba(0,0,0,.1);border:1px solid var(--line)}
:root[data-theme="light"] .chip{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.08)}
:root[data-theme="light"] .feature .card{background:rgba(255,255,255,.86);color:var(--text);backdrop-filter:blur(8px)}
:root[data-theme="light"] .feature .card p{color:var(--muted)}
:root[data-theme="light"] .gtabs{background:rgba(0,0,0,.06)}
:root[data-theme="light"] .fbtn{background:rgba(0,0,0,.06);color:var(--text)}
:root[data-theme="light"] .bstage img{box-shadow:0 30px 60px rgba(0,0,0,.18)}
:root[data-theme="light"] .tem img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.18))}
:root[data-theme="light"] .loop{color:#0E3B24}
:root[data-theme="light"] .cwarn{background:rgba(239,68,35,.08);border-color:rgba(239,68,35,.35);color:#7a2a18}
/* ẢNH NỀN ĐEN (chưa có bản sáng): bọc thành thẻ tối bo góc cho ra vẻ chủ ý, thay vì loang đen */
:root[data-theme="light"] .bowl,
:root[data-theme="light"] .hero-img img{-webkit-mask-image:none;mask-image:none;border-radius:28px;background:#0b0b0b;box-shadow:0 30px 60px rgba(0,0,0,.18)}
:root[data-theme="light"] .kcal .big-n,
:root[data-theme="light"] .tem .tip b,
:root[data-theme="light"] .mpkgbtn.on{color:var(--text)}
:root[data-theme="light"] .m-page:hover{color:var(--terra2);border-bottom-color:var(--terra2)}
/* khung ảnh nền kem: ảnh nhân vật hiện trọn thay vì cắt */
:root[data-theme="light"] .benicard .pic{background-size:cover;background-position:center top}
:root[data-theme="light"] .believe .c-img{background-size:contain;background-position:center;background-repeat:no-repeat;background-color:var(--bg2)}
/* ảnh chụp nền đen (chưa có bản sáng): bo góc thành thẻ tối có chủ ý */
:root[data-theme="light"] .darkshot{border-radius:24px;box-shadow:0 24px 50px rgba(0,0,0,.16)}

/* ===== Bố cục chữ (áp cho CẢ 2 chế độ, 4/9/2026): tránh xuống hàng lẻ ===== */
h1,h2,h3,.big{text-wrap:balance}
.btn,.pill,.how span,.pills span,.tag,.chip{white-space:nowrap}
.phero:has(> h1){max-width:920px}   /* chỉ hero canh giữa (dong-lanh, nguyen-lieu); hero 2 cột giữ nguyên */
@media(max-width:960px){.phero:has(> h1){max-width:100%}}
p,.lead,.lead-narrow{text-wrap:pretty}   /* đoạn dẫn không để 1 chữ lẻ dòng cuối */
