:root{
    /* BRAND - BLUE primary #124fb5, ORANGE secondary #ff711b */
    --teal:#124fb5;
    --teal-dark:#0d3f92;
    --teal-light:#DDE6F5;
    --teal-soft:#F2F6FC;
    --orange:#ff711b;
    --orange-dark:#e55e0e;
    --orange-light:#FFE0CC;
    --orange-soft:#FFF2E8;
    /* NEUTRAL */
    --text:#1F2937;
    --muted:#6B7280;
    --line:#E5E7EB;
    --bg:#F8F5F2;
    --white:#fff;
    --warn:#B45309;
    --success:#15803D;
    --danger:#B91C1C;
    --shadow:0 10px 28px rgba(18,79,181,.10);
    --shadow-lg:0 18px 40px rgba(0,0,0,.08);
    --radius:18px;
    --radius-sm:12px;
    --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Be Vietnam Pro','Segoe UI',Roboto,Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'kern' 1,'liga' 1;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
/* Sticky header cao ~80px → offset scroll-margin để target [id] không bị che */
section[id],div[id]{scroll-margin-top:90px}
@media(max-width:640px){section[id],div[id]{scroll-margin-top:70px}}
.container{width:min(var(--max),calc(100% - 32px));margin:0 auto}
.section{padding:64px 0}
.section-soft{background:var(--teal-soft)}
.section-orange{background:var(--orange-soft)}
.section-dark{background:var(--teal);color:#F4F4F4}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#D6E1F0}

/* HEADER — 1 dòng: logo TRÁI + nút cuộc gọi PHẢI (cam nổi bật, sticky) */
.lp-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:14px 0;
    position:sticky;
    top:0;
    z-index:50;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.lp-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-logo{display:inline-flex;align-items:center}
.lp-logo img{height:52px;width:auto;display:block}

/* Nút cuộc gọi — pill cam đậm, có icon trong vòng tròn + label nhỏ + số to */
.lp-header-phone{
    display:inline-flex;align-items:center;gap:12px;
    padding:10px 22px 10px 12px;
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    color:#fff;
    border-radius:999px;
    text-decoration:none;
    box-shadow:0 6px 16px rgba(255,113,27,.35);
    transition:transform .2s ease, box-shadow .2s ease;
    line-height:1;
}
.lp-header-phone:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(255,113,27,.45);
}
.lp-header-phone .lp-phone-icon{
    position:relative;
    width:38px;height:38px;flex-shrink:0;
    background:rgba(255,255,255,.22);
    border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;
}
.lp-header-phone .lp-phone-icon svg{width:18px;height:18px;fill:currentColor}
/* Pulse ring — vòng sáng nhỏ phát ra từ icon, thu hút mắt */
.lp-header-phone .lp-phone-icon::before{
    content:"";
    position:absolute;inset:0;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.6);
    animation:lp-phone-pulse 1.8s ease-out infinite;
}
@keyframes lp-phone-pulse{
    0%{transform:scale(1);opacity:.9}
    100%{transform:scale(1.55);opacity:0}
}
.lp-header-phone .lp-phone-text{display:flex;flex-direction:column;gap:4px}
.lp-header-phone .lp-phone-label{
    font-size:10.5px;font-weight:700;letter-spacing:1px;
    text-transform:uppercase;opacity:.92;line-height:1;
}
.lp-header-phone strong{
    font-size:18px;font-weight:700;letter-spacing:.3px;line-height:1;
}

@media(max-width:640px){
    .lp-header{padding:10px 0}
    .lp-logo img{height:40px}
    .lp-header-phone{padding:8px 16px 8px 8px;gap:9px}
    .lp-header-phone .lp-phone-icon{width:30px;height:30px}
    .lp-header-phone .lp-phone-icon svg{width:14px;height:14px}
    .lp-header-phone .lp-phone-label{display:none}
    .lp-header-phone strong{font-size:14.5px}
}

/* PRE-HEADLINE BAR */
.prebar{background:var(--teal);color:#fff;text-align:center;padding:10px 16px;font-size:14px;font-weight:600;letter-spacing:.2px}
.prebar strong{font-weight:700;text-transform:uppercase;color:#FFE0CC}

/* HERO */
.hero{padding:32px 0 56px;background:linear-gradient(135deg,#F2F6FC 0%,#fff 50%,#FFF2E8 100%);position:relative}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.eyebrow{display:inline-block;padding:8px 14px;background:var(--teal-light);color:var(--teal);border-radius:999px;font-size:13px;font-weight:700;margin-bottom:14px;letter-spacing:.3px;text-transform:uppercase}
h1{font-size:44px;line-height:1.18;margin:0 0 16px;letter-spacing:-.2px;color:var(--teal)}
h1 .hl{color:var(--orange)}
h2{font-size:32px;line-height:1.25;margin:0 0 14px;color:var(--teal)}
h3{font-size:20px;line-height:1.35;margin:0 0 10px;color:var(--text)}
p.lead{font-size:18px;color:#3F3F3F;margin:0 0 22px}
.hero-points{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.hero-points li{padding:8px 14px;background:#fff;border:1px solid var(--teal-light);border-radius:999px;font-size:13px;color:var(--teal-dark);font-weight:600}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;font-weight:700;font-size:15px;transition:.2s ease;cursor:pointer;border:none;font-family:inherit;letter-spacing:.2px;text-align:center}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(255,113,27,.35)}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-1px)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(18,79,181,.30)}
.btn-teal:hover{background:var(--teal-dark)}
.btn-outline{border:2px solid var(--teal);color:var(--teal);background:#fff}
.btn-outline:hover{background:var(--teal-light)}
.btn-outline-orange{border:2px solid var(--orange);color:var(--orange);background:#fff}
.btn-outline-orange:hover{background:var(--orange-soft)}
.btn-white{background:#fff;color:var(--orange);font-weight:700}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-block{width:100%}
.micro-cta{display:block;font-size:13px;color:var(--muted);margin-top:8px;font-style:italic}

.hero-card{background:#fff;border:1px solid var(--teal-light);border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden}
.hero-image-wrap{aspect-ratio:4/3;background:linear-gradient(135deg,#DDE6F5,#FFE0CC)}
.hero-body{padding:22px}

/* IMG PLACEHOLDER */
.img-ph{width:100%;height:100%;background:repeating-linear-gradient(45deg,#FFF2E8 0 10px,#F2F6FC 10px 20px);border:2px dashed var(--teal-light);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--teal-dark);padding:18px;font-weight:700;font-size:14px;line-height:1.45;border-radius:inherit}
.img-ph .ph-tag{display:inline-block;background:var(--teal);color:#fff;padding:3px 10px;border-radius:6px;font-size:11px;letter-spacing:.5px;margin-bottom:8px;font-weight:700}
.img-ph .ph-spec{font-size:12px;font-weight:500;color:var(--muted);margin-top:6px;line-height:1.4}

.img-square{aspect-ratio:1/1}
.img-43{aspect-ratio:4/3}
.img-32{aspect-ratio:3/2}
.img-169{aspect-ratio:16/9}

/* TRUST GRID */
/* TRUST GRID — 4 mini card có depth, gradient cam cho con số, animated top-bar khi hover */
.trust-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
    margin-top:40px;padding-top:0;border-top:none;
}
.trust-item{
    position:relative;
    text-align:center;
    padding:28px 18px 22px;
    background:#fff;
    border:1px solid var(--teal-light);
    border-radius:var(--radius);
    box-shadow:0 4px 14px rgba(18,79,181,.06);
    overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
}
/* Dải cam mảnh trên cùng — co lại khi idle, kéo dài khi hover */
.trust-item::before{
    content:"";
    position:absolute;top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
    transform:scaleX(.25);transform-origin:left;
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
/* Vòng cam mờ phía sau số — depth nhẹ */
.trust-item::after{
    content:"";
    position:absolute;top:18px;left:50%;
    width:64px;height:64px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,113,27,.12) 0%, transparent 70%);
    transform:translateX(-50%);
    pointer-events:none;
}
.trust-item:hover{
    transform:translateY(-5px);
    border-color:rgba(255,113,27,.3);
    box-shadow:0 16px 32px rgba(18,79,181,.10), 0 4px 14px rgba(255,113,27,.10);
}
.trust-item:hover::before{transform:scaleX(1)}
.trust-num{
    position:relative;
    font-size:44px;font-weight:700;line-height:1;
    margin-bottom:10px;
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--orange); /* fallback */
    letter-spacing:-.5px;
}
.trust-item strong{
    position:relative;
    display:block;color:var(--teal);
    margin-top:8px;font-size:15px;font-weight:700;
    letter-spacing:.2px;
}
.trust-item span{
    position:relative;
    display:block;color:var(--muted);
    font-size:12.5px;margin-top:6px;line-height:1.5;
}

/* CTA BAND */
.cta-band{background:var(--teal);color:#fff;padding:36px 0;text-align:center}
.cta-band h2{color:#fff;margin:0 0 8px;font-size:24px}
.cta-band p{margin:0 0 14px;color:#D6E1F0}
.cta-band .btns{justify-content:center}

/* VIDEO SECTION (YouTube) — gọn ở giữa, max-width 880px */
.azpos-yt-section{
    padding:56px 0;
    background:linear-gradient(135deg, var(--teal-soft) 0%, #fff 60%, var(--orange-soft) 100%);
}
.azpos-yt-container{
    max-width:880px;margin:0 auto;
    border-radius:var(--radius);overflow:hidden;
    box-shadow:0 24px 50px rgba(18,79,181,.18), 0 8px 18px rgba(0,0,0,.06);
    background:#000;
    position:relative;
}
.azpos-yt-wrap{
    position:relative;width:100%;
    aspect-ratio:16 / 9;
}
.azpos-yt-iframe{
    position:absolute;inset:0;
    width:100%;height:100%;
    border:0;display:block;
}
/* Mini badge dưới video — link Zalo Video Call */
.azpos-yt-cta-row{
    display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
    margin-top:24px;
}

/* HEADING */
.heading{text-align:center;max-width:820px;margin:0 auto 36px}
/* Heading-tag — pill nhỏ trên mỗi section, to & nổi bật hơn */
.heading-tag{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13.5px;font-weight:700;letter-spacing:1.6px;
    color:var(--orange);text-transform:uppercase;
    margin-bottom:12px;
    padding:6px 14px;
    background:var(--orange-soft);
    border-radius:999px;
    border:1px solid rgba(255,113,27,.18);
}
.heading-tag::before{
    content:"";width:18px;height:2px;background:var(--orange);border-radius:2px;
}
.heading h2{margin:0 0 8px}
.heading p{font-size:16px;color:var(--muted);margin:0}
.hl{color:var(--orange)}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* CARD */
.card{
    background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
}
.card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(18,79,181,.12), 0 6px 12px rgba(255,113,27,.08);
    border-color:rgba(18,79,181,.18);
}
/* Ảnh trong card: zoom-in nhẹ khi hover card cha */
.card .product-img-wrap,
.card .budget-image,
.card .hero-image-wrap{overflow:hidden}
.card .product-img-wrap > *,
.card .budget-image > *,
.card .hero-image-wrap > *{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .product-img-wrap > *,
.card:hover .budget-image > *,
.card:hover .hero-image-wrap > *{transform:scale(1.04)}

/* Diff item & step item & testi — same lift effect */
.diff,.step,.testi,.method-card{
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
}
.diff:hover,.step:hover,.testi:hover,.method-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(18,79,181,.10);
    border-color:rgba(18,79,181,.18);
}

/* Button shimmer — quét sáng khi hover */
.btn-primary,.btn-teal{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.btn-teal::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform:translateX(-100%);
    transition:transform .8s ease;
    pointer-events:none;
}
.btn-primary:hover::after,.btn-teal:hover::after{transform:translateX(100%)}

/* FAQ details — animate icon xoay khi mở */
details summary::after{transition:transform .25s ease}
details[open] summary::after{transform:translateY(-50%) rotate(180deg)}

/* SCROLL REVEAL — element ẩn → fade-in + slide-up khi vào viewport.
   Dùng [data-reveal] trên element. Add .is-visible bằng JS bên dưới. */
[data-reveal]{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
    will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
/* Stagger delay — set bằng style="--rd:Nms" trên element con */
[data-reveal]{transition-delay:var(--rd, 0ms)}
/* Tôn trọng user prefers-reduced-motion → tắt animation */
@media (prefers-reduced-motion: reduce){
    [data-reveal]{opacity:1;transform:none;transition:none}
    .lp-header-phone .lp-phone-icon::before{animation:none}
    .card,.diff,.step,.testi,.method-card{transition:none}
}

/* PAIN CARD */
.pain-card{padding:22px}
.pain-icon{font-size:28px;display:block;margin-bottom:10px}
.pain-card h3{font-size:16px;color:var(--teal);margin-bottom:8px;line-height:1.35}
.pain-card p{font-size:14px;color:#3F3F3F;margin:0}

/* METHOD */
.method-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.method-card{padding:24px;background:linear-gradient(180deg,#fff 0%,var(--teal-soft) 100%);border:1px solid var(--teal-light);border-radius:var(--radius);position:relative}
.method-num{font-size:54px;font-weight:700;color:var(--orange);line-height:1;margin-bottom:8px;opacity:.85}
.method-card h3{color:var(--teal);font-size:18px;margin-bottom:6px}
.method-card p{font-size:14px;color:#3F3F3F;margin:0}

/* DIFFERENTIATORS */
.diff-list{display:flex;flex-direction:column;gap:18px;max-width:920px;margin:0 auto}
.diff{display:grid;grid-template-columns:80px 1fr;gap:18px;align-items:start;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.diff-num{font-size:42px;font-weight:700;color:var(--teal);line-height:1}
.diff h3{color:var(--teal);font-size:18px;margin-bottom:6px}
.diff p{font-size:14.5px;color:#3F3F3F;margin:0}

/* PRODUCT CARDS */
.product-card{display:flex;flex-direction:column}
.product-img-wrap{aspect-ratio:4/3;background:linear-gradient(135deg,var(--teal-soft),var(--orange-soft))}
.product-body{padding:18px;display:flex;flex-direction:column;flex:1}
.product-card .product-body h3{color:var(--teal);margin-bottom:8px;font-size:17px}
.product-card .product-body p{font-size:14px;color:#3F3F3F;flex:1;margin-bottom:14px}
.product-card .product-body .btn{align-self:flex-start;padding:10px 18px;font-size:14px}

/* COMBO / BUDGET CARDS */
.budget-card{display:flex;flex-direction:column}
.budget-image{aspect-ratio:16/9;background:linear-gradient(135deg,var(--orange-soft),var(--teal-soft))}
.budget-head{padding:18px 22px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;color:var(--teal)}

/* Budget Price — block giá "Chỉ từ X.XXX.000đ" dưới budget-head */
.budget-price{
    padding:14px 22px 14px;
    margin-top:12px;
    display:flex;align-items:baseline;gap:10px;
    background:linear-gradient(135deg, var(--orange-soft) 0%, #FFF8F2 100%);
    border-top:1px dashed rgba(255,113,27,.25);
    border-bottom:1px dashed rgba(255,113,27,.25);
}
.budget-price-label{
    font-size:12px;font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.8px;
}
.budget-price-value{
    font-size:30px;font-weight:700;line-height:1;
    letter-spacing:-.3px;
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--orange-dark); /* fallback */
}
/* .budget-price-suffix đã bỏ — không còn "đã có VAT" */
.badge{display:inline-block;padding:4px 10px;background:var(--orange);color:#fff;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.badge.gray{background:var(--muted)}
.budget-body{padding:14px 22px 22px}
.budget-body p{margin:0 0 10px;font-size:14px;color:#3F3F3F}
.budget-body ul{margin:12px 0 0;padding-left:18px}
.budget-body li{margin-bottom:8px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.combo-2{outline:2px solid var(--orange);position:relative}
.budget-cta{background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;min-height:340px}
.combo-cta-body h3{color:#fff}
.combo-cta-body p{color:#FFE5D5}
.combo-cta-body p:not(:last-of-type){margin-bottom:14px}

/* WORKSHOP STRIP */
.workshop-strip{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;background:var(--teal-soft);border:1px solid var(--teal-light);border-radius:var(--radius);padding:32px;margin-top:8px}
.workshop-strip-text h2{color:var(--teal);margin:0 0 10px;font-size:26px}
.workshop-strip-text p{font-size:15px;color:#3F3F3F;margin:0 0 14px}
.workshop-strip-img{aspect-ratio:4/3;background:linear-gradient(135deg,var(--teal-light),var(--orange-light));border-radius:var(--radius-sm);overflow:hidden}

/* TESTIMONIALS */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column}
.testi-text{font-size:14.5px;color:#3F3F3F;margin:0 0 16px;font-style:italic;flex:1}
.testi-meta{display:flex;align-items:center;gap:12px}
.testi-avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--teal-soft)}
.testi-avatar-ph{border:1px dashed var(--teal-light);font-size:9px;padding:4px;border-radius:50%}
.testi-name{font-weight:700;color:var(--teal);font-size:14px}
.testi-role{font-size:12px;color:var(--muted)}

/* LOGO GRID */
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:center}
.logo-item{padding:14px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:700;color:var(--teal);font-size:13px;letter-spacing:.3px}
.logo-item.is-extra{background:var(--teal-soft);color:var(--muted);font-style:italic}

/* WHO */
.who{display:flex;justify-content:center}
.who-card{flex:1;max-width:920px;padding:30px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
.who-good{border-top:4px solid var(--success)}
.who-good h3{color:var(--success)}
.who-card h3{margin:0 0 14px;font-size:18px}
.who-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px}
.who-card li{font-size:14.5px;color:#3F3F3F;line-height:1.6}
.who-card em{color:var(--orange);font-style:normal;font-weight:700}
.who-cta{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
/* Step card — flex column để time chip luôn dính đáy, layout 5 card đều nhau */
.step{
    display:flex;flex-direction:column;align-items:center;
    padding:26px 16px 20px;
    text-align:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    position:relative;
}
.step-num{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;font-size:18px;
    margin-bottom:14px;
    box-shadow:0 6px 14px rgba(255,113,27,.30);
}
.step h3{font-size:15px;margin:0 0 8px;color:var(--teal);line-height:1.35;min-height:2.7em}
.step p{font-size:13px;color:#3F3F3F;margin:0 0 14px;line-height:1.55}
.step-time{
    display:inline-block;
    margin-top:auto; /* đẩy chip thời gian xuống đáy card → 5 card đều nhau */
    font-size:11.5px;font-weight:700;letter-spacing:.2px;
    color:var(--orange);
    background:var(--orange-soft);
    padding:5px 12px;border-radius:999px;
    border:1px solid rgba(255,113,27,.15);
}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto}
details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0;margin-bottom:10px;transition:.2s ease}
details[open]{border-color:var(--teal);box-shadow:var(--shadow)}
summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--teal);position:relative;list-style:none;font-size:15px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--orange);font-weight:700}
details[open] summary::after{content:'−'}
details > div{padding:0 22px 18px;font-size:14.5px;color:#3F3F3F;line-height:1.7}

/* GUARANTEE */
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.guarantee-seal{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex-shrink:0;box-shadow:var(--shadow-lg)}
.guarantee-seal .big{font-size:44px;font-weight:700;line-height:1;color:var(--orange-light)}
.guarantee-seal .small{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-top:4px;line-height:1.3}
.guarantee h3{color:var(--teal);font-size:22px;margin:0 0 12px}
.guarantee p{margin:0 0 8px;font-size:15px;color:#3F3F3F}

/* FORM */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px;margin:0 auto;align-items:start}
/* Info box — cam pastel nhẹ, text xanh navy đọc dễ, không "đè" lên form trắng kế bên */
.info-box{
    padding:28px 26px;
    background:linear-gradient(135deg, var(--orange-soft) 0%, #FFF1E5 60%, #fff 100%);
    color:var(--text);
    border:1px solid var(--orange-light);
    border-radius:var(--radius);
    box-shadow:0 8px 22px rgba(255,113,27,.10);
    position:relative;
    overflow:hidden;
}
/* Dải cam mảnh trên cùng — accent điểm xuyết */
.info-box::before{
    content:"";
    position:absolute;top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%);
}
.info-box-h2{color:var(--teal);font-size:22px;margin:0 0 16px;line-height:1.3}
.info-box ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.info-box li{font-size:14.5px;color:#3F3F3F;line-height:1.6}
.info-box li::marker{color:var(--orange)}
.info-box li strong{color:var(--teal-dark)}
.info-box-call{
    margin:22px 0 12px;font-weight:700;color:var(--teal);font-size:14.5px;
    padding-top:18px;border-top:1px dashed rgba(255,113,27,.25);
}
.info-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-cta-btn{
    padding:14px;
    background:#fff;
    border:1px solid rgba(255,113,27,.25);
    border-radius:var(--radius-sm);
    text-align:center;
    color:var(--text);
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    box-shadow:0 2px 8px rgba(255,113,27,.06);
}
.info-cta-btn:hover{
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    color:#fff;border-color:var(--orange-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(255,113,27,.30);
}
.info-cta-btn:hover .info-cta-num,
.info-cta-btn:hover .info-cta-label{color:#fff}
.info-cta-btn .info-cta-icon{font-size:22px}
.info-cta-btn .info-cta-label{
    font-size:11px;font-weight:700;letter-spacing:.6px;
    text-transform:uppercase;color:var(--orange-dark);
    transition:color .2s ease;
}
.info-cta-btn .info-cta-num{
    font-size:15px;font-weight:700;color:var(--teal-dark);
    transition:color .2s ease;
}

.form-card{padding:22px 24px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-card-h3{color:var(--teal);margin:0 0 12px;font-size:18px;line-height:1.3}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* Reset <p> tag CF7 chèn quanh mỗi field — đây là nguyên nhân chính làm khoảng cách dọc to */
.form-card p,
.form-grid p,
.field p,
.form-grid > .wpcf7-form-control-wrap{margin:0;padding:0}
.form-grid br{display:none}
/* CF7 form control wrap fill width của .field cha */
.form-grid .wpcf7-form-control-wrap{display:block;width:100%}
/* Validation tip CF7 (đỏ) — ko đẩy layout */
.form-grid .wpcf7-not-valid-tip{font-size:11.5px;margin-top:4px;color:var(--danger)}
.form-grid .wpcf7-response-output{margin:8px 0 0;padding:10px 14px;font-size:13px;border-radius:var(--radius-sm)}
.field{display:flex;flex-direction:column;gap:2px}
.field.full{grid-column:1/-1}
label{font-weight:700;color:var(--text);font-size:13.5px;line-height:1.3;margin:0}
.req{color:var(--danger)}
input[type=text],input[type=tel],input[type=email],textarea,select{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14.5px;font-family:inherit;transition:.15s ease;background:#fff;color:var(--text);line-height:1.3}
input:focus,textarea:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft);outline:none}
textarea{min-height:50px;max-height:120px;resize:vertical;line-height:1.45}
.privacy{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.45}

/* ============================================================
   CF7 PARITY — đảm bảo form CF7 render 100% giống form mẫu static
   ============================================================ */
/* Outer <form class="wpcf7-form"> — CF7 tự gen wrapper, reset margin */
.form-card .wpcf7-form,
.form-card form.wpcf7-form{margin:0;padding:0;border:0;background:transparent;box-shadow:none}

/* CF7 wraps mọi shortcode trong <p> — reset hoàn toàn */
.form-card .wpcf7-form > p,
.form-card .wpcf7-form > div > p{margin:0;padding:0;line-height:inherit}

/* Submit <input type="submit"> — CF7 render `[submit class:btn class:btn-primary class:btn-lg class:btn-block]`
   → kết quả là <input type=submit class="wpcf7-form-control wpcf7-submit btn btn-primary btn-lg btn-block">
   Cần override default browser styling của <input type=submit> để giống <button> */
.form-card input[type="submit"],
.form-card .wpcf7-submit{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:16px 30px;
    border-radius:999px;
    border:none;
    font-weight:700;
    font-size:16px;
    font-family:inherit;
    letter-spacing:.2px;
    text-align:center;
    cursor:pointer;
    transition:.2s ease;
    background:var(--orange);
    color:#fff;
    box-shadow:0 6px 16px rgba(255,113,27,.35);
    line-height:1.2;
    height:auto;
}
.form-card input[type="submit"]:hover,
.form-card .wpcf7-submit:hover{
    background:var(--orange-dark);
    transform:translateY(-1px);
    color:#fff;
}
.form-card input[type="submit"]:focus,
.form-card .wpcf7-submit:focus{
    outline:none;
    box-shadow:0 6px 16px rgba(255,113,27,.35), 0 0 0 3px var(--orange-soft);
}

/* CF7 spinner (rotating loader) — hiện inline cạnh nút submit khi đang gửi */
.form-card .wpcf7-spinner{
    display:inline-block;
    vertical-align:middle;
    margin:0 0 0 8px;
    background-color:rgba(255,113,27,.6);
}

/* CF7 response output (success/error message) — bo + màu nhẹ nhàng */
.form-card .wpcf7 form .wpcf7-response-output,
.form-card .wpcf7-response-output{
    margin:12px 0 0 !important;
    padding:10px 14px !important;
    border-radius:var(--radius-sm) !important;
    font-size:13px;
    line-height:1.45;
    border-width:2px !important;
}
.form-card .wpcf7 form.sent .wpcf7-response-output{
    border-color:var(--success) !important;
    background:rgba(21,128,61,.08);
    color:var(--success);
}
.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.unaccepted .wpcf7-response-output,
.form-card .wpcf7 form.payment-required .wpcf7-response-output{
    border-color:var(--warn) !important;
    background:rgba(180,83,9,.08);
    color:var(--warn);
}
.form-card .wpcf7 form.failed .wpcf7-response-output,
.form-card .wpcf7 form.aborted .wpcf7-response-output{
    border-color:var(--danger) !important;
    background:rgba(185,28,28,.08);
    color:var(--danger);
}

/* CF7 inline validation tip — đỏ, font nhỏ, không đẩy layout */
.form-card .wpcf7-not-valid-tip{
    font-size:11.5px;
    margin-top:4px;
    color:var(--danger);
    font-weight:500;
}

/* CF7 đỏ-hồng outline khi field invalid */
.form-card .wpcf7 .wpcf7-not-valid{
    border-color:var(--danger) !important;
    box-shadow:0 0 0 3px rgba(185,28,28,.08) !important;
}

/* FOOTER — copy 1:1 từ landing-may-tinh-tien-cafe-nha-hang-taifu.html
   (nền sáng + ảnh đệm nhẹ + 2 radial gradient).
   URL ảnh đổi sang content_url() để bám domain (anh đã upload tự host). */
.foot-azpos{
    position:relative;
    color:var(--text);
    padding:56px 0 0;
    font-size:14px;
    border-top:1px solid var(--line);
    background-color:#F8FAFD;
    background-image:
        linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(242,246,252,.94) 55%,rgba(255,255,255,.96) 100%),
        url('<?php echo esc_url( content_url( '/uploads/2026/04/banner-homepage.png' ) ); ?>');
    background-size:auto, cover;
    background-position:center top, center top;
    background-repeat:no-repeat, no-repeat;
    background-attachment:scroll, scroll;
}
.foot-azpos::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(60% 60% at 80% 20%,rgba(255,113,27,.06),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(18,79,181,.06),transparent 70%);
    pointer-events:none;
}
.foot-azpos > *{position:relative}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.2fr 1.1fr;gap:40px;padding-bottom:36px}
.foot-col h4{color:var(--teal);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--orange);display:inline-block}
.foot-logo{margin-bottom:10px;display:inline-block}
.foot-logo img{height:54px;width:auto;display:block}
.foot-tagline{color:var(--orange-dark);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px}
.foot-desc{color:#4B5563;line-height:1.6;margin:0 0 18px}
.foot-hours{color:var(--muted);line-height:1.5;margin:0;font-size:13px}
.foot-hours strong{color:var(--teal-dark)}
.foot-list{list-style:none;padding:0;margin:0}
.foot-list li{padding:10px 0;line-height:1.55;border-bottom:1px solid rgba(18,79,181,.10)}
.foot-list li:last-child{border-bottom:none}
.foot-list strong{color:var(--teal-dark);font-weight:700}
.foot-link-strong{color:var(--teal);font-weight:700;font-size:15px;transition:color .2s ease}
.foot-link-strong:hover{color:var(--orange-dark)}
.foot-list a{color:var(--teal-dark);font-weight:600;transition:color .2s ease}
.foot-list a:hover{color:var(--orange-dark)}
.foot-bottom{background:rgba(18,79,181,.05);border-top:1px solid rgba(18,79,181,.10);padding:18px 0}
.foot-bottom-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.foot-bottom-row strong{color:var(--teal-dark)}
.foot-bottom-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-bottom-links a{color:var(--muted);font-weight:600;transition:color .2s ease}
.foot-bottom-links a:hover{color:var(--orange-dark)}

/* FINAL CTA */
.container-final{max-width:780px;text-align:center}
.container-final h2{color:#fff;margin:0 0 12px}
.final-tagline{font-size:16px;color:#D6E1F0;margin:0 0 22px;line-height:1.7}
.final-tagline strong{color:var(--orange-light)}
.btns-center{justify-content:center}
/* Nút Zalo ở Final CTA — nền Zalo blue, icon thật, cân với nút cam bên cạnh */
.btn-final-zalo{
    background:#0068ff;
    color:#fff;
    border:none;
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 28px;
    box-shadow:0 6px 16px rgba(0,104,255,.35);
    position:relative;overflow:hidden;
}
.btn-final-zalo:hover{
    background:#0054cc;
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,104,255,.45);
}
.btn-final-zalo img{
    width:26px;height:26px;
    object-fit:contain;
    flex-shrink:0;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
/* Shimmer giống .btn-primary */
.btn-final-zalo::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform:translateX(-100%);
    transition:transform .8s ease;
    pointer-events:none;
}
.btn-final-zalo:hover::after{transform:translateX(100%)}
.final-disclaimer{font-size:13px;color:#9FB3D0;margin:32px 0 0;line-height:1.7;font-style:italic;max-width:680px;margin-left:auto;margin-right:auto;padding-top:22px;border-top:1px solid #2A57A8}
.final-disclaimer strong{color:#D6E1F0;font-style:normal}

/* STICKY MOBILE */
.sticky-bottom{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:10px 12px;z-index:99;box-shadow:0 -2px 10px rgba(0,0,0,.05)}
.sticky-bottom .btn{flex:1;padding:12px;font-size:13px}
.sticky-bottom .btn-call{background:var(--teal);color:#fff}
.sticky-bottom .btn-call svg{width:16px;height:16px;fill:currentColor;margin-right:6px}

/* FLOAT BUTTONS */
.float-stack{position:fixed;right:14px;bottom:84px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.float-btn{display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.2px;color:#fff;text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,.18);transition:.2s ease;line-height:1}
.float-btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(0,0,0,.22)}
.float-btn-icon{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.float-btn-icon svg{width:18px;height:18px;fill:currentColor}
.float-btn-phone{background:var(--orange)}
.float-btn-phone:hover{background:var(--orange-dark)}
.float-btn-zalo{background:#0068ff}
.float-btn-zalo:hover{background:#0054cc}

/* RESPONSIVE */
@media(max-width:980px){
    .hero-wrap,.workshop-strip{grid-template-columns:1fr}
    .grid-3,.grid-4,.steps,.method-row,.testimonials{grid-template-columns:1fr 1fr}
    .grid-2{grid-template-columns:1fr}
    .trust-grid{grid-template-columns:repeat(2,1fr)}
    .logo-grid{grid-template-columns:repeat(3,1fr)}
    .form-wrap{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
    h1{font-size:32px}
    h2{font-size:24px}
    p.lead{font-size:16px}
    .section{padding:48px 0}
    .grid-3,.grid-4,.steps,.method-row,.testimonials{grid-template-columns:1fr}
    .logo-grid{grid-template-columns:repeat(2,1fr)}
    .trust-grid{grid-template-columns:1fr 1fr}
    .form-grid{grid-template-columns:1fr}
    .info-cta-grid{grid-template-columns:1fr}
    .guarantee{grid-template-columns:1fr;text-align:center}
    .guarantee-seal{margin:0 auto}
    .diff{grid-template-columns:1fr}
    .diff-num{font-size:32px}
    .foot-grid{grid-template-columns:1fr;gap:28px}
    .sticky-bottom{display:flex;gap:8px}
    body{padding-bottom:70px}
    .float-stack{bottom:80px;gap:8px}
    .float-btn{padding:9px 12px 9px 9px;font-size:12px}
    .float-btn-icon{width:26px;height:26px}
    .float-btn-icon svg{width:15px;height:15px}
    .btns{justify-content:center}
    .btns-center{flex-direction:column;align-items:stretch}
    .container-final{padding:0 8px}
}

/* ===========================================================
   AZPOS IMAGE SLOT — wrapper cho ảnh ACF + nút "Đổi ảnh" (admin)
   ===========================================================*/
.azpos-img-slot{position:relative;width:100%;height:100%}
.azpos-img-slot .azpos-img-real{
    width:100%;height:100%;display:block;
    object-fit:cover;border-radius:inherit;
}
.azpos-img-slot .img-ph{border-radius:inherit}
/* Nút "Đổi ảnh" — chỉ admin nhìn thấy (PHP control hiển thị) */
.azpos-img-slot .azpos-img-edit{
    position:absolute;top:10px;right:10px;
    z-index:5;
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;
    background:rgba(13,63,146,.92);
    color:#fff;border:none;border-radius:999px;
    font:600 12px/1 inherit;letter-spacing:.3px;
    cursor:pointer;
    opacity:0;transform:translateY(-4px);
    transition:opacity .25s ease, transform .25s ease, background .2s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.azpos-img-slot:hover .azpos-img-edit,
.azpos-img-slot:focus-within .azpos-img-edit{
    opacity:1;transform:translateY(0);
}
.azpos-img-slot .azpos-img-edit:hover{background:var(--orange);color:#fff}
.azpos-img-slot .azpos-img-edit:focus{outline:2px solid var(--orange);outline-offset:2px}

/* ===========================================================
   SOFTWARE FEATURES / BENEFITS — Phần mềm Azpos giúp gì
   ===========================================================*/
.features-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.feature-card{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 24px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
    overflow:hidden;
}
.feature-card::before{
    content:"";
    position:absolute;top:0;left:0;width:5px;height:100%;
    background:linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
    transform:scaleY(0);transform-origin:top;
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.feature-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,113,27,.25);
    box-shadow:0 18px 36px rgba(18,79,181,.10), 0 6px 14px rgba(255,113,27,.08);
}
.feature-card:hover::before{transform:scaleY(1)}
.feature-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:56px;height:56px;
    background:linear-gradient(135deg, var(--orange-soft) 0%, #FFE0CC 100%);
    border:1px solid rgba(255,113,27,.18);
    border-radius:16px;
    font-size:28px;
    margin-bottom:16px;
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.feature-card:hover .feature-icon{transform:rotate(-8deg) scale(1.08)}
.feature-card h3{
    font-size:17px;color:var(--teal);
    margin:0 0 10px;line-height:1.35;
}
.feature-card p{
    font-size:14px;color:#4B5563;
    margin:0 0 12px;line-height:1.6;
}
.feature-stat{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;
    background:var(--teal-soft);
    border-radius:999px;
    font-size:12px;font-weight:700;
    color:var(--teal-dark);
    border:1px solid rgba(18,79,181,.12);
}
.feature-stat::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--orange);
}

/* Card "wide" — span full grid, layout horizontal (icon trái + content phải) */
.feature-card.feature-wide{
    grid-column:1 / -1;
    display:flex;align-items:center;gap:24px;
    padding:24px 28px;
    background:linear-gradient(135deg, var(--teal-soft) 0%, #fff 60%, var(--orange-soft) 100%);
    border:1px solid rgba(18,79,181,.12);
}
.feature-card.feature-wide .feature-icon{
    margin-bottom:0;flex-shrink:0;
    width:72px;height:72px;font-size:34px;
    background:linear-gradient(135deg, var(--teal-light) 0%, #fff 100%);
    border:1px solid rgba(18,79,181,.18);
}
.feature-card.feature-wide h3{margin:0 0 6px}
.feature-card.feature-wide p{margin:0 0 10px}
.feature-card.feature-wide .feature-note{
    color:var(--muted);font-weight:600;font-size:13.5px;
}

@media(max-width:980px){
    .features-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
    .features-grid{grid-template-columns:1fr;gap:14px}
    .feature-card{padding:22px 18px}
    .feature-icon{width:48px;height:48px;font-size:24px}
    .feature-card.feature-wide{flex-direction:column;align-items:flex-start;padding:24px 20px}
    .feature-card.feature-wide .feature-icon{margin-bottom:8px}
}

/* ===========================================================
   PROMO SECTION — Ưu đãi tháng + countdown timer
   ===========================================================*/
/* Promo hint banner dưới CTA hero — nổi bật, có gradient cam + glow + arrow */
.promo-hint{
    display:inline-flex;align-items:center;gap:14px;
    margin-top:18px;padding:14px 18px 14px 14px;
    background:linear-gradient(135deg, #FFF1E5 0%, #FFE0CC 100%);
    border:2px solid var(--orange);
    border-radius:14px;
    color:var(--text);
    text-decoration:none;
    box-shadow:0 8px 22px rgba(255,113,27,.20), 0 2px 6px rgba(255,113,27,.10);
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
    max-width:fit-content;
}
.promo-hint::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform:translateX(-100%);
    animation:promo-shimmer 3.5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes promo-shimmer{
    0%,60%{transform:translateX(-100%)}
    80%,100%{transform:translateX(100%)}
}
.promo-hint:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(255,113,27,.32), 0 4px 10px rgba(255,113,27,.15);
}
.promo-hint .promo-hint-icon{
    flex-shrink:0;
    width:42px;height:42px;
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:22px;
    box-shadow:0 4px 12px rgba(255,113,27,.45);
    position:relative;z-index:1;
}
/* Pulse ring giống nút header phone */
.promo-hint .promo-hint-icon::before{
    content:"";position:absolute;inset:0;
    border-radius:50%;
    border:2px solid rgba(255,113,27,.55);
    animation:promo-pulse 2s ease-out infinite;
}
@keyframes promo-pulse{
    0%{transform:scale(1);opacity:.8}
    100%{transform:scale(1.45);opacity:0}
}
.promo-hint-text{display:flex;flex-direction:column;gap:2px;line-height:1.3;position:relative;z-index:1}
.promo-hint-eyebrow{
    font-size:10.5px;font-weight:700;
    letter-spacing:1.4px;text-transform:uppercase;
    color:var(--orange-dark);
}
.promo-hint-line{font-size:14px;font-weight:600;color:var(--text)}
.promo-hint strong{color:var(--orange-dark);font-weight:700}
.promo-hint .promo-hint-arrow{
    font-size:20px;font-weight:700;
    color:var(--orange-dark);
    transition:transform .3s ease;
    position:relative;z-index:1;
}
.promo-hint:hover .promo-hint-arrow{transform:translateX(4px)}

@media(max-width:640px){
    .promo-hint{padding:12px 14px;gap:10px}
    .promo-hint .promo-hint-icon{width:36px;height:36px;font-size:18px}
    .promo-hint-line{font-size:13px}
    .promo-hint .promo-hint-arrow{font-size:18px}
}

/* Section ưu đãi big sau combo */
.promo-section{
    background:linear-gradient(135deg, var(--orange-soft) 0%, #fff 50%, var(--teal-soft) 100%);
    padding:64px 0;
    position:relative;
    overflow:hidden;
}
.promo-section::before{
    content:"";
    position:absolute;top:-100px;right:-100px;
    width:300px;height:300px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,113,27,.08) 0%, transparent 70%);
    pointer-events:none;
}
.promo-card{
    position:relative;
    max-width:920px;margin:0 auto;
    text-align:center;
    background:#fff;
    border:2px solid rgba(255,113,27,.18);
    border-radius:24px;
    padding:48px 40px;
    box-shadow:0 24px 50px rgba(255,113,27,.12), 0 8px 18px rgba(18,79,181,.06);
}
.promo-card::before{
    content:"";
    position:absolute;top:0;left:0;right:0;
    height:5px;
    border-radius:24px 24px 0 0;
    background:linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 50%, var(--teal) 100%);
}
.promo-badge{
    display:inline-block;
    padding:8px 22px;
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    color:#fff;
    font-weight:700;font-size:13px;letter-spacing:1.5px;
    text-transform:uppercase;
    border-radius:999px;
    margin-bottom:18px;
    box-shadow:0 6px 16px rgba(255,113,27,.30);
}
.promo-card h2{margin:0 0 12px}
.promo-card .promo-sub{color:var(--muted);margin:0 0 32px;font-size:15px;max-width:680px;margin-left:auto;margin-right:auto}

/* 2 gift cards (máy in bill + lắp đặt) */
.gift-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:18px;
    margin-bottom:36px;text-align:left;
}
.gift-card{
    display:flex;gap:16px;align-items:flex-start;
    background:linear-gradient(135deg, var(--orange-soft) 0%, #fff 100%);
    border:1px solid var(--orange-light);
    border-radius:var(--radius);
    padding:22px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.gift-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(255,113,27,.15);
}
.gift-icon{
    flex-shrink:0;
    width:56px;height:56px;
    background:#fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:28px;
    box-shadow:0 6px 14px rgba(255,113,27,.20);
    border:2px solid var(--orange-light);
}
.gift-body{flex:1;min-width:0}
.gift-label{
    font-size:11px;font-weight:700;letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--orange-dark);margin-bottom:4px;
}
.gift-card h3{font-size:17px;color:var(--teal);margin:0 0 6px;line-height:1.3}
.gift-card p{font-size:13px;color:#4B5563;margin:0 0 10px;line-height:1.5}
.gift-value{font-size:13px;color:var(--text)}
.gift-value strong{color:var(--orange-dark);font-weight:700;font-size:16px}

/* Countdown timer */
.countdown-wrap{margin-bottom:30px;text-align:center}
.cd-title{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 18px;
    background:var(--teal-soft);
    border:1px solid rgba(18,79,181,.14);
    border-radius:999px;
    font-size:14px;font-weight:700;
    color:var(--teal-dark);
    letter-spacing:.2px;
    margin-bottom:18px;
}
.cd-title-icon{font-size:16px;line-height:1}
.countdown{
    display:inline-flex;align-items:flex-start;gap:8px;
    flex-wrap:wrap;justify-content:center;
}
.cd-cell{
    display:flex;flex-direction:column;align-items:center;
    background:linear-gradient(180deg, var(--teal-dark) 0%, var(--teal) 100%);
    color:#fff;
    border-radius:14px;
    padding:14px 18px 10px;
    min-width:78px;
    box-shadow:0 8px 18px rgba(18,79,181,.25);
}
.cd-num{
    font-size:34px;font-weight:700;line-height:1;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.5px;
}
.cd-lbl{
    font-size:10px;letter-spacing:1.4px;
    margin-top:6px;
    text-transform:uppercase;opacity:.85;
}
.cd-sep{
    font-size:30px;font-weight:700;color:var(--teal);
    line-height:1;align-self:center;padding:0 2px;
}

.promo-cta-row .btn{margin:0}
.promo-cta-row .micro-cta{margin-top:14px;font-style:normal}
.promo-fineprint{
    margin-top:18px;font-size:12px;color:var(--muted);font-style:italic;
}

@media(max-width:768px){
    .promo-card{padding:36px 22px}
    .gift-grid{grid-template-columns:1fr;gap:12px}
    .cd-cell{min-width:64px;padding:12px 12px 8px}
    .cd-num{font-size:26px}
    .cd-sep{font-size:24px}
    .cd-lbl{font-size:9px;letter-spacing:1px}
}
@media(max-width:420px){
    .countdown{gap:5px}
    .cd-sep{display:none}
    .cd-cell{min-width:58px;padding:10px 8px 7px}
}

/* ===========================================================
   Ẩn các element Flatsome bị "leak" qua wp_footer
   (off-canvas mobile menu, popups, search lightbox, header
   wrapper, sidebar, …) — chúng được Flatsome inject vào
   cuối <body> qua hook wp_footer ngay cả khi mình không
   gọi get_header()/get_footer().
   ===========================================================*/
body.landing-taifu .off-canvas,
body.landing-taifu .mfp-hide,
body.landing-taifu .mobile-sidebar,
body.landing-taifu #main-menu,
body.landing-taifu #cart-popup,
body.landing-taifu #login-form-popup,
body.landing-taifu #search-lightbox,
body.landing-taifu #header,
body.landing-taifu .header,
body.landing-taifu .header-wrapper,
body.landing-taifu #wrapper > .header,
body.landing-taifu .sidebar-menu,
body.landing-taifu .nav-mobile,
body.landing-taifu #footer,
body.landing-taifu .absolute-footer,
body.landing-taifu .header-bottom-nav-mobile,
body.landing-taifu .lightbox-by-click,
body.landing-taifu .mfp-bg,
body.landing-taifu .mfp-wrap{
    display:none !important;
    visibility:hidden !important;
}