:root{
  --red:#c0272b; --red-dark:#9c1f22; --dark:#1c2330; --gray:#f5f6f8; --blue:#2b6cb0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;color:#333;line-height:1.6;background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.container{max-width:1140px;margin:0 auto;padding:0 16px}

/* ===== Header ===== */
header{background:var(--dark);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.topbar{background:var(--red);color:#fff;font-size:13px;padding:6px 0}
.topbar .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
.topbar a{font-weight:700}
.navwrap{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;max-width:1140px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:#fff}
.logo svg{flex-shrink:0}
.logo b{font-size:20px;letter-spacing:.5px}
.logo small{display:block;font-size:11px;color:#ffd9da;font-weight:400}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:#e8e8e8;padding:8px 12px;border-radius:4px;font-size:14px;transition:.2s}
nav a:hover,nav a.active{background:var(--red);color:#fff}
.hot{display:flex;align-items:center;gap:12px}
.hot a{background:var(--red);color:#fff;padding:8px 14px;border-radius:6px;font-weight:700;font-size:14px}
.hot a:hover{background:var(--red-dark)}
#nav-toggle{display:none;background:none;border:1px solid #fff;color:#fff;border-radius:4px;padding:6px 10px;font-size:20px;cursor:pointer}

/* ===== Hero ===== */
.hero{background:linear-gradient(135deg,#1c2330 0%,#31405c 60%,var(--red-dark) 130%);color:#fff;padding:56px 0 64px}
.hero .container{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.hero h1{font-size:34px;line-height:1.3;margin-bottom:14px}
.hero h1 span{color:#ff9a9c}
.hero p{color:#d7dde8;font-size:16px;margin-bottom:20px}
.hero ul{list-style:none;margin-bottom:24px}
.hero ul li{padding:6px 0 6px 28px;position:relative}
.hero ul li::before{content:"✔";position:absolute;left:0;color:#ff9a9c;font-weight:700}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:6px;font-weight:700;font-size:15px;transition:.2s;border:none;cursor:pointer}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-ghost{border:2px solid #fff;color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.hero .card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:24px;backdrop-filter:blur(4px)}
.hero .card h3{font-size:18px;margin-bottom:10px;color:#ffd9da}
.hero .card .price-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.25);font-size:14px}
/* @PLACEHOLDER bảng giá dưới đây anh chỉnh con số thật */
.hero .card .price-row b{color:#ffdf66}

/* ===== Sections ===== */
section{padding:48px 0}
section h2{font-size:26px;text-align:center;margin-bottom:8px;color:var(--dark)}
.sec-sub{text-align:center;color:#777;margin-bottom:32px;font-size:15px}
.gray{background:var(--gray)}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid #e6e8ee;border-radius:10px;padding:22px;background:#fff}
.card h3{color:var(--dark);margin-bottom:8px;font-size:17px}
.card p{font-size:14px;color:#555}
.card .price{color:var(--red);font-weight:800;font-size:20px;margin-top:10px}
.card .price small{font-size:12px;color:#999;font-weight:400;text-decoration:line-through;margin-left:6px}
.step{text-align:center;position:relative}
.step .num{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08)}
th,td{padding:12px 14px;border:1px solid #e6e8ee;font-size:14px;text-align:left}
th{background:var(--dark);color:#fff;font-weight:600}
tr:nth-child(even) td{background:#fafbfc}
.tbl-scroll{overflow-x:auto}
.faq-item{border:1px solid #e6e8ee;border-radius:8px;margin-bottom:10px;overflow:hidden}
.faq-q{background:#fff;padding:14px 18px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq-q::after{content:"▾";color:var(--red);transition:.2s}
.faq-item.open .faq-q::after{transform:rotate(180deg)}
.faq-a{display:none;padding:0 18px 16px;font-size:14px;color:#555}
.faq-item.open .faq-a{display:block}

/* ===== Form ===== */
.contact{background:var(--dark);color:#fff}
.contact h2{color:#fff}
.contact .sec-sub{color:#b9c2d4}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.contact-info p{margin-bottom:10px;font-size:15px}
.contact-info b{color:#ffd9da}
.contact-info a{color:#ffdf66}
form{background:#fff;border-radius:12px;padding:24px;color:#333}
form input,form select,form textarea{width:100%;padding:11px 12px;border:1px solid #cfd4de;border-radius:6px;margin-bottom:12px;font:inherit;font-size:14px}
form textarea{height:90px;resize:vertical}
form .btn{width:100%}
.hint{font-size:12px;color:#999;margin-top:6px;text-align:center}

/* ===== Footer ===== */
footer{background:#141a24;color:#aab;padding:36px 0 90px;font-size:14px}
footer .grid{grid-template-columns:2fr 1fr 1fr;gap:28px}
footer h4{color:#fff;margin-bottom:12px;font-size:15px}
footer a{display:block;padding:3px 0}
footer a:hover{color:#fff}
footer .copy{text-align:center;margin-top:24px;font-size:12px;color:#778}

/* ===== Hotline float ===== */
.hotline-float{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;flex-direction:column;gap:10px}
.hl-btn{display:flex;align-items:center;gap:8px;color:#fff;padding:12px 18px;border-radius:50px;font-weight:700;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:.2s}
.hl-call{background:var(--red)}
.hl-call:hover{background:var(--red-dark)}
.hl-zalo{background:#0068ff}
.hl-zalo:hover{filter:brightness(1.1)}
.hl-btn svg{width:20px;height:20px;fill:#fff}

/* ===== Responsive ===== */
@media(max-width:900px){
  .hero .container{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr}
  #nav-toggle{display:block}
  nav{display:none;width:100%;flex-direction:column;padding:8px 0}
  nav.open{display:flex}
  .hot{display:none}
}
@media(max-width:520px){.g3,.g4{grid-template-columns:1fr}.hero h1{font-size:26px}}

/* ===== Product pages ===== */
.breadcrumb{background:#f0f1f4;padding:10px 0;font-size:13px;color:#777}
.breadcrumb a{color:var(--red)}
.breadcrumb a:hover{text-decoration:underline}
.product{padding:36px 0 56px}
.product h1{font-size:30px;color:var(--dark);margin-bottom:8px;line-height:1.3}
.product-sub{color:#777;margin-bottom:20px;font-size:15px}
.product h2{font-size:22px;text-align:left;margin:36px 0 14px;color:var(--dark)}
.product p{font-size:15px;color:#444;margin-bottom:12px}
.cta-strip{background:var(--dark);color:#fff;border-radius:10px;padding:16px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.cta-strip a{color:#ffdf66;font-weight:700}
.cta-strip .btn{color:#fff}
.cta-box{background:linear-gradient(135deg,var(--dark),var(--red-dark));color:#fff;border-radius:12px;padding:30px;text-align:center;margin-top:36px}
.cta-box h3{font-size:22px;margin-bottom:6px}
.cta-box p{color:#ffd9da;margin-bottom:16px}
.cta-box .btn-ghost{border-color:#fff}
.price-note{font-size:13px;color:#999;margin-top:8px}
.product .faq-a p{margin-bottom:6px}
@media(max-width:900px){.product h1{font-size:24px}}
.card-link{display:block;margin-top:10px;color:var(--red);font-weight:700;font-size:14px}
.card-link:hover{text-decoration:underline}
.product-intro{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start;margin:20px 0 8px}
.product-intro .product-img img{width:100%;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.12);border:1px solid #e6e8ee}
@media(max-width:700px){.product-intro{grid-template-columns:1fr}.product-intro .product-img{max-width:340px;margin:0 auto}}
.card.has-img{padding:14px 14px 22px;text-align:center}
.card-img{display:block;margin:0 auto 12px;width:100%;max-width:220px;height:auto;border-radius:8px;border:1px solid #e6e8ee}