/* ============================================================
   TOYS UNCLE — ART-V2 DESIGN SYSTEM (dùng chung mọi trang)
   Nguồn token rút từ _preview/home-pc.html (giữ đồng bộ trang chủ).
   Trang chủ = deck (mech riêng); file này lo NGÔN NGỮ THỊ GIÁC
   + components + motion reveal cho trang CUỘN THƯỜNG (trang con).
   Cách dùng: <link rel="stylesheet" href="assets/art-v2/art-v2.css">
              <script defer src="assets/art-v2/art-v2.js"></script>
   ============================================================ */

:root{
  /* màu */
  --cream:#FBF6EE; --paper-hi:#FFFDF8; --ink:#1C1614; --ink-soft:#3C2C22;
  --kraft:#6B5847; --deep:#C56A23; --orange:#F6A251; --ochre:#E7C9A0; --ochre-deep:#D8B98A;
  --ink-dark:#1a120d;            /* nền tối (footer / khối premium) */
  --line:#6B584728; --line-soft:#6B584714;
  /* font */
  --serif:"Playfair Display",Georgia,serif;     /* tiêu đề điện ảnh */
  --body:"Be Vietnam Pro",system-ui,sans-serif; /* thân, UI */
  --book:"Lora",Georgia,serif;                  /* đoạn văn dài, dễ đọc, chất sách */
  /* layout */
  --maxw:1200px; --pad:clamp(20px,5vw,52px); --ease:cubic-bezier(.2,.7,.2,1);
  --radius:18px; --radius-lg:22px;
  /* nhịp motion CHUNG (khớp home-motion-spec MO_*) */
  --mo-fast:.5s; --mo-item:.82s; --mo-stag:.08s;
  /* texture giấy (grain) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- RESET + BASE + TEXTURE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(125% 90% at 50% -10%,var(--paper-hi),transparent 55%),linear-gradient(180deg,#FCF7EF,#F6EFE2)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:200px;opacity:.3;mix-blend-mode:multiply}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:-999px;top:8px;z-index:200;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(56px,9vw,104px);position:relative}
.section.tight{padding-block:clamp(36px,6vw,64px)}
.section.dark{background:var(--ink-dark);color:#cdbfb0}
.section.dark .eyebrow,.section.dark .acc{color:var(--orange)}
.grid{display:grid;gap:clamp(16px,2.4vw,26px)}

/* ---------- TYPOGRAPHY ---------- */
.serif{font-family:var(--serif)}
.acc{font-family:var(--serif);font-style:italic;color:var(--deep)}
.display{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;font-size:clamp(32px,6.4vw,56px)}
.h2{font-family:var(--serif);font-weight:600;line-height:1.12;text-wrap:balance;font-size:clamp(26px,4.6vw,42px)}
.h3{font-family:var(--serif);font-weight:600;line-height:1.18;font-size:clamp(20px,3vw,28px)}
.lead{font-family:var(--book);font-size:clamp(17px,2.2vw,21px);line-height:1.78;color:var(--ink-soft);max-width:62ch;text-wrap:pretty}
.lead.drop::first-letter{font-family:var(--book);font-weight:600;font-size:3.3em;line-height:.84;float:left;margin:.04em .12em -.04em 0;color:var(--deep)}
.muted{color:var(--kraft)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--deep)}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--deep);opacity:.7}
.eyebrow.c{justify-content:center}.eyebrow.c::after{content:"";width:24px;height:1.5px;background:var(--deep);opacity:.7}

/* ---------- BUTTONS + LINK ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:700;font-size:15px;border-radius:999px;padding:14px 24px;min-height:48px;transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s;cursor:pointer;border:0;line-height:1}
.btn-primary{background:var(--orange);color:var(--ink);box-shadow:0 8px 20px -10px #C56A2366}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px #C56A2399;background:#F4933C}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--kraft)}
.btn-ghost:hover{background:#6B58470f;transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px;color:var(--ink);border-bottom:2px solid var(--deep);padding-bottom:2px}
.link .ar{color:var(--deep);transition:transform .25s var(--ease)}.link:hover .ar{transform:translateX(5px)}
/* CTA hook kiểu tem (story/teaser) */
.cta-tag{display:inline-flex;align-items:center;gap:14px;padding:12px 14px 12px 24px;border-radius:999px;border:1.6px solid var(--deep);background:#C56A2310;color:var(--deep);font-family:var(--book);font-style:italic;font-size:clamp(15.5px,1.9vw,18px);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s}
.cta-tag .ar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--deep);color:#fff;font-style:normal;font-size:15px;flex:0 0 auto;transition:transform .3s var(--ease),background .3s,color .3s}
.cta-tag:hover{background:var(--deep);color:var(--paper-hi);box-shadow:0 14px 30px -14px #C56A2366}
.cta-tag:hover .ar{transform:translateX(4px);background:var(--paper-hi);color:var(--deep)}

/* ---------- HEADER / NAV ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--deep);z-index:120;transition:transform .25s linear}
.nav{position:fixed;inset:0 0 auto 0;z-index:100;background:#FCF7EFcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{background:#FCF7EFf2;border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:64px}
.brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}.brand img{height:26px;width:auto}
.brand .sl{font-size:7.5px;font-weight:700;letter-spacing:.14em;color:var(--kraft);text-transform:uppercase;white-space:nowrap;margin-left:1px}
.nav-links{display:none}
.nav-right{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;border:1.5px solid var(--kraft);border-radius:999px;overflow:hidden}
.lang button,.lang a{font:inherit;font-size:12px;font-weight:700;padding:6px 11px;background:transparent;color:var(--kraft);border:0;cursor:pointer;min-height:34px;display:inline-flex;align-items:center;text-decoration:none}
.lang button.on,.lang a.on{background:var(--ink);color:var(--paper-hi)}
.hamb{width:44px;height:44px;border:1.5px solid var(--kraft);border-radius:11px;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamb i{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.sheet{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:var(--cream);z-index:140;transform:translateX(100%);transition:transform .36s var(--ease);box-shadow:-30px 0 60px -30px #1c161366;padding:84px var(--pad) 40px;display:flex;flex-direction:column;gap:2px}
.sheet.open{transform:none}
.sheet a{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);padding:13px 0;border-bottom:1px solid var(--line-soft)}
.backdrop{position:fixed;inset:0;background:#1c161355;z-index:130;opacity:0;pointer-events:none;transition:opacity .3s}
.backdrop.open{opacity:1;pointer-events:auto}

/* ---------- CARD ---------- */
.card{background:var(--paper-hi);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 42px -26px #4a342055;border-color:#6B584740}
.card-cover{aspect-ratio:4/3;overflow:hidden;background:var(--ochre)}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card:hover .card-cover img{transform:scale(1.05)}
.card-body{padding:18px 20px}
.card-body h3{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,24px)}
.card-body p{margin-top:6px;color:var(--ink-soft);font-size:14.5px}

/* ---------- DÒNG SÔNG (đồng bộ trang chủ: gradient cam, chảy sống) ---------- */
/* SVG do art-v2-river.js TỰ TIÊM vào body (gradient + path #avFlowPath) rồi
   animate meander theo thời gian + cuộn. Khối nền tối (.section.dark, .foot) đục
   sẽ tự che sông y như footer trang chủ. */
.av-flow{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.av-flow path{fill:url(#avFlowGrad);stroke:#C56A23;stroke-width:1;stroke-opacity:.11;opacity:.11;filter:drop-shadow(0 3px 12px #C56A2316)}
.page-main{position:relative;z-index:1}   /* nội dung nổi trên sông */
.section.dark,.foot,.zodiac{position:relative;z-index:1}   /* khối tối che sông */

/* ---------- FOOTER ---------- */
.foot{background:var(--ink-dark);color:#cdbfb0;padding:clamp(44px,10vw,72px) 0 28px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.foot .ft-brand{grid-column:1/-1}
.foot img.fl{height:28px;margin-bottom:8px}
.foot .ft-tag{font-family:var(--serif);font-style:italic;color:var(--orange);font-size:19px}
.foot .ft-about{margin-top:10px;font-size:13.5px;color:#a8988a;max-width:34ch}
.foot h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a7a6c;margin-bottom:12px}
.foot a{display:block;font-size:14px;color:#cdbfb0;padding:5px 0}.foot a:hover{color:var(--orange)}
.foot .muted{color:#6f6052}
.foot-addr{font-size:13px;line-height:1.7;color:#a8988a;white-space:pre-line;margin-top:8px}
.foot-bot{border-top:1px solid #ffffff14;margin-top:30px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:12px;color:#7a6b5d}

/* ---------- REVEAL ON SCROLL (nhịp chung; IntersectionObserver gắn .in) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:transform,opacity}
  .reveal.from-x{transform:translateX(58px)}        /* trượt ngang (gợn sóng) */
  .reveal.zoom{transform:translateY(26px) scale(.93)} /* nổi + phóng nhẹ (thẻ) */
  .reveal.in{opacity:1;transform:none}
}

/* ---------- RESPONSIVE ---------- */
@media (min-width:768px){
  .foot-grid{grid-template-columns:repeat(4,1fr)}   /* 4 nhóm link đều; brand vẫn span 1/-1 (đỡ chật, hết wrap "Facebook Fanpage") */
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr 1.3fr}   /* 5 cột đầy đủ khi đủ rộng (brand vào hàng) */
  .foot .ft-brand{grid-column:auto}
}
@media (min-width:900px){
  .nav-links{display:flex;align-items:center;gap:24px}
  .nav-links a{font-size:14.5px;font-weight:600;color:var(--ink-soft);position:relative}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--deep);transition:right .28s var(--ease)}
  .nav-links a:hover::after,.nav-links a.active::after{right:0}
  .hamb{display:none}
}


/* ---------- TRANG CHÍNH SÁCH (policy/legal) ---------- */
.policy-sec{position:relative;z-index:1;padding:clamp(18px,3vw,36px) 0 clamp(48px,7vw,88px)}
.policy{max-width:800px}
.policy p{font-size:15.5px;line-height:1.8;color:var(--ink-soft);margin:0 0 16px;text-wrap:pretty}
.policy h2{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.4vw,26px);color:var(--ink);margin:36px 0 12px;letter-spacing:-.01em;text-wrap:balance}
.policy h2:first-child{margin-top:0}
.policy h3{font-family:var(--serif);font-weight:600;font-size:clamp(16px,1.8vw,19px);color:var(--ink);margin:24px 0 9px}
.policy ul{margin:0 0 18px;padding:0;list-style:none}
.policy li{position:relative;font-size:15.5px;line-height:1.75;color:var(--ink-soft);padding-left:24px;margin-bottom:9px;text-wrap:pretty}
.policy li::before{content:"";position:absolute;left:4px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--deep)}
.policy a{color:var(--deep);text-decoration:underline;text-underline-offset:2px}
.policy strong{color:var(--ink);font-weight:600}
.policy .p-note{font-family:var(--book);font-style:italic;color:var(--kraft);background:var(--paper-hi);border-left:3px solid var(--orange);border-radius:0 12px 12px 0;padding:14px 18px;margin-bottom:24px}
.policy-more{max-width:800px;margin:46px auto 0;padding-top:26px;border-top:1px solid var(--line)}
.policy-more .pm-lb{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--kraft);margin-bottom:13px}
.policy-more .pm-links{display:flex;flex-wrap:wrap;gap:10px}
.policy-more a{font-size:13px;font-weight:600;color:var(--ink);background:var(--paper-hi);border:1px solid var(--line);border-radius:999px;padding:9px 17px;transition:background .2s,border-color .2s,color .2s}
.policy-more a:hover{background:#fff;border-color:var(--deep);color:var(--deep)}
.policy-more a.cur{background:var(--deep);color:#fff;border-color:var(--deep);pointer-events:none}

/* Canh bao mao danh (anti-impersonation) */
.scam-alert{display:flex;gap:14px;align-items:flex-start;margin:0 0 clamp(20px,3vw,30px);padding:16px 20px;border-radius:16px;background:linear-gradient(120deg,#FBE3D2,#FDEFE2);border:1.5px solid #C9462E55;box-shadow:0 14px 30px -24px #8a3a1f}
.scam-alert .sa-ic{font-size:22px;line-height:1.2;flex:none}
.scam-alert strong{display:block;font-weight:800;color:#A33417;font-size:14.5px;letter-spacing:.01em}
.scam-alert p{margin:5px 0 0;color:#5b3a2a;font-size:13.5px;line-height:1.6;text-wrap:pretty}
.foot-scam{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--kraft)}
.foot-scam b{color:var(--ink)}

/* FAQ accordion */
.faq-sec{position:relative;z-index:1;padding:clamp(18px,3vw,36px) 0 clamp(46px,6vw,72px)}
.faq-h{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.4vw,36px);letter-spacing:-.015em;margin-top:12px;color:var(--ink);text-wrap:balance}
.faq-list{margin-top:clamp(20px,3vw,30px);max-width:760px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:18px 38px 18px 0;font-weight:600;font-size:clamp(15px,1.7vw,17px);color:var(--ink);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:22px;font-weight:400;color:var(--deep)}
.faq-list details[open] summary::after{content:"−"}
.faq-list p{margin:0 0 18px;color:var(--kraft);font-size:14.5px;line-height:1.7;max-width:64ch;text-wrap:pretty}