/* ==========================================================================
   Bộ website Ảo thuật Việt Nam – giao diện dùng chung + 4 chủ đề màu
   theme-main     : aothuatvietnam.vn, vietnammagic.com  (đỏ – đen – trắng)
   theme-viet     : aothuatviet.com    (chàm – vàng)
   theme-hanoi    : aothuathanoi.com   (vàng tường Hà Nội – xanh cửa chớp)
   theme-academy  : hocvienaothuat.com (tím – vàng nắng)
   Màu cụ thể đặt trong content/site.json → theme.colors
   ========================================================================== */

@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Riverflows";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/riverflows.woff) format("woff")}

:root{
  --ink:#000;--paper:#fff;--accent:#ED1C24;--accent-ink:#fff;--accent-2:#ED1C24;
  --muted:#5b5b5b;--line:#e2e2e2;--soft:#f3f3f3;--dark:#000;--on-dark:#fff;--on-dark-muted:#b9b9b9;
  --font-display:Georgia,"Times New Roman",serif;--font-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px;--gutter:clamp(16px,4vw,40px);--radius:4px;--radius-lg:6px;--header-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--font-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:100}.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:2px solid transparent;border-radius:var(--radius);font:600 16px/1.2 var(--font-body);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-cta{background:var(--ink);color:var(--paper);min-height:42px;padding:9px 18px;font-size:15px}
.btn-cta:hover{background:var(--accent);color:var(--accent-ink)}
.btn-invert{background:var(--paper);color:var(--ink)}
.btn-invert:hover{background:var(--ink);color:var(--paper)}
.btn-block{width:100%}
.btn-fan{background:#1877f2;color:#fff;min-height:42px;padding:9px 16px;font-size:15px}
.btn-fan svg{width:20px;height:20px;fill:currentColor}
.btn-fan:hover{background:#0f5fd0}
.text-link{font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px}
.text-link:hover{color:var(--ink)}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}

/* ---------- Đầu trang ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);transition:box-shadow .2s}
.site-header.scrolled{box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{height:46px;width:auto}
.wordmark{font:700 22px/1 var(--font-display);letter-spacing:.01em;white-space:nowrap}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav a{padding:8px 12px;text-decoration:none;font-weight:500;font-size:15px;border-radius:var(--radius)}
.main-nav a:hover,.main-nav a[aria-current]{color:var(--accent)}
.nav-fan{display:none}
.header-tools{display:flex;align-items:center;gap:12px}
.lang-switch{display:flex;border:1.5px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.lang-switch a{padding:6px 10px;font:600 13px/1 var(--font-body);text-decoration:none}
.lang-switch a[aria-current]{background:var(--ink);color:var(--paper)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.menu-btn span:first-child,.menu-btn span:first-child::before,.menu-btn span:first-child::after{position:absolute;left:11px;width:22px;height:2px;background:var(--ink);content:"";transition:transform .2s}
.menu-btn span:first-child{top:21px}.menu-btn span:first-child::before{left:0;top:-7px}.menu-btn span:first-child::after{left:0;top:7px}
.nav-open .menu-btn span:first-child{background:transparent}
.nav-open .menu-btn span:first-child::before{transform:translateY(7px) rotate(45deg)}
.nav-open .menu-btn span:first-child::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Khối chung ---------- */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec.dark,.about.dark{background:var(--dark);color:var(--on-dark)}
.sec-head{max-width:720px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(32px,4.4vw,52px)}
.sec-head p{margin:16px 0 0;font-size:19px;color:var(--muted);max-width:62ch}
.dark .sec-head p{color:var(--on-dark-muted)}
.sec-head-row{display:flex;justify-content:space-between;align-items:end;gap:24px;max-width:none;flex-wrap:wrap}
.sec-note{margin-top:28px;color:var(--muted);font-size:15px}
.ticks{list-style:none;padding:0;margin:0 0 20px}
.ticks li{position:relative;padding-left:24px;margin-bottom:6px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.prose{font-size:18px;line-height:1.75}
.prose h2{font-size:clamp(26px,3vw,34px);margin:1.6em 0 .5em}
.prose h3{font-size:23px;margin:1.4em 0 .4em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em}
.prose li{margin-bottom:.35em}
.prose img{margin:1.6em auto;border-radius:var(--radius)}
.prose figure{margin:1.6em 0}.prose figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
.prose blockquote{margin:1.5em 0;padding:4px 0 4px 22px;border-left:4px solid var(--accent);font-size:20px}
.prose a{color:var(--accent)}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:16px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.dark .prose{color:var(--on-dark)}

/* ---------- HERO (mặc định: "disc" – con ngươi đỏ của logo) ---------- */
.hero{position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,4vw,64px);min-height:min(calc(100vh - var(--header-h)),760px);padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(40px,6vw,72px)}
.hero-kicker{font-weight:600;color:var(--accent);margin-bottom:18px;font-size:17px}
.hero h1{font-size:clamp(44px,7vw,92px);line-height:1.02;letter-spacing:-.02em}
.hero-lead{font-size:clamp(18px,1.6vw,21px);max-width:34em;margin:26px 0 34px;color:var(--muted)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-facts{display:flex;gap:clamp(18px,3vw,40px);margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--line);flex-wrap:wrap}
.hero-facts div{min-width:110px}
.hero-facts dt{font:700 clamp(30px,3.4vw,42px)/1 var(--font-display);color:var(--ink)}
.hero-facts dd{margin:6px 0 0;font-size:14px;color:var(--muted);max-width:16ch}
.hero-media{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:420px}
.hero-photo{width:100%;height:100%;object-fit:cover}
.hero-caption{position:absolute;right:0;bottom:-28px;font-size:13px;color:var(--muted);margin:0}

.hero-disc .hero-media::before{content:"";position:absolute;left:50%;bottom:6%;width:min(100%,560px);aspect-ratio:1;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.hero-disc .hero-media::after{content:"";position:absolute;left:50%;bottom:calc(6% - 18px);width:calc(min(100%,560px) + 36px);aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);transform:translateX(-50%);pointer-events:none}
.hero-disc .hero-in{padding-bottom:0}
.hero-disc .hero-text{padding-bottom:clamp(40px,6vw,72px)}
.hero-disc .hero-media::before{bottom:0}
.hero-disc .hero-media::after{bottom:-18px}
.hero-disc .hero-cutout{position:relative;z-index:1;width:min(100%,500px);max-height:96%;object-fit:contain;object-position:bottom}
.hero-disc .hero-photo{display:none}
@media (prefers-reduced-motion:no-preference){
  .hero-disc .hero-media::before{animation:pupil 1.1s cubic-bezier(.2,.8,.2,1) both}
  .hero-disc .hero-cutout{animation:rise .9s .25s cubic-bezier(.2,.8,.2,1) both}
  @keyframes pupil{from{transform:translateX(-50%) scale(.2);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
  @keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}

/* ---------- Hệ sinh thái ---------- */
.brands{border-top:1px solid var(--line)}
.brand-list{display:grid;gap:clamp(56px,8vw,104px)}
.brand-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.brand-row.flip .brand-img{order:2}
.brand-img{margin:0;position:relative}
.brand-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.brand-img figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.brand-body .brand-field{color:var(--accent);font-weight:600;margin-bottom:10px;font-size:16px}
.brand-body h3{font-size:clamp(28px,3.2vw,40px);margin-bottom:16px}
.brand-body>p{color:var(--muted);font-size:18px}
.brand-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.domain{display:inline-flex;flex-direction:column;padding:10px 16px;border:1.5px solid var(--ink);border-radius:var(--radius);text-decoration:none;font-weight:600;line-height:1.25}
.domain small{font-weight:400;font-size:13px;color:var(--muted)}
.domain:hover{background:var(--ink);color:var(--paper)}.domain:hover small{color:inherit}

/* ---------- Giới thiệu ---------- */
.about-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.about h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:24px}
.about-img{margin:0}
.about-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 70%;border-radius:var(--radius-lg)}
.about-img figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.dark .about-img figcaption{color:var(--on-dark-muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0 0;padding:0}
.stats div{border-top:2px solid var(--accent);padding-top:14px}
.stats dt{font:700 clamp(30px,3.6vw,44px)/1 var(--font-display)}
.stats dd{margin:8px 0 0;font-size:14px;color:var(--muted)}
.dark .stats dd{color:var(--on-dark-muted)}

/* ---------- Hành trình ---------- */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));column-gap:clamp(24px,5vw,72px)}
.tl li{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;gap:6px 20px;align-items:baseline}
.dark .tl li{border-color:rgba(255,255,255,.18)}
.tl-year{font:700 clamp(38px,4vw,54px)/1 var(--font-display);color:var(--accent)}
.tl h3{font-family:var(--font-body);font-size:18px;font-weight:600;line-height:1.35;margin-bottom:6px}
.tl p{margin:0;font-size:15px;color:var(--muted)}
.dark .tl p{color:var(--on-dark-muted)}

/* ---------- Dịch vụ ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,3vw,36px)}
.svc{display:flex;flex-direction:column}
.svc img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:18px}
.svc h3{font-size:24px;margin-bottom:10px}
.svc p{color:var(--muted);margin-bottom:12px}
.dark .svc p{color:var(--on-dark-muted)}
.svc-meta{font-size:14px;font-weight:600;color:var(--ink)!important}
.dark .svc-meta{color:var(--on-dark)!important}
.svc .text-link{margin-top:auto}

/* ---------- Hình ảnh ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:10px}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius)}
.gal figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal figure:nth-child(6){grid-column:span 2}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:28px 12px 10px;font-size:13px;line-height:1.35;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}

/* ---------- Khách hàng ---------- */
.cl-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,56px)}
.cl-group h3{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--accent);margin-bottom:14px}
.cl-group ul{list-style:none;padding:0;margin:0}
.cl-group li{padding:10px 0;border-bottom:1px solid var(--line);font-size:18px}
.dark .cl-group li{border-color:rgba(255,255,255,.16)}

/* ---------- Nhà sáng lập ---------- */
.founder-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,88px);align-items:center}
.founder-img{margin:0}
.founder-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:var(--radius-lg)}
.founder h2{font-size:clamp(30px,4vw,46px);margin-bottom:22px}
.founder blockquote{margin:0 0 22px;font:700 clamp(22px,2.4vw,28px)/1.35 var(--font-display)}
.founder blockquote p{margin:0}
.founder-name{display:flex;flex-direction:column;margin-bottom:20px}
.founder-name span{color:var(--muted);font-size:15px}
.dark .founder-name span{color:var(--on-dark-muted)}
.achv{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.achv li{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline}
.achv b{font-family:var(--font-display);font-size:22px;color:var(--accent)}

/* ---------- Quy trình ---------- */
.steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.steps li{counter-increment:st;position:relative;padding-top:56px}
.steps li::before{content:counter(st);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 18px/1 var(--font-body)}
.steps h3{font-family:var(--font-body);font-size:19px;font-weight:600;margin-bottom:8px}
.steps p{color:var(--muted);font-size:16px;margin:0}

/* ---------- Hỏi đáp ---------- */
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px)}
.faq-list details{border-bottom:1px solid var(--line);padding:18px 0}
.faq-list summary{font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-list summary::after{content:"+";font-size:24px;line-height:1;color:var(--accent)}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{margin:12px 0 0;color:var(--muted)}

/* ---------- Dải kêu gọi ---------- */
.band{background:var(--accent);color:var(--accent-ink);padding:clamp(40px,6vw,64px) 0}
.band-in{display:flex;align-items:center;gap:24px 40px;flex-wrap:wrap}
.band-title{font:700 clamp(26px,3.4vw,40px)/1.15 var(--font-display);margin:0;flex:1 1 420px}
.band-text{margin:0;flex:1 1 280px;opacity:.9}

/* ---------- Bài viết ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(20px,3vw,36px)}
.pcard{display:flex;flex-direction:column}
.pcard-img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-lg);background:var(--soft);margin-bottom:16px}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pcard-img img{transform:scale(1.03)}
.pcard-ph{display:block;width:100%;height:100%;background:var(--soft) url(/images/logo-icon.png) center/70px no-repeat;opacity:.6}
.pcard time{font-size:14px;color:var(--muted)}
.pcard h3{font-size:22px;line-height:1.25;margin:6px 0 10px}
.pcard h3 a{text-decoration:none}.pcard h3 a:hover{color:var(--accent)}
.pcard p{color:var(--muted);font-size:16px;margin:0}
.dark .pcard p,.dark .pcard time{color:var(--on-dark-muted)}
.feed-title{font-size:clamp(24px,3vw,32px);margin:56px 0 28px}
.feed-title:first-child{margin-top:0}
.empty{color:var(--muted);font-size:18px}

/* ---------- Liên hệ ---------- */
.contact{background:var(--soft)}
.contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:start}
.contact h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:18px}
.contact-lead{font-size:19px;color:var(--muted)}
.contact-list{list-style:none;padding:0;margin:32px 0 0}
.contact-list li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:17px}
.contact-list span{color:var(--muted);font-size:15px}
.contact-list a{font-weight:600;text-decoration:none}.contact-list a:hover{color:var(--accent)}
.cform{background:var(--paper);padding:clamp(22px,3.5vw,40px);border-radius:var(--radius-lg);display:grid;gap:16px}
.cform label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.cform input,.cform select,.cform textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--font-body)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--ink)}
.cform .invalid input,.cform .invalid select{border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform .consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--muted)}
.cform .consent input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;accent-color:var(--accent)}
.cform .consent a{color:var(--ink)}
.consent.invalid span{color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;font-size:15px;min-height:1px}.form-msg.err{color:var(--accent);font-weight:600}
.form-note{margin:0;font-size:13px;color:var(--muted)}

/* ---------- Trang con ---------- */
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(36px,5.5vw,64px)}
.page-head p{font-size:19px;color:var(--muted);margin:18px 0 0;max-width:60ch}
.page-head.center{text-align:center;border:0;padding-bottom:clamp(64px,8vw,120px)}
.page-head.center p{margin-left:auto;margin-right:auto}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px!important}
.post-head{padding-top:clamp(40px,6vw,80px)}
.back{display:inline-block;margin-bottom:22px;font-weight:600;color:var(--accent);text-decoration:none}
.back::before{content:"‹ "}
.post-head h1{font-size:clamp(34px,5vw,58px);line-height:1.08}
.post-meta{color:var(--muted);margin:18px 0 0}
.post-cover{margin:clamp(28px,4vw,48px) auto}
.post-cover img{width:100%;max-height:640px;object-fit:cover;border-radius:var(--radius-lg)}
.post .prose{padding-top:clamp(24px,3vw,40px)}
.share{display:flex;gap:10px;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.share span{color:var(--muted);margin-right:6px}
.share a{padding:7px 14px;border:1.5px solid var(--ink);border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:14px}
.share a:hover{background:var(--ink);color:var(--paper)}
.pol-list{list-style:none;padding:0;margin:0}
.pol-list a{display:grid;gap:4px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.pol-list strong{font-family:var(--font-display);font-size:24px}
.pol-list span{color:var(--muted)}
.pol-list a:hover strong{color:var(--accent)}
.policy-layout{display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,5vw,72px);padding-top:48px;padding-bottom:96px}
.pol-side nav{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:2px}
.pol-side a{padding:9px 12px;border-left:2px solid var(--line);text-decoration:none;font-size:15px;color:var(--muted)}
.pol-side a[aria-current]{border-color:var(--accent);color:var(--ink);font-weight:600}
.policy{max-width:760px}
.policy h2{font-family:var(--font-body);font-size:22px;font-weight:700}
.pol-updated{margin-top:48px;font-size:15px;color:var(--muted)}

/* ---------- Chân trang ---------- */
.site-footer{background:var(--dark);color:var(--on-dark);padding:clamp(56px,7vw,88px) 0 0;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,56px)}
.foot-brand img{height:62px;width:auto;margin-bottom:20px}
.foot-brand p{color:var(--on-dark-muted);max-width:36ch}
.foot-col h2{font:600 15px/1.3 var(--font-body);color:var(--on-dark);margin-bottom:16px;opacity:.65}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot-col a{text-decoration:none}
.foot-col a:hover{color:var(--accent-2)}
.foot-col small{display:block;color:var(--on-dark-muted);font-size:13px}
.foot-contact li{display:grid;gap:2px}
.foot-contact span{font-size:13px;color:var(--on-dark-muted)}
.foot-legal{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(40px,5vw,64px);padding-top:28px;padding-bottom:20px;border-top:1px solid rgba(255,255,255,.16);flex-wrap:wrap}
.legal-text p{margin:0 0 4px;color:var(--on-dark-muted);font-size:14px}
.legal-text .legal-name{color:var(--on-dark);font-weight:700;font-size:15px;margin-bottom:8px}
.legal-text strong{color:var(--on-dark)}
.bct img{width:150px;height:auto}
.foot-copy{padding-top:16px;padding-bottom:96px;border-top:1px solid rgba(255,255,255,.08)}
.foot-copy p{margin:0;font-size:13px;color:var(--on-dark-muted)}

/* ---------- Nút liên hệ nhanh ---------- */
.quick{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;gap:8px;align-items:center}
.quick a{display:inline-flex;align-items:center;gap:8px;height:52px;min-width:52px;justify-content:center;border-radius:26px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.22);font-weight:700}
.quick svg{width:22px;height:22px;fill:currentColor}
.q-call{background:var(--accent);color:var(--accent-ink);padding:0 18px 0 16px}
.q-zalo{background:#0068ff;color:#fff;width:52px;font-size:14px}
.q-fb{background:#1877f2;color:#fff;width:52px}

/* ==========================================================================
   CHỦ ĐỀ: aothuatviet.com – chàm & vàng
   ========================================================================== */
.theme-viet .site-header{background:var(--dark);color:var(--on-dark)}
.theme-viet .site-header.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.12)}
.theme-viet .lang-switch{border-color:var(--on-dark)}
.theme-viet .menu-btn span:first-child,.theme-viet .menu-btn span:first-child::before,.theme-viet .menu-btn span:first-child::after{background:var(--on-dark)}
.theme-viet .wordmark{color:var(--accent);font-size:24px}
.theme-viet .btn-cta{background:var(--accent);color:var(--accent-ink)}
.theme-viet .btn-cta:hover{background:var(--paper);color:var(--ink)}
.hero-poster{background:var(--dark);color:var(--on-dark)}
.hero-poster .hero-in{grid-template-columns:1fr 1fr}
.hero-poster .hero-kicker{color:var(--accent)}
.hero-poster .hero-lead,.hero-poster .hero-facts dd{color:var(--on-dark-muted)}
.hero-poster .hero-facts{border-color:rgba(255,255,255,.2)}
.hero-poster .hero-facts dt{color:var(--accent)}
.hero-poster .btn-ghost{color:var(--on-dark)}
.hero-poster .btn-ghost:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.hero-poster .btn-primary:hover{background:var(--paper);color:var(--ink)}
.hero-poster .hero-media{align-items:center;min-height:520px}
.hero-poster .hero-photo{position:absolute;top:4%;left:16%;width:84%;height:70%;object-fit:cover;border:10px solid var(--accent);border-radius:2px}
.hero-poster .hero-cutout{position:absolute;left:-2%;bottom:0;width:56%;max-height:78%;object-fit:contain;object-position:bottom left;z-index:1;filter:drop-shadow(0 16px 24px rgba(0,0,0,.35))}
.hero-poster .hero-caption{display:none}
.hero-poster .hero-caption{color:var(--on-dark-muted);bottom:2px;right:4%}
.theme-viet .brands{border:0;background:var(--soft)}
.theme-viet .ticks li::before{border-radius:0;transform:rotate(45deg);width:9px;height:9px}
.theme-viet .stats div{border-color:var(--accent)}
.theme-viet .band{background:var(--dark);color:var(--on-dark);border-top:6px solid var(--accent)}
.theme-viet .band .btn-invert{background:var(--accent);color:var(--accent-ink)}
.theme-viet .tl-year,.theme-viet .achv b{color:var(--accent-2)}
.theme-viet .dark .tl-year{color:var(--accent)}

/* ==========================================================================
   CHỦ ĐỀ: aothuathanoi.com – vàng tường Hà Nội & xanh cửa chớp
   ========================================================================== */
.theme-hanoi h1,.theme-hanoi h2,.theme-hanoi .wordmark{letter-spacing:0}
.theme-hanoi .wordmark{color:var(--accent-2);font-size:23px}
.hero-arch{background:var(--accent)}
.hero-arch h1{color:var(--accent-2)}
.hero-arch .hero-kicker{color:var(--ink)}
.hero-arch .hero-lead{color:var(--ink);opacity:.8}
.hero-arch .btn-primary{background:var(--accent-2);color:#fff}
.hero-arch .btn-primary:hover{background:var(--ink)}
.hero-arch .hero-facts{border-color:rgba(0,0,0,.18)}
.hero-arch .hero-facts dt{color:var(--accent-2)}
.hero-arch .hero-facts dd{color:var(--ink);opacity:.75}
.hero-arch .hero-media{flex-direction:column;align-items:center;justify-content:flex-end;padding-top:24px}
.hero-arch .hero-photo{width:min(100%,480px);height:auto;aspect-ratio:4/5;border-radius:240px 240px 0 0;border:14px solid var(--accent-2);border-bottom:0;object-fit:cover}
.hero-arch .hero-caption{color:var(--ink);opacity:.7;bottom:-26px;right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}
.theme-hanoi .site-header{background:var(--paper);border-bottom:4px solid var(--accent-2)}
.theme-hanoi .btn-cta{background:var(--accent-2)}
.theme-hanoi .btn-primary{background:var(--accent-2);color:#fff}
.theme-hanoi .btn-primary:hover{background:var(--ink)}
.theme-hanoi .brand-img img,.theme-hanoi .about-img img,.theme-hanoi .founder-img img{border-radius:200px 200px var(--radius-lg) var(--radius-lg)}
.theme-hanoi .svc img{border-radius:120px 120px var(--radius) var(--radius)}
.theme-hanoi .text-link,.theme-hanoi .brand-field,.theme-hanoi .tl-year,.theme-hanoi .achv b,.theme-hanoi .cl-group h3,.theme-hanoi .back{color:var(--accent-2)}
.theme-hanoi .ticks li::before,.theme-hanoi .steps li::before{background:var(--accent-2)}
.theme-hanoi .steps li::before{color:#fff}
.theme-hanoi .stats div{border-color:var(--accent-2)}
.theme-hanoi .band{background:var(--accent-2);color:#fff}
.theme-hanoi .contact{background:var(--soft)}
.theme-hanoi .dark .tl-year{color:var(--accent)}
.theme-hanoi .q-call{background:var(--accent-2);color:#fff}

/* ==========================================================================
   CHỦ ĐỀ: hocvienaothuat.com – tím & vàng nắng
   ========================================================================== */
.theme-academy{--radius:12px;--radius-lg:20px}
.theme-academy h1,.theme-academy h2,.theme-academy h3{letter-spacing:0;line-height:1.1}
.theme-academy .btn{border-radius:999px}
.theme-academy .btn-primary{background:var(--accent-2);color:var(--ink)}
.theme-academy .btn-primary:hover{background:var(--accent);color:#fff}
.theme-academy .btn-cta{background:var(--accent)}
.hero-academy .hero-in{grid-template-columns:1fr 1fr}
.hero-academy h1{color:var(--accent);font-size:clamp(40px,5.4vw,74px)}
.hero-academy .hero-kicker{display:inline-block;background:var(--accent-2);color:var(--ink);padding:6px 14px;border-radius:999px;font-size:15px}
.hero-academy .hero-media{align-items:flex-end}
.hero-academy .hero-media::before{content:"";position:absolute;inset:8% 0 0 6%;background:var(--accent);border-radius:40px 40px 0 0}
.hero-academy .hero-media::after{content:"";position:absolute;right:6%;top:4%;width:120px;height:120px;background:var(--accent-2);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hero-academy .hero-cutout{position:relative;z-index:1;width:100%;max-height:96%;object-fit:contain;object-position:bottom}
.hero-academy .hero-in{padding-bottom:0}
.hero-academy .hero-text{padding-bottom:clamp(40px,6vw,72px)}
.hero-academy .hero-photo{display:none}
.hero-academy .hero-facts dt{color:var(--accent)}
.theme-academy .brand-field,.theme-academy .text-link,.theme-academy .tl-year,.theme-academy .achv b,.theme-academy .cl-group h3,.theme-academy .back,.theme-academy .hero-kicker{color:var(--accent)}
.theme-academy .hero-academy .hero-kicker{color:var(--ink)}
.theme-academy .ticks li::before{background:var(--accent-2);box-shadow:0 0 0 2px var(--accent)}
.theme-academy .stats div{border-color:var(--accent-2)}
.theme-academy .band{background:var(--accent);color:#fff}
.theme-academy .band .btn-invert{background:var(--accent-2);color:var(--ink)}
.theme-academy .contact{background:var(--soft)}
.theme-academy .dark .tl-year{color:var(--accent-2)}
.theme-academy .steps li::before{background:var(--accent-2);color:var(--ink)}
.theme-academy .q-call{background:var(--accent);color:#fff}

/* ---------- Màn hình nhỏ ---------- */
@media (max-width:1080px){
  .main-nav{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--paper);flex-direction:column;padding:12px var(--gutter) 24px;gap:0;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .25s;max-height:calc(100vh - var(--header-h));overflow:auto;z-index:-1;margin:0}
  .theme-viet .main-nav{background:var(--dark)}
  .nav-open .main-nav{transform:none}
  .main-nav a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:17px}
  .theme-viet .main-nav a{border-color:rgba(255,255,255,.12)}
  .nav-fan{display:block}
  .menu-btn{display:block}
  .header-tools{margin-left:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--header-h:64px}
  body{font-size:16px}
  .brand img{height:38px}
  .wordmark{font-size:19px}
  .btn-cta{display:none}
  .hero-in,.hero-poster .hero-in,.hero-academy .hero-in{grid-template-columns:1fr;min-height:0}
  .hero-media{min-height:360px;order:-1}
  .hero-disc .hero-media{min-height:380px}
  .hero-disc .hero-media::before{width:min(86vw,400px)}
  .hero-disc .hero-media::after{width:calc(min(86vw,400px) + 28px);bottom:calc(6% - 14px)}
  .hero-disc .hero-cutout{width:min(84vw,380px)}
  .hero-poster .hero-media{min-height:400px}
  .hero-arch .hero-media{order:0}
  .hero-arch .hero-photo{width:min(86vw,380px)}
  .hero-caption{position:static;margin-top:10px}
  .hero-arch .hero-caption{position:static;transform:none;white-space:normal;text-align:center}
  .brand-row,.about-in,.founder-in,.contact-in,.faq-in{grid-template-columns:1fr}
  .brand-row.flip .brand-img{order:0}
  .stats{grid-template-columns:repeat(3,1fr);gap:12px}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gal figure:nth-child(6){grid-column:span 2}
  .row2{grid-template-columns:1fr}
  .contact-list li{grid-template-columns:1fr;gap:2px}
  .policy-layout{grid-template-columns:1fr;padding-top:24px}
  .pol-side nav{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:6px}
  .pol-side a{border:1px solid var(--line);border-radius:999px;white-space:nowrap;padding:7px 14px}
  .pol-side a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .lang-switch a{padding:6px 8px}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .q-call span{display:none}
  .q-call{width:52px;padding:0}
  .hero-actions .btn{flex:1 1 100%}
  .stats dt{font-size:28px}
  .tl{grid-template-columns:1fr}
  .tl li{grid-template-columns:84px 1fr;padding:20px 0}
  .tl-year{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.site-header,.quick,.site-footer,.pol-side,.share,.contact{display:none!important}.policy-layout{display:block;padding:0}body{font-size:12pt}}
.post-origin{margin-top:28px;font-size:15px;color:var(--muted)}.post-origin a{color:var(--accent)}
.table-wrap{overflow-x:auto;margin:1.2em 0}.table-wrap table{margin:0;min-width:480px}.prose thead th{background:var(--soft)}