/* ============================================================
   TÂN QUÂN AUDIO — landing page
   ============================================================ */
:root{
  --navy:#0a1330;
  --navy-2:#0e1c46;
  --blue:#1d4ed8;
  --blue-2:#2f6fd0;
  --gold:#c9992f;
  --gold-2:#e9c46a;
  --gold-3:#f6e3ae;
  --gold-deep:#8a6416;
  --orange:#f5821f;
  --cream:#fdf8ee;
  --cream-2:#f6ecd8;
  --ink:#16203a;
  --muted:#6a7590;
  --radius:16px;
  --shadow:0 12px 34px rgba(16,26,56,.12);
  --shadow-lg:0 22px 60px rgba(16,26,56,.20);
  --maxw:1180px;
  --gut:20px;
  --mbar:0px;               /* chiều cao thanh hành động mobile */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Khoá trục ngang: không cho cuộn/kéo lệch sang ngang ở mọi bề rộng màn hình */
html,body{
  margin:0;padding:0;width:100%;max-width:100%;
  overflow-x:clip;                 /* cắt tràn ngang, không sinh thanh cuộn */
  overscroll-behavior-x:none;      /* chặn hiệu ứng kéo đàn hồi sang ngang */
}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--mbar);
}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.15}
p{margin:0;text-wrap:pretty}
/* cân dòng: tránh sót 1 chữ lẻ ở dòng cuối (rõ nhất trên mobile) */
.sec-desc,.title-rule .t,.hero-sub,.cta-left h3,.cta-left p,
.why-card h5,.why-card p,.feat-body h5,.feat-body p,.pkg-head p,.pkg-note span,
.step h5,.step p,.banner-text,.proj figcaption b,.cf-item figcaption,
.cta-points span,.contact-info span{text-wrap:balance}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

.wrap{width:min(var(--maxw),calc(100% - var(--gut)*2));margin-inline:auto;position:relative;z-index:2}

/* Khung ảnh chuẩn: luôn phủ kín, không nhảy layout */
.media,.pkg-thumb,.step-img,.proj-media,.feat-img,.cf-item,.pkg-banner{position:relative;overflow:hidden;background:#0b1228}
/* ảnh nằm trên nền sáng: placeholder sáng cho đỡ chớp tối */
.step-img,.feat-img{background:linear-gradient(180deg,#e8eef8,#d5dfee)}
.pkg-thumb img,.step-img img,.proj-media img,.proj-media video,
.feat-img img,.cf-item img,.banner-bg,
.hero-bg img,.split-media img,.why-media img,.contact-media img,.sec-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ============================================================
   NÚT & TIỆN ÍCH
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:14px;
  letter-spacing:.3px;transition:.22s;border:none;cursor:pointer;white-space:nowrap;
}
.btn-gold{background:linear-gradient(135deg,#f3d183,#c9992f 45%,#8a6416);color:#2b1e05;box-shadow:0 8px 22px rgba(160,120,30,.35)}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-dark{background:linear-gradient(135deg,#1c2542,#0a1330);color:#f0d69a;box-shadow:0 8px 22px rgba(10,19,48,.35)}
.btn-dark:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-block{width:100%;font-size:12.5px;letter-spacing:.6px;padding:12px 16px}
.btn .circle{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:#2b1e05;font-size:14px;line-height:1}
.btn-dark .circle{background:#f0d69a}
.arrow{font-size:18px;line-height:1}

.rule{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent);min-width:34px}
.rule.sm{display:inline-block;width:56px;flex:none;vertical-align:middle}
.diamond{width:10px;height:10px;background:var(--gold);transform:rotate(45deg);margin:16px auto 0;opacity:.8}

/* Tiêu đề */
.sec{position:relative;padding:clamp(48px,6vw,76px) 0}
.sec-head{text-align:center;margin-bottom:clamp(24px,3.4vw,38px)}
.sec-head.left{text-align:left}
.title-rule{display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap}
.title-rule.left{justify-content:flex-start}
.title-rule.left .rule{flex:none;width:48px}
.title-rule .t{font-size:clamp(19px,2.7vw,31px);font-weight:800;letter-spacing:.4px}
.title-rule b{color:var(--ink)}
.c-blue{color:var(--blue)}
.c-gold{background:linear-gradient(135deg,#f0cf85,#c9992f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-desc{margin:14px auto 0;max-width:760px;color:var(--muted);font-size:clamp(13px,1.15vw,14.5px);line-height:1.75}
.sec-desc.left{margin-inline:0}
.sec-head.light .title-rule b{color:#fff}
.sec-head.light .sec-desc{color:rgba(255,255,255,.74)}


/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(8,15,38,.55);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);transition:.3s;
}
.site-header.solid{background:rgba(8,15,38,.95);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;gap:22px;height:64px}
.logo{flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 14px;border-radius:999px;color:rgba(255,255,255,.80);font-size:13.5px;font-weight:500;transition:.2s;white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a.active{background:linear-gradient(135deg,#f3d183,#c9992f);color:#221704;font-weight:700}
.header-cta{margin-left:4px}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:clamp(520px,72vh,660px);display:flex;align-items:center;padding:clamp(100px,14vw,120px) 0 clamp(56px,8vw,80px);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(4,8,24,.93) 0%,rgba(4,8,24,.76) 40%,rgba(4,8,24,.28) 72%,rgba(4,8,24,.12) 100%);
}
.hero-inner{display:flex}
.hero-copy{max-width:600px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold-2);font-size:clamp(10px,1vw,11.5px);letter-spacing:2.2px;font-weight:600;margin-bottom:16px}
.eyebrow .dash{width:32px;height:1px;background:var(--gold-2);flex:none}
.hero h1{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(30px,5.2vw,60px);color:#fff;line-height:1.14;letter-spacing:.5px;
  text-shadow:0 4px 26px rgba(0,0,0,.65);
}
.gold-script{font-style:italic;background:linear-gradient(135deg,#f8e6b4,#d9ab45 45%,#b0801f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:16px;color:rgba(255,255,255,.84);font-size:clamp(13.5px,1.3vw,15px);line-height:1.7;max-width:480px}
.hero-chips{display:flex;gap:22px;margin:24px 0 28px;flex-wrap:wrap}
.hero-chips li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.88);font-size:12px;line-height:1.5}
.hero-chips li + li{border-left:1px solid rgba(255,255,255,.2);padding-left:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ICONS */
.ico{
  width:22px;height:22px;flex:none;display:inline-block;background:var(--gold);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.ico-bulb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 21h6v-1H9v1zm3-20a7 7 0 00-4 12.7V16a1 1 0 001 1h6a1 1 0 001-1v-2.3A7 7 0 0012 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 21h6v-1H9v1zm3-20a7 7 0 00-4 12.7V16a1 1 0 001 1h6a1 1 0 001-1v-2.3A7 7 0 0012 1z'/%3E%3C/svg%3E")}
.ico-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1 13l6-6-1.4-1.4L11 12.2 8.4 9.6 7 11l4 4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1 13l6-6-1.4-1.4L11 12.2 8.4 9.6 7 11l4 4z'/%3E%3C/svg%3E")}
.ico-wave{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11h2v2H3v-2zm4-4h2v10H7V7zm4-4h2v18h-2V3zm4 4h2v10h-2V7zm4 4h2v2h-2v-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 11h2v2H3v-2zm4-4h2v10H7V7zm4-4h2v18h-2V3zm4 4h2v10h-2V7zm4 4h2v2h-2v-2z'/%3E%3C/svg%3E")}
.ico-shop{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h16l1 5a3 3 0 01-6 .5A3 3 0 0112 10a3 3 0 01-3-.5A3 3 0 013 9l1-5zm1 8.9V20h6v-5h2v5h6v-7.1a5 5 0 01-4-1 5 5 0 01-6 0 5 5 0 01-4 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h16l1 5a3 3 0 01-6 .5A3 3 0 0112 10a3 3 0 01-3-.5A3 3 0 013 9l1-5zm1 8.9V20h6v-5h2v5h6v-7.1a5 5 0 01-4-1 5 5 0 01-6 0 5 5 0 01-4 1z'/%3E%3C/svg%3E")}
.ico-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3l9 8h-3v10h-5v-6h-2v6H6V11H3l9-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3l9 8h-3v10h-5v-6h-2v6H6V11H3l9-8z'/%3E%3C/svg%3E")}
.ico-thumb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2 10h4v11H2V10zm6 11V10l5-8 1.6 1.2a2 2 0 01.6 2.2L14 10h6a2 2 0 012 2l-2 7a2 2 0 01-2 2H8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2 10h4v11H2V10zm6 11V10l5-8 1.6 1.2a2 2 0 01.6 2.2L14 10h6a2 2 0 012 2l-2 7a2 2 0 01-2 2H8z'/%3E%3C/svg%3E")}
.ico-gem{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6 2h12l4 6-10 14L2 8l4-6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6 2h12l4 6-10 14L2 8l4-6z'/%3E%3C/svg%3E")}
.ico-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3 6.6 7.2.8-5.4 4.9 1.5 7L12 17.8 5.7 21.3l1.5-7L1.8 9.4 9 8.6 12 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3 6.6 7.2.8-5.4 4.9 1.5 7L12 17.8 5.7 21.3l1.5-7L1.8 9.4 9 8.6 12 2z'/%3E%3C/svg%3E")}
.ico-gear{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l2 1.6-1.6 3-2.4-.7-1.7 1-.5 2.4h-3.4l-.5-2.4-1.7-1-2.4.7-1.6-3L9 12l-2-1.6 1.6-3 2.4.7 1.7-1 .5-2.4h3.4l.5 2.4 1.7 1 2.4-.7 1.6 3L21 12z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l2 1.6-1.6 3-2.4-.7-1.7 1-.5 2.4h-3.4l-.5-2.4-1.7-1-2.4.7-1.6-3L9 12l-2-1.6 1.6-3 2.4.7 1.7-1 .5-2.4h3.4l.5 2.4 1.7 1 2.4-.7 1.6 3L21 12z'/%3E%3C/svg%3E")}
.ico-consult{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h16v12H7l-3 3V4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h16v12H7l-3 3V4z'/%3E%3C/svg%3E")}
.ico-tools{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 4l3-2 6 8-2 3L3 7V4zm14-2l4 4-8 10-3-2 7-12zM3 18l7-5 2 3-6 5-3-3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 4l3-2 6 8-2 3L3 7V4zm14-2l4 4-8 10-3-2 7-12zM3 18l7-5 2 3-6 5-3-3z'/%3E%3C/svg%3E")}
.ico-refresh{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 4a8 8 0 018 8h3l-4 5-4-5h3a6 6 0 10-1.8 4.3l1.5 1.5A8 8 0 1112 4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 4a8 8 0 018 8h3l-4 5-4-5h3a6 6 0 10-1.8 4.3l1.5 1.5A8 8 0 1112 4z'/%3E%3C/svg%3E")}
.ico-team{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 11a3 3 0 100-6 3 3 0 000 6zm8 0a3 3 0 100-6 3 3 0 000 6zM2 19c0-3 2.7-5 6-5s6 2 6 5v1H2v-1zm14.5-4.7c2.6.5 4.5 2.3 4.5 4.7v1h-5v-1c0-1.7-.6-3.2-1.6-4.3l2.1-.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 11a3 3 0 100-6 3 3 0 000 6zm8 0a3 3 0 100-6 3 3 0 000 6zM2 19c0-3 2.7-5 6-5s6 2 6 5v1H2v-1zm14.5-4.7c2.6.5 4.5 2.3 4.5 4.7v1h-5v-1c0-1.7-.6-3.2-1.6-4.3l2.1-.4z'/%3E%3C/svg%3E")}
.ico-medal{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 2h10l-3 7h-4L7 2zm5 8a6 6 0 110 12 6 6 0 010-12zm0 3l1.2 2.5 2.8.4-2 2 .5 2.8-2.5-1.3-2.5 1.3.5-2.8-2-2 2.8-.4L12 13z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 2h10l-3 7h-4L7 2zm5 8a6 6 0 110 12 6 6 0 010-12zm0 3l1.2 2.5 2.8.4-2 2 .5 2.8-2.5-1.3-2.5 1.3.5-2.8-2-2 2.8-.4L12 13z'/%3E%3C/svg%3E")}
.ico-headset{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3a8 8 0 00-8 8v6h4v-7H6a6 6 0 1112 0h-2v7h2a2 2 0 01-2 2h-3v2h3a4 4 0 004-4v-6a8 8 0 00-8-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3a8 8 0 00-8 8v6h4v-7H6a6 6 0 1112 0h-2v7h2a2 2 0 01-2 2h-3v2h3a4 4 0 004-4v-6a8 8 0 00-8-8z'/%3E%3C/svg%3E")}
.ico-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 2h3l1.6 4-2 1.4a13 13 0 006 6l1.4-2 4 1.6v3A2 2 0 0118.4 18 16.4 16.4 0 016 5.6 2 2 0 016.6 2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 2h3l1.6 4-2 1.4a13 13 0 006 6l1.4-2 4 1.6v3A2 2 0 0118.4 18 16.4 16.4 0 016 5.6 2 2 0 016.6 2z'/%3E%3C/svg%3E")}
.ico-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm-1 14l7-7-1.4-1.4L11 13.2 8.4 10.6 7 12l4 4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm-1 14l7-7-1.4-1.4L11 13.2 8.4 10.6 7 12l4 4z'/%3E%3C/svg%3E")}
.ico-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z'/%3E%3C/svg%3E")}
.ico-truck{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2 5h11v11H2V5zm12 3h4l3 4v4h-7V8zM6 21a2 2 0 110-4 2 2 0 010 4zm11 0a2 2 0 110-4 2 2 0 010 4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2 5h11v11H2V5zm12 3h4l3 4v4h-7V8zM6 21a2 2 0 110-4 2 2 0 010 4zm11 0a2 2 0 110-4 2 2 0 010 4z'/%3E%3C/svg%3E")}
.ico-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2 5h20v14H2V5zm10 7L3.5 6.5h17L12 12z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2 5h20v14H2V5zm10 7L3.5 6.5h17L12 12z'/%3E%3C/svg%3E")}
.ico-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 4.5A2.5 2.5 0 1012 11a2.5 2.5 0 000-4.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 4.5A2.5 2.5 0 1012 11a2.5 2.5 0 000-4.5z'/%3E%3C/svg%3E")}
.ico-zalo{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3c5.5 0 10 3.6 10 8s-4.5 8-10 8c-1 0-2-.1-2.9-.4L4 21l1.3-3.4C3.2 16.1 2 13.7 2 11c0-4.4 4.5-8 10-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3c5.5 0 10 3.6 10 8s-4.5 8-10 8c-1 0-2-.1-2.9-.4L4 21l1.3-3.4C3.2 16.1 2 13.7 2 11c0-4.4 4.5-8 10-8z'/%3E%3C/svg%3E")}

/* ============================================================
   1. BẢNG GIÁ
   ============================================================ */
.sec-cream{background:linear-gradient(180deg,#fffdf8 0%,#f7eedd 100%)}
.pkg-group{
  background:linear-gradient(180deg,#fffefb,#f8f0df);
  border:1px solid rgba(201,153,47,.30);
  border-radius:22px;padding:clamp(12px,1.4vw,16px);margin-bottom:26px;box-shadow:var(--shadow);
}
.pkg-banner{height:clamp(130px,15vw,160px);border-radius:14px;margin-bottom:14px}
.banner-bg{position:absolute;inset:0}
.banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,14,40,.96) 0%,rgba(6,14,40,.84) 40%,rgba(6,14,40,.22) 74%,rgba(6,14,40,.05) 100%)}
/* ảnh nền sáng: tăng lớp phủ + chút vignette cho ăn nhập với khối chữ */
.banner-light .banner-shade{
  background:
    linear-gradient(90deg,rgba(6,14,40,.95) 0%,rgba(6,14,40,.86) 42%,rgba(6,14,40,.52) 72%,rgba(6,14,40,.34) 100%),
    linear-gradient(180deg,rgba(6,14,40,.30),rgba(6,14,40,0) 45%,rgba(6,14,40,.40));
}
.banner-light .banner-bg{filter:saturate(.92) contrast(1.02)}
.banner-copy{position:relative;z-index:2;display:flex;gap:16px;align-items:center;height:100%;padding:0 clamp(16px,2.4vw,26px)}
.hexo{width:52px;height:58px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#f3d183,#b8862f);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hexo .ico{width:24px;height:24px;background:#231903}
.banner-kicker{color:#fff;font-size:clamp(10px,1.1vw,12.5px);letter-spacing:3px;font-weight:600}
.banner-title{font-size:clamp(21px,3vw,34px);font-weight:800;letter-spacing:1px;margin:2px 0 6px;background:linear-gradient(135deg,#f8e6b4,#d9ab45);-webkit-background-clip:text;background-clip:text;color:transparent}
.banner-text{color:rgba(255,255,255,.76);font-size:12.5px;line-height:1.6;max-width:430px}

.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pkg{position:relative;background:#fff;border:1px solid rgba(201,153,47,.25);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 20px rgba(80,60,20,.07);transition:.25s}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pkg-featured{background:linear-gradient(180deg,#fff9e8,#fdf0cf);border:2px solid var(--gold);box-shadow:0 12px 32px rgba(180,140,40,.22)}
.pkg-dark{background:linear-gradient(180deg,#141c36,#0a1128);border-color:rgba(201,153,47,.35)}
.pkg-dark .pkg-head h4{color:var(--gold-3)}
.pkg-dark .pkg-head p,.pkg-dark .pkg-note span{color:rgba(255,255,255,.65)}
.pkg-head{text-align:center;padding-top:4px}
.pkg-head h4{font-size:15px;font-weight:800;letter-spacing:1.4px;display:flex;align-items:center;justify-content:center;gap:7px}
.pkg-head h4 .ico{width:16px;height:16px;background:var(--gold-2)}
.pkg-featured .pkg-head h4{color:var(--gold-deep)}
.pkg-head p{margin-top:5px;font-size:11px;color:var(--muted);line-height:1.5;min-height:33px}
.pkg-dark .pkg-head p{min-height:33px}
.pkg-thumb{aspect-ratio:4/3;border-radius:12px}
.pkg-thumb img{transition:transform .5s}
.pkg:hover .pkg-thumb img{transform:scale(1.05)}
.pkg-price{position:absolute;left:0;right:0;bottom:0;padding:11px 14px;text-align:center;background:linear-gradient(180deg,rgba(90,64,10,0),rgba(110,78,14,.94));color:#fff;display:flex;align-items:baseline;justify-content:center;gap:5px}
.pkg-price .from{font-size:10px;opacity:.85;position:relative;top:-6px}
.pkg-price strong{font-size:clamp(17px,1.8vw,20px);font-weight:800;letter-spacing:.3px}
.pkg-price .unit{font-size:11px;opacity:.85}
.pkg-price.contact{background:linear-gradient(180deg,rgba(201,153,47,0),rgba(201,153,47,.92))}
.pkg-price.contact strong{font-size:clamp(19px,2vw,22px);font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.pkg-price.contact.dark{background:linear-gradient(180deg,rgba(6,10,26,0),rgba(6,10,26,.92))}
.pkg-note{display:flex;gap:9px;align-items:center;font-size:11.5px;color:#4a5570;line-height:1.5;min-height:34px}
.pkg-note .ico{width:28px;height:28px;background:none;position:relative}
.pkg-note .ico::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7e0a5,#b8862f)}
.pkg-note .ico::after{content:"";position:absolute;inset:7px;background:#3a2a06;-webkit-mask-image:inherit;mask-image:inherit;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ============================================================
   2. MẪU PHÒNG
   ============================================================ */
.sec-dark{background:#060c22;overflow:hidden}
.sec-bg{position:absolute;inset:0;opacity:.45}
.sec-bg-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,22,.94),rgba(4,8,22,.82) 45%,rgba(4,8,22,.97))}
.coverflow{position:relative;display:flex;align-items:center;gap:10px;justify-content:center}
.cf-stage{display:flex;align-items:center;justify-content:center;perspective:1400px;width:100%;height:clamp(230px,26vw,330px)}
.cf-item{
  position:absolute;margin:0;width:clamp(240px,32vw,360px);aspect-ratio:3/2;border-radius:14px;
  transition:transform .5s cubic-bezier(.22,.7,.3,1),opacity .5s;cursor:pointer;
  box-shadow:0 20px 50px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14);
}
.cf-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(180deg,transparent,rgba(5,12,34,.94));color:rgba(255,255,255,.94);font-size:12px;text-align:center;z-index:3;font-weight:500}
.cf-item.is-active{box-shadow:0 26px 70px rgba(0,80,255,.4);border-color:rgba(120,190,255,.5)}
.cf-nav{
  width:40px;height:40px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  backdrop-filter:blur(6px);transition:.2s;z-index:5;
}
.cf-nav:hover{background:rgba(255,255,255,.22)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.dots button{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;padding:0;background:rgba(255,255,255,.3);transition:.2s}
.dots button.on{background:var(--blue-2);width:22px;border-radius:99px}
.sec-cream .dots button{background:rgba(120,110,80,.28)}
.sec-cream .dots button.on{background:var(--blue)}

/* ============================================================
   3. GIẢI PHÁP
   ============================================================ */
.sec-split{background:linear-gradient(180deg,#fffdf8,#f7f0e2);overflow:hidden}
.split-media{position:absolute;right:0;top:0;bottom:0;width:46%}
.split-fade{position:absolute;inset:0;background:linear-gradient(90deg,#fdf9f0 0%,rgba(253,249,240,.72) 24%,transparent 62%)}
.split-inner{position:relative;z-index:3}
.split-copy{max-width:660px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.feat{
  display:flex;gap:12px;background:rgba(255,255,255,.95);border:1px solid rgba(29,78,216,.14);
  border-left:3px solid var(--blue);border-radius:12px;padding:10px;
  box-shadow:0 6px 18px rgba(30,45,90,.09);transition:.22s;
}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feat-wide{grid-column:1 / -1}
.feat-img{width:104px;height:78px;flex:none;border-radius:8px}
.feat-body h5{font-size:12.5px;color:var(--blue);font-weight:700;line-height:1.4}
.feat-body p{margin-top:5px;font-size:11px;color:var(--muted);line-height:1.6}

/* ============================================================
   4. QUY TRÌNH
   ============================================================ */
.sec-light{background:linear-gradient(180deg,#f7f9fd,#eef3fb);overflow:hidden}
.swoosh{position:absolute;left:-5%;right:-5%;height:120px;pointer-events:none}
.swoosh.top{top:-1px;background:linear-gradient(180deg,#fdf9f0,transparent);border-bottom-left-radius:50% 100%;border-bottom-right-radius:50% 100%}
.swoosh.bottom{bottom:-1px;background:linear-gradient(0deg,#fffdf8,transparent)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:10px}
.step{position:relative;background:#fff;border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(25,45,95,.09)}
.step:not(:last-child)::after{content:"›";position:absolute;right:-19px;top:46%;font-size:30px;color:var(--blue-2);font-weight:300;line-height:1}
.step-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;font-weight:800;font-size:14px;box-shadow:0 8px 18px rgba(29,78,216,.35);margin-bottom:14px}
.step h5{font-size:13px;color:var(--navy);font-weight:700}
.step p{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.65;min-height:60px}
.step-img{aspect-ratio:4/3;border-radius:10px;margin-top:12px}
.brand-stamp{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:38px;text-align:center}
.brand-stamp strong{display:block;letter-spacing:5px;font-size:13px;color:var(--navy)}
.brand-stamp em{display:block;font-style:normal;font-size:10.5px;letter-spacing:1.6px;color:var(--muted);margin-top:5px}

/* ============================================================
   5. TẠI SAO
   ============================================================ */
.sec-why{background:linear-gradient(180deg,#fffdf8,#f4f7fd);overflow:hidden;padding-bottom:clamp(54px,7vw,80px)}
.why-media{position:absolute;right:0;top:0;height:60%;width:44%}
.why-fade{position:absolute;inset:0;background:linear-gradient(90deg,#fffdf8 0%,rgba(255,253,248,.78) 22%,transparent 62%),linear-gradient(0deg,#fffdf8,transparent 45%)}
.why-inner{position:relative;z-index:3}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px;max-width:830px}
.why-card{background:#fff;border-radius:14px;padding:18px 16px;box-shadow:0 10px 28px rgba(25,45,95,.10);border:1px solid rgba(29,78,216,.08);transition:.22s}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.why-ico{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#dbe7ff,#b9cffb);margin-bottom:14px}
.why-ico .ico{width:22px;height:22px;background:var(--blue)}
.why-ico .spark{position:absolute;top:-5px;right:-5px;width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#f6dd9f,#c9992f);box-shadow:0 2px 6px rgba(180,140,40,.5)}
.why-card h5{font-size:12.5px;color:var(--navy);font-weight:700;line-height:1.45}
.why-card p{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.65}

.cta-band{
  display:flex;gap:26px;align-items:center;margin-top:32px;
  background:linear-gradient(120deg,#ecf2ff 0%,#dbe7fb 55%,#e9f0ff 100%);
  border:1px solid rgba(29,78,216,.18);border-radius:20px;padding:clamp(18px,2.4vw,28px);
  box-shadow:0 14px 40px rgba(25,45,95,.12);
}
.cta-left{flex:1}
.cta-left h3{font-size:clamp(17px,2.3vw,25px);color:var(--blue);font-weight:800;line-height:1.35}
.cta-left p{margin-top:12px;font-size:12.5px;color:#41547e;line-height:1.75;max-width:520px}
.cta-right{width:330px;flex:none}
.cta-badge{display:flex;gap:11px;align-items:center;background:linear-gradient(135deg,#1d4ed8,#0f2f8f);border-radius:14px;padding:12px 16px;color:#fff}
.cta-badge .ico{width:26px;height:26px;background:var(--gold-2)}
.cta-badge strong{display:block;font-size:12px;letter-spacing:1px;color:var(--gold-2)}
.cta-badge span{display:block;font-size:10.5px;opacity:.78;margin-top:3px}
.hotline-pill{display:flex;align-items:center;gap:14px;margin-top:12px;background:linear-gradient(135deg,#f9ecc4,#d6a83f 55%,#a87c1c);border-radius:999px;padding:9px 22px 9px 9px;box-shadow:0 12px 30px rgba(170,130,35,.4);transition:.22s}
.hotline-pill:hover{transform:translateY(-2px);filter:brightness(1.05)}
.hp-ico{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3a3a3a,#0a0a0a)}
.hp-ico .ico{width:22px;height:22px;background:var(--gold-2)}
.hp-num{font-size:clamp(20px,2.2vw,25px);font-weight:800;color:#2b1e05;letter-spacing:.5px}

.cta-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.cta-points li{display:flex;gap:11px;align-items:flex-start;padding-right:20px}
.cta-points li:not(:last-child){border-right:1px solid rgba(29,78,216,.16)}
.cta-points .ico{width:22px;height:22px;background:var(--blue);margin-top:2px}
.cta-points strong{display:block;font-size:12px;color:var(--blue);font-weight:700}
.cta-points span{display:block;font-size:11px;color:var(--muted);line-height:1.6;margin-top:4px}

/* ============================================================
   6. DỰ ÁN
   ============================================================ */
.filters{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.chip{
  border:1px solid rgba(201,153,47,.45);background:#fffdf7;color:#5b5231;
  padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s;
}
.chip:hover{background:#fdf4e1}
.chip.on{background:linear-gradient(135deg,#f3d183,#c9992f);color:#2b1e05;border-color:transparent;box-shadow:0 6px 16px rgba(170,130,35,.3)}

.proj-carousel{position:relative;display:flex;align-items:center}
.proj-track{
  display:flex;gap:16px;flex:1;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px 10px;
}
.proj-track::-webkit-scrollbar{display:none}
.proj{
  flex:0 0 calc((100% - 32px)/3);margin:0;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 12px 32px rgba(70,55,20,.14);border:1px solid rgba(201,153,47,.2);
  scroll-snap-align:start;transition:.25s;
}
.proj:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.proj[hidden]{display:none}
.proj-media{aspect-ratio:16/10;cursor:pointer}
.proj-media img{transition:transform .5s}
.proj:hover .proj-media img{transform:scale(1.05)}
.proj-media video{cursor:auto;background:#000}
.vbadge{
  position:absolute;top:10px;left:10px;z-index:3;pointer-events:none;
  background:rgba(8,14,34,.78);color:var(--gold-2);font-size:10.5px;font-weight:700;
  letter-spacing:.8px;padding:4px 10px;border-radius:999px;backdrop-filter:blur(4px);
}
.proj figcaption{padding:12px 14px}
.proj figcaption b{display:block;font-size:12.5px;color:var(--navy);font-weight:700;line-height:1.4}
.proj figcaption span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.proj-carousel .cf-nav{position:absolute;top:38%;background:rgba(255,255,255,.94);color:#33405f;border-color:rgba(201,153,47,.4);box-shadow:var(--shadow)}
.proj-carousel .cf-nav.prev{left:-8px}
.proj-carousel .cf-nav.next{right:-8px}
.proj-carousel .cf-nav:hover{background:#fff}

/* ============================================================
   7. LIÊN HỆ
   ============================================================ */
.sec-contact{background:linear-gradient(180deg,#fffdf8 0%,#f5eee0 100%);overflow:hidden;padding-bottom:clamp(58px,8vw,84px)}
.contact-media{position:absolute;right:0;top:0;bottom:0;width:52%}
.contact-media img{border-top-left-radius:180px}
.contact-fade{position:absolute;inset:0;background:linear-gradient(90deg,#fdf9f0 0%,rgba(253,249,240,.94) 14%,rgba(253,249,240,.5) 34%,transparent 64%)}
.contact-inner{position:relative;z-index:3}
.contact-inner > *{max-width:640px}
.coin{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:radial-gradient(circle at 34% 28%,#fbf0cc,#d6a83f 55%,#8a6416);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 6px 14px rgba(150,110,25,.35)}
.coin .ico{width:20px;height:20px;background:#3a2a06}
.coin.sm{width:34px;height:34px;flex:none;margin:0}
.coin.sm .ico{width:15px;height:15px}

.hotline-bar{
  display:flex;align-items:center;gap:16px;margin-top:22px;
  background:linear-gradient(120deg,#1a1408,#3a2c10 35%,#120e05);
  border:1px solid rgba(201,153,47,.5);border-radius:999px;padding:12px 30px 12px 12px;
  box-shadow:0 18px 44px rgba(40,28,5,.35);max-width:440px;transition:.22s;
}
.hotline-bar:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(40,28,5,.45)}
.hb-ico{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,#2e2d2b,#0a0a0a);box-shadow:inset 0 0 0 2px rgba(201,153,47,.55)}
.hb-ico .ico{width:27px;height:27px;background:var(--gold-3)}
.hb-text small{display:flex;align-items:center;gap:10px;font-size:9.5px;letter-spacing:2.4px;color:var(--gold);font-weight:600}
.hb-dots{letter-spacing:1px;opacity:.55}
.hb-text strong{display:block;font-size:clamp(25px,3.4vw,33px);font-weight:800;letter-spacing:1px;margin-top:2px;background:linear-gradient(180deg,#fff8e4,#dcb45c);-webkit-background-clip:text;background-clip:text;color:transparent}

.contact-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.contact-info li{display:flex;gap:10px;align-items:flex-start;padding-right:14px}
.contact-info li:not(:last-child){border-right:1px solid rgba(201,153,47,.3)}
.contact-info b{display:block;font-size:10.5px;letter-spacing:.6px;color:var(--blue);font-weight:700}
.contact-info span{display:block;font-size:10.5px;color:var(--muted);line-height:1.6;margin-top:4px}

/* ============================================================
   FOOTER + NÚT NỔI + THANH MOBILE
   ============================================================ */
.site-footer{background:#070d20;color:rgba(255,255,255,.7);padding:28px 0;text-align:center;font-size:12.5px}
.foot-logo{height:30px;width:auto;margin:0 auto 12px}
.site-footer .small{margin-top:6px;font-size:11px;opacity:.55}

/* Nút tròn nổi góc phải: Zalo + hotline */
.float-actions{
  position:fixed;right:16px;bottom:22px;z-index:75;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end;
}
.fab{
  position:relative;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px rgba(10,19,48,.35);
  animation:fab-pulse 1.6s ease-in-out infinite;
}
.fab .ico{width:26px;height:26px;background:#fff;position:relative;z-index:2}
/* Zalo: xanh dương */
.fab-zalo{background:linear-gradient(135deg,#3b95ff,#0068ff 60%,#0052cc)}
/* Hotline: xanh lá */
.fab-call{background:linear-gradient(135deg,#5ee08a,#16a34a 60%,#15803d);animation-delay:.3s}
/* vòng sóng lan */
.fab::before,.fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  animation:fab-ring 2s cubic-bezier(.2,.6,.4,1) infinite;
}
.fab::after{animation-delay:.9s}
.fab-zalo::before,.fab-zalo::after{background:rgba(0,104,255,.38)}
.fab-call::before,.fab-call::after{background:rgba(22,163,74,.42)}
@keyframes fab-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
/* co giãn to nhỏ */
@keyframes fab-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.fab:hover{filter:brightness(1.08)}
.fab-tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) scale(.9);
  background:#0d1430;color:#f3e6c4;font-size:12.5px;font-weight:700;white-space:nowrap;
  padding:7px 13px;border-radius:8px;opacity:0;pointer-events:none;transition:.2s;
  box-shadow:0 8px 20px rgba(10,19,48,.3);
}
.fab:hover .fab-tip{opacity:1;transform:translateY(-50%) scale(1)}

.mobile-bar{display:none}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(4,8,20,.94);
  display:flex;align-items:center;justify-content:center;padding:60px 56px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb-close{position:absolute;top:14px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-nav.prev{left:12px}
.lb-nav.next{right:12px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:13px;padding:0 20px}

/* Animation vào màn hình */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
[data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv]{opacity:1;transform:none;transition:none}
  .fab,.fab::before,.fab::after{animation:none}
}

/* ============================================================
   TABLET  ≤1024px
   ============================================================ */
@media (max-width:1024px){
  .nav a{padding:8px 11px;font-size:12.5px}
  .pkg-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .pkg{padding:12px}
  .steps{grid-template-columns:1fr 1fr;gap:20px}
  .step:nth-child(2)::after{display:none}
  .why-grid{grid-template-columns:1fr 1fr;max-width:none}
  .feat-grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:stretch}
  .cta-right{width:auto}
  .proj{flex:0 0 calc((100% - 16px)/2)}

  /* nền ảnh chuyển thành lớp mờ phía sau chữ */
  .split-media,.why-media,.contact-media{width:100%;height:100%;top:0;bottom:0;opacity:1}
  .contact-media img{border-top-left-radius:0}
  .split-fade{background:linear-gradient(0deg,rgba(253,249,240,.93),rgba(253,249,240,.93))}
  .why-fade{background:linear-gradient(0deg,rgba(255,253,248,.93),rgba(255,253,248,.93))}
  .contact-fade{background:linear-gradient(0deg,rgba(253,249,240,.93),rgba(253,249,240,.93))}
  .contact-inner > *{max-width:none}
  .contact-inner{max-width:720px}

  /* mẫu phòng: chuyển sang trượt ngang */
  .coverflow{display:block}
  .cf-stage{
    display:flex;height:auto;perspective:none;gap:14px;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;padding:4px 0 10px;
  }
  .cf-stage::-webkit-scrollbar{display:none}
  .cf-item{
    position:relative;flex:0 0 min(78%,380px);width:auto;
    transform:none!important;opacity:1!important;scroll-snap-align:center;
  }
  .coverflow .cf-nav{display:none}
}

/* ============================================================
   MOBILE  ≤760px
   ============================================================ */
@media (max-width:760px){
  :root{--gut:0px;--mbar:62px;--pad:16px;--cardpad:10px}

  /* ---- TRÀN VIỀN: khung chạy hết bề ngang, chỉ chữ mới có lề ---- */
  .wrap{width:100%;max-width:100%}
  .header-inner,.hero-copy,.sec-head,.split-copy,.brand-stamp,
  .cta-points,.contact-inner,.site-footer .wrap,.filters{padding-inline:var(--pad)}
  /* lưới thẻ: lề mỏng cho đầy màn hình */
  .why-grid,.steps{padding-inline:var(--cardpad)}
  /* vùng trượt ngang: chừa lề trong để thấy hé thẻ kế bên */
  .cf-stage,.proj-track{padding-inline:var(--cardpad);scroll-padding-inline:var(--cardpad)}
  /* panel bỏ bo góc & viền hai bên cho liền mạch */
  .pkg-group{border-radius:0;border-left:0;border-right:0;padding:var(--cardpad) var(--cardpad) 14px;margin-bottom:18px}
  .cta-band{border-radius:0;border-left:0;border-right:0}
  .contact-media img{border-top-left-radius:0}
  /* chặn mọi khả năng tạo khe hở hai bên */
  .sec,.hero,.site-footer{width:100%;max-width:100%}

  .nav,.header-cta{display:none}
  .burger{display:block}
  .nav.open{
    display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;
    background:rgba(8,15,38,.98);padding:10px 16px 16px;gap:2px;
    box-shadow:0 20px 40px rgba(0,0,0,.5);max-height:calc(100vh - 64px);overflow:auto;
  }
  .nav.open a{padding:13px 14px;font-size:14.5px;border-radius:10px}
  .logo img{height:26px}

  .hero{min-height:auto;text-align:left}
  .hero-shade{background:linear-gradient(180deg,rgba(4,8,24,.78) 0%,rgba(4,8,24,.58) 45%,rgba(4,8,24,.88) 100%)}
  .hero-chips{gap:12px;margin:20px 0 24px}
  .hero-chips li{flex:1 1 100%}
  .hero-chips li + li{border-left:none;padding-left:0}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}

  .title-rule{gap:10px}
  .title-rule .rule{min-width:24px}
  .sec-desc{font-size:13px}

  .pkg-grid{grid-template-columns:1fr;gap:12px}
  .pkg-head p,.pkg-note{min-height:0}
  .banner-text{display:none}
  .banner-copy{gap:12px}
  .hexo{width:44px;height:50px}
  .cf-item{flex:0 0 86%}
  .cf-item figcaption{font-size:11.5px}

  .steps{grid-template-columns:1fr;gap:14px}
  .step::after{display:none!important}
  .step p{min-height:0}
  .step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num title" "img text";gap:10px 14px;align-items:center}
  .step-num{grid-area:num;margin:0;width:36px;height:36px}
  .step h5{grid-area:title}
  .step p{grid-area:text;margin:0}
  .step-img{grid-area:img;width:110px;aspect-ratio:1/1;margin:0}

  .brand-stamp{gap:10px}
  .brand-stamp strong{letter-spacing:3px;font-size:12px}
  .brand-stamp em{font-size:9.5px;letter-spacing:1px}

  .why-grid{grid-template-columns:1fr;gap:12px}
  .why-card{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:14px}
  .why-ico{grid-row:1 / 3;margin:0}
  .cta-points,.contact-info{grid-template-columns:1fr;gap:12px}
  .cta-points li,.contact-info li{border-right:none!important;padding-right:0}
  .hotline-pill{justify-content:center}

  .proj{flex:0 0 88%}
  .proj-carousel .cf-nav{display:none}
  .filters{gap:6px}
  .chip{padding:6px 13px;font-size:12px}

  .hotline-bar{padding:10px 20px 10px 10px;gap:12px}
  .hb-ico{width:48px;height:48px}
  .hb-ico .ico{width:23px;height:23px}

  /* nút tròn nổi: nâng lên trên thanh hành động */
  .float-actions{right:12px;bottom:calc(var(--mbar) + 14px);gap:12px}
  .fab{width:48px;height:48px}
  .fab .ico{width:23px;height:23px}
  .fab-tip{display:none}

  .mobile-bar{
    display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(201,153,47,.35);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 24px rgba(10,19,48,.28);
  }
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;gap:7px;
    background:#0d1430;color:#f3e6c4;font-size:12.5px;font-weight:700;
    padding:15px 6px;letter-spacing:.2px;
  }
  .mobile-bar a .ico{width:18px;height:18px;background:var(--gold-2)}
  .mobile-bar .mb-main{background:linear-gradient(135deg,#f3d183,#c9992f 55%,#a87c1c);color:#2b1e05}
  .mobile-bar .mb-main .ico{background:#2b1e05}

  .lightbox{padding:44px 12px}
  .lb-nav{width:38px;height:38px}
  .lb-nav.prev{left:6px}
  .lb-nav.next{right:6px}
}

@media (max-width:400px){
  .hero h1{font-size:28px}
  .hb-text strong{font-size:23px}
}