/* =====================================================================
   Kế toán Thiên Chương — Design System
   Tổ chức: 1) Tokens  2) Base  3) Layout  4) Components  5) Motion
   Lưu ý: giữ nguyên tên biến cũ (--orange, --blue, --muted...) vì được
   dùng trong style inline của HTML. Chỉ tinh chỉnh giá trị + bổ sung token.
   ===================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Brand — cam thương hiệu, hạ độ chói cho cảm giác cao cấp hơn */
  --orange:#e1611e;          /* primary brand */
  --orange-dark:#bd4d12;     /* hover / text đậm */
  --brand-soft:#fdf2e9;      /* nền peach dịu */
  --brand-ring:rgba(225,97,30,.32);

  /* Secondary — chuyển từ xanh royal chói sang navy chuyên nghiệp */
  --blue:#1f4e79;            /* navy */
  --blue-dark:#173b5c;       /* navy đậm cho heading phụ */
  --blue-soft:#eef3f8;

  /* Neutrals — trung tính hơi ấm, dễ chịu */
  --ink:#1b2431;            /* text chính */
  --muted:#5a6273;         /* text phụ */
  --line:#e6e8ef;          /* viền */
  --line-strong:#d3d7e2;
  --bg:#ffffff;
  --bg-alt:#f7f8fb;        /* section nền nhạt */
  --bg-soft:#fdf2e9;       /* = brand-soft, giữ tên cũ để tương thích */

  /* Spacing scale (4pt) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* Shadow — mềm, nhiều lớp, ít "đổ bóng cứng" */
  --sh-xs:0 1px 2px rgba(20,27,45,.05);
  --sh-sm:0 2px 8px rgba(20,27,45,.06);
  --sh-md:0 8px 24px rgba(20,27,45,.08);
  --sh-lg:0 18px 44px rgba(20,27,45,.10);
  --sh-brand:0 12px 28px rgba(225,97,30,.24);

  /* Type scale */
  --fs-eyebrow:13px;
  --lh-tight:1.2;
  --lh-body:1.68;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.2s;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
h1,h2,h3,h4{line-height:var(--lh-tight);margin:0;letter-spacing:-.015em;font-weight:800}
h2{letter-spacing:-.02em}
p{margin:0 0 var(--sp-3)}
ul{margin:0;padding-left:20px}
::selection{background:var(--brand-soft);color:var(--orange-dark)}

/* Focus nhất quán, chỉ hiện khi dùng bàn phím */
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible{outline-offset:3px}

/* ---------- 3. Layout ---------- */
.container{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.section{padding:var(--sp-20) 0}
.section.alt{background:var(--bg-alt)}
.section-head{text-align:center;max-width:720px;margin:0 auto var(--sp-10)}
.section-head h2{font-size:clamp(27px,3.4vw,36px)}
.section-head p{color:var(--muted);margin-top:var(--sp-3);font-size:clamp(15px,1.4vw,17px)}

.eyebrow{
  display:inline-block;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  font-size:var(--fs-eyebrow);color:var(--orange-dark);background:var(--brand-soft);
  padding:6px 13px;border-radius:var(--r-pill);margin-bottom:var(--sp-3);
}

/* ---------- 4. Components ---------- */
/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--r-md);font-weight:700;border:1.5px solid transparent;
  cursor:pointer;font-size:15px;line-height:1.2;letter-spacing:.005em;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--orange-dark);box-shadow:0 16px 32px rgba(225,97,30,.30)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--orange);color:var(--orange-dark);box-shadow:var(--sh-sm)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(31,78,121,.22)}
.btn-blue:hover{background:var(--blue-dark)}
.btn-light{background:#fff;color:var(--orange-dark);box-shadow:var(--sh-sm)}
.btn-light:hover{background:#fff;color:var(--orange);box-shadow:var(--sh-md)}

/* Header / Nav */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.01em}
.brand img{width:42px;height:42px;border-radius:11px;object-fit:cover;border:1px solid var(--line)}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:12px;letter-spacing:0}
.nav-links{display:none;gap:26px;font-weight:600;color:#3b4252}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--orange);border-radius:2px;transition:right var(--dur) var(--ease);
}
.nav-links a:hover{color:var(--orange-dark)}
.nav-links a:hover::after{right:0}
.nav-cta{display:inline-flex}
@media(min-width:880px){.nav-links{display:flex}}

/* Hero */
.hero{
  background:
    radial-gradient(1100px 460px at 88% -10%,rgba(31,78,121,.10),transparent 60%),
    radial-gradient(900px 420px at 0% 0%,rgba(225,97,30,.10),transparent 55%),
    linear-gradient(180deg,#fffaf5 0%,#f7f9fc 100%);
  padding:var(--sp-16) 0 var(--sp-20);overflow:hidden;
}
.hero-grid{display:grid;gap:var(--sp-10)}
@media(min-width:900px){.hero-grid{grid-template-columns:1.08fr .92fr;align-items:center}}
.hero h1{font-size:clamp(31px,4.7vw,48px);letter-spacing:-.025em;margin-top:6px}
.hero h1 .hl{color:var(--orange);position:relative}
.hero .lead{font-size:clamp(16px,1.6vw,18.5px);color:var(--muted);max-width:60ch;margin-top:var(--sp-4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:var(--sp-6) 0}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;padding:0;margin:0;color:#3b4252;font-weight:600;font-size:14.5px}
.hero-meta li{display:inline-flex;align-items:center;gap:8px}
.hero-meta li::before{content:'';width:8px;height:8px;border-radius:var(--r-pill);background:var(--orange);box-shadow:0 0 0 3px var(--brand-soft)}
.hero-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-6);box-shadow:var(--sh-lg);
}
.hero-card h3{font-size:18px;margin-bottom:var(--sp-2)}
.hero-card .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.hero-card .row:last-child{border-bottom:0;padding-bottom:0}
.hero-card .row:first-of-type{padding-top:6px}
.hero-card .row p{margin:0;color:var(--muted);font-size:14.5px}
.hero-card .row strong{display:block;color:var(--ink);margin-bottom:2px}

/* Monogram chips (dùng chung: .ic hero-card, .b-ic benefit, .w-ic why) */
.hero-card .ic,.benefit .b-ic,.why .w-ic{
  flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;font-size:14px;letter-spacing:.02em;
}
.hero-card .ic{background:linear-gradient(135deg,#fff1e6,#fde0cc);color:var(--orange-dark);box-shadow:inset 0 0 0 1px rgba(225,97,30,.14)}
.hero-card .ic svg{width:22px;height:22px;display:block}
.benefit .b-ic{flex-basis:38px;height:38px;background:linear-gradient(135deg,#eaf1f8,#dbe7f2);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(31,78,121,.14)}
.why .w-ic{flex-basis:38px;height:38px;font-size:13px;background:linear-gradient(135deg,#fff1e6,#fde0cc);color:var(--orange-dark);box-shadow:inset 0 0 0 1px rgba(225,97,30,.14)}

/* Trust bar */
.trust{background:var(--ink);color:#fff;background-image:linear-gradient(180deg,#1f2a3a,#161d29)}
.trust .container{display:grid;gap:18px;padding:24px 20px}
@media(min-width:720px){.trust .container{grid-template-columns:repeat(4,1fr);padding:28px 20px}}
.trust .item{display:flex;align-items:center;gap:14px}
.trust .item+.item{position:relative}
@media(min-width:720px){.trust .item+.item::before{content:'';position:absolute;left:-9px;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.10)}}
.trust .num{font-size:26px;font-weight:800;color:#f6a56a;white-space:nowrap;letter-spacing:-.02em}
.trust .label{font-size:13.5px;color:#c2cad6;line-height:1.5}

/* Card grid (tổng quan dịch vụ) */
.cards{display:grid;gap:20px}
@media(min-width:780px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);
  height:100%;box-shadow:var(--sh-xs);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.card .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-dark);background:var(--brand-soft);padding:5px 11px;border-radius:var(--r-pill);margin-bottom:12px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);margin:0}
.card ul{margin-top:12px;color:#3b4252;padding-left:0;list-style:none}
.card li{margin:7px 0;padding-left:24px;position:relative}
.card li::before{content:'';position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}

/* Service detail */
.svc-grid{display:grid;gap:20px}
@media(min-width:880px){.svc-grid{grid-template-columns:1fr 1fr}}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-xs)}
.svc h3{font-size:21px;color:var(--blue-dark);margin-bottom:4px}
.svc .sub{color:var(--muted);font-size:14.5px;margin:0 0 var(--sp-3)}
.svc h4{font-size:15.5px;margin:16px 0 6px;color:var(--orange-dark)}
.svc ul{color:#3b4252}
.svc li{margin:4px 0}
.note{margin-top:var(--sp-3);background:var(--brand-soft);border-left:3px solid var(--orange);padding:11px 15px;border-radius:0 var(--r-sm) var(--r-sm) 0;color:#8a3a12;font-size:14.5px}

/* Benefit */
.benefit-grid{display:grid;gap:16px}
@media(min-width:760px){.benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.benefit-grid{grid-template-columns:repeat(3,1fr)}}
.benefit{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh-xs);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.benefit:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.benefit p{margin:0;color:#3b4252}

/* Pricing */
.price-grid{display:grid;gap:20px}
@media(min-width:880px){.price-grid{grid-template-columns:repeat(3,1fr)}}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-6);display:flex;flex-direction:column;box-shadow:var(--sh-xs);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.price:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.price.featured{border:1.5px solid var(--orange);box-shadow:var(--sh-lg);position:relative}
.price.featured:hover{box-shadow:0 22px 50px rgba(225,97,30,.18)}
.price .ribbon{position:absolute;top:-13px;left:24px;background:var(--orange);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;padding:6px 14px;border-radius:var(--r-pill);box-shadow:var(--sh-brand)}
.price h3{font-size:20px;margin-bottom:4px}
.price .who{color:var(--muted);font-size:14px;margin:0 0 var(--sp-4)}
.price ul{color:#3b4252;margin-bottom:var(--sp-4);padding-left:0;list-style:none}
.price li{margin:9px 0;padding-left:30px;position:relative}
.price li::before{
  content:'';position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:var(--r-pill);
  background:var(--brand-soft) no-repeat center;background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bd4d12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.price .cta-row{margin-top:auto}
.price .cta-row .btn{width:100%}
.price .ref{font-size:13px;color:var(--muted);margin-top:12px}

/* Tables */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:14.5px;box-shadow:var(--sh-xs)}
.tbl th,.tbl td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:var(--bg-alt);color:var(--blue-dark);font-weight:700;letter-spacing:.01em}
.tbl tbody tr:nth-child(even){background:#fcfcfe}
.tbl tbody tr:hover{background:var(--brand-soft)}
.tbl tr:last-child td{border-bottom:0}

/* Factors */
.factors{display:grid;gap:8px;margin-top:8px}
@media(min-width:760px){.factors{grid-template-columns:1fr 1fr}}
.factors li{margin:3px 0;color:#3b4252}

/* Steps */
.steps{display:grid;gap:18px;counter-reset:step}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.steps{grid-template-columns:repeat(4,1fr)}}
.step-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;position:relative;box-shadow:var(--sh-xs);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.step-card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.step-card .n{counter-increment:step;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:12px;box-shadow:var(--sh-brand)}
.step-card .n::before{content:counter(step)}
.step-card h3{font-size:16.5px;margin-bottom:5px}
.step-card p{margin:0;color:var(--muted);font-size:14.5px}

/* Why */
.why-grid{display:grid;gap:16px}
@media(min-width:760px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--sh-xs);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.why:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.why p{margin:0;color:#3b4252}
.why strong{color:var(--ink)}

/* Commit */
.commit-grid{display:grid;gap:16px}
@media(min-width:760px){.commit-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.commit-grid{grid-template-columns:repeat(3,1fr)}}
.commit{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 18px;box-shadow:var(--sh-xs)}
.commit p{margin:0;color:#3b4252}

/* FAQ */
.faq{max-width:840px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:4px 18px;box-shadow:var(--sh-xs);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.faq-item:hover{border-color:var(--line-strong)}
.faq-item:has(details[open]){border-color:var(--orange);box-shadow:var(--sh-sm)}
.faq-item details summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:14px 0}
.faq-item details summary::-webkit-details-marker{display:none}
.faq-item details summary::after{content:'+';flex:0 0 22px;height:22px;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--orange-dark);display:grid;place-items:center;font-weight:800;font-size:17px;line-height:1;transition:transform var(--dur) var(--ease)}
.faq-item details[open] summary::after{content:'\2013';transform:rotate(180deg)}
.faq-item details p{margin:0 0 14px;color:#3b4252}

/* CTA banner */
.cta-banner{
  background:
    radial-gradient(600px 200px at 90% 0%,rgba(255,255,255,.16),transparent 60%),
    linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);
  color:#fff;border-radius:var(--r-xl);padding:var(--sp-10);box-shadow:var(--sh-brand);
}
@media(min-width:760px){.cta-banner{padding:var(--sp-12)}}
.cta-banner h2{color:#fff;font-size:clamp(24px,3vw,31px)}
.cta-banner p{color:#ffedd5;max-width:62ch;margin-top:var(--sp-3)}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-5)}

/* Contact */
.contact-grid{display:grid;gap:24px}
@media(min-width:880px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-info{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-xs)}
.contact-info h3{font-size:20px;margin-bottom:6px}
.contact-info .ci{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.contact-info .ci:last-child{border-bottom:0}
.contact-info .ci .l{font-weight:700;min-width:130px;color:var(--muted)}
.contact-info .ci a:hover{color:var(--orange-dark)}
.map-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-height:340px;background:#eef1f6;box-shadow:var(--sh-xs)}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* Footer */
footer.site{background:#0f1826;color:#c2cad6;padding:var(--sp-16) 0 var(--sp-6)}
.footer-grid{display:grid;gap:28px}
@media(min-width:860px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
footer h4{color:#fff;font-size:15px;letter-spacing:.01em;margin-bottom:14px}
footer .footer-text{color:#9aa4b3;font-size:14px;margin-bottom:8px}
footer a{color:#c2cad6}
footer a:hover{color:#f6a56a}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14.5px}
.footer-bottom{margin-top:var(--sp-8);padding-top:20px;border-top:1px solid #1f2a3a;font-size:13.5px;color:#8792a3;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.disclaimer{background:#0c1420;border:1px solid #1f2a3a;border-radius:var(--r-md);padding:15px 18px;color:#8792a3;font-size:13.5px;margin-top:20px;line-height:1.6}

/* Supplement block */
.supplement{background:var(--brand-soft);border:1px solid #f6cba3;border-radius:var(--r-lg);padding:22px}
.supplement h3{color:var(--orange-dark);font-size:18px;margin-bottom:6px}
.supplement ul{color:#8a3a12}
.supplement li{margin:5px 0}

/* Skip link */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;background:#fff;padding:11px 16px;border-radius:var(--r-sm);border:1.5px solid var(--orange);z-index:100;box-shadow:var(--sh-md)}

/* Forms */
.form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-sm)}
.form-grid{display:grid;gap:16px}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.full{grid-column:1 / -1}
.form-field label{font-weight:600;font-size:14px;color:#3b4252}
.form-field input,.form-field select,.form-field textarea{
  padding:12px 13px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  font:inherit;background:#fff;color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.form-field input::placeholder,.form-field textarea::placeholder{color:#9aa1af}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--brand-ring);
}
.form-field textarea{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:var(--muted)}
#form-status{display:none;margin-top:12px;padding:11px 14px;border-radius:var(--r-sm);background:var(--blue-soft);font-weight:600}

/* Nav toggle (mobile) */
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;background:transparent;border:0;cursor:pointer;padding:9px;border-radius:var(--r-sm);transition:background var(--dur) var(--ease)}
.nav-toggle:hover{background:var(--bg-alt)}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:3px 0;border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav-toggle[aria-expanded='true'] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded='true'] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded='true'] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:879px){
  .nav-links{position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 20px;display:none;box-shadow:var(--sh-md)}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  .nav-links a:last-child{border-bottom:0}
  .nav-toggle{display:inline-flex}
  .nav-cta{display:none}
}
@media(min-width:880px){.nav-toggle{display:none}}

/* Breadcrumb */
.breadcrumb{font-size:14px;color:var(--muted);padding:16px 0}
.breadcrumb a{color:var(--orange-dark);font-weight:600}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{margin:0 8px;color:var(--line-strong)}

/* Floating contact buttons */
.float-zalo{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:12px}
.float-zalo a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--sh-md);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.float-zalo a:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--sh-lg)}
.float-zalo .zalo-btn{background:#0068ff;color:#fff}
.float-zalo .call-btn{background:var(--orange);color:#fff}
.float-zalo .top-btn{background:#fff;color:var(--ink);border:1px solid var(--line)}
.float-zalo svg{width:26px;height:26px;display:block}
.float-zalo .top-btn svg{width:20px;height:20px}
@media(max-width:560px){.float-zalo{right:12px;bottom:12px}.float-zalo a{width:50px;height:50px}.float-zalo svg{width:23px;height:23px}}

/* Zalo QR card */
.zalo-qr-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;text-align:center;max-width:280px;margin:0 auto;box-shadow:var(--sh-sm)}
.zalo-qr-card h3{font-size:17px;margin:0 0 6px;color:#0068ff}
.zalo-qr-card .qr-img{width:200px;height:200px;margin:10px auto;border-radius:var(--r-md);border:1px solid var(--line);display:block}
.zalo-qr-card .qr-note{color:var(--muted);font-size:13.5px;margin:8px 0 14px}
.zalo-qr-card .zalo-cta{display:inline-flex;align-items:center;gap:8px;background:#0068ff;color:#fff;font-weight:700;padding:11px 18px;border-radius:var(--r-sm);text-decoration:none;transition:background var(--dur) var(--ease)}
.zalo-qr-card .zalo-cta:hover{background:#0052cc}
.zalo-qr-card .zalo-cta svg{width:18px;height:18px;fill:currentColor}
.zalo-qr-wrap{display:grid;gap:24px;align-items:start}
@media(min-width:680px){.zalo-qr-wrap{grid-template-columns:1fr 280px}}

/* Enhanced Zalo floating widget */
.float-zalo .zalo-btn{position:relative}
.float-zalo .zalo-btn::before{content:'';position:absolute;inset:0;border-radius:50%;background:#0068ff;opacity:.6;animation:zaloPulse 2.4s ease-out infinite;z-index:-1}
@keyframes zaloPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
.float-zalo .zalo-btn .zalo-label{position:absolute;right:64px;top:50%;transform:translateY(-50%);background:#0068ff;color:#fff;font-size:13px;font-weight:700;padding:7px 12px;border-radius:var(--r-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);box-shadow:0 6px 16px rgba(0,104,255,.35)}
.float-zalo .zalo-btn .zalo-label::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:#0068ff}
.float-zalo .zalo-btn:hover .zalo-label{opacity:1}
.float-zalo .call-btn .call-label{position:absolute;right:64px;top:50%;transform:translateY(-50%);background:var(--orange);color:#fff;font-size:13px;font-weight:700;padding:7px 12px;border-radius:var(--r-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);box-shadow:0 6px 16px rgba(225,97,30,.35)}
.float-zalo .call-btn .call-label::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--orange)}
.float-zalo .call-btn:hover .call-label{opacity:1}
@media(max-width:560px){.float-zalo .zalo-btn .zalo-label,.float-zalo .call-btn .call-label{display:none}}

/* Multi-QR grid */
.qr-grid{display:grid;gap:14px;grid-template-columns:1fr;max-width:480px;margin:14px auto 0}
@media(min-width:560px){.qr-grid{grid-template-columns:repeat(3,1fr)}}
.qr-mini{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 10px;text-align:center;box-shadow:var(--sh-xs)}
.qr-mini .qr-img{width:120px;height:120px;border-radius:10px;border:1px solid var(--line);display:block;margin:0 auto 8px}
.qr-mini .qr-tag{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);margin-bottom:6px}
.qr-mini.zalo .qr-tag{background:#e6f0ff;color:#0068ff}
.qr-mini.call .qr-tag{background:var(--brand-soft);color:var(--orange-dark)}
.qr-mini .qr-name{font-weight:700;font-size:14px;margin:0 0 2px}
.qr-mini .qr-num{font-size:12.5px;color:var(--muted);margin:0}

/* ---------- 5. Motion: scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay='1']{transition-delay:.06s}
.reveal[data-delay='2']{transition-delay:.12s}
.reveal[data-delay='3']{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.price:hover,.benefit:hover,.why:hover,.step-card:hover,.float-zalo a:hover{transform:none}
  .float-zalo .zalo-btn::before{animation:none}
}