/* ==========================================================================
   CẤP THOÁT NƯỚC MỎ CÀY: Design System
   Phiên bản SÁNG · xanh blue nước (sang trọng). Sửa 1 nơi, áp cho mọi trang.
   Giữ nguyên tên biến (--teal…) để tương thích inline cũ. Giá trị đổi sang blue.
   ========================================================================== */
:root{
  /* Nền sáng */
  --bg:#ffffff;
  --bg-2:#eef5fc;                     /* section xen kẽ, xanh rất nhạt */
  --surface:#ffffff;                  /* mặt card */
  --surface-2:#f4f8fd;
  --border:rgba(13,58,110,.12);       /* viền mảnh */
  --border-soft:rgba(13,58,110,.07);

  /* Accent xanh blue (thay cho teal) */
  --teal:#0b63c7;                     /* accent chính: xanh dương tin cậy */
  --teal-2:#1a7fe0;                   /* xanh sáng hơn cho gradient */
  --teal-ink:#ffffff;                 /* chữ TRÊN nền blue */
  --teal-dim:#e7f1fc;                 /* tint sáng cho icon/gradient highlight */
  --teal-line:rgba(11,99,199,.30);    /* viền highlight/hover */
  --teal-glow:rgba(11,99,199,.13);    /* vệt sáng */

  /* Chữ */
  --ink:#0a2e52;                      /* navy đậm: tiêu đề, sang trọng */
  --text:#213e5b;                     /* chữ chính */
  --muted:#566d86;                    /* mô tả */
  --dim:#8496a9;                      /* chú thích mờ */

  /* Trạng thái đạt (nước) */
  --ok:#0e9f6e; --ok-bg:rgba(14,159,110,.12);

  /* Bóng đổ nhẹ, tạo chiều sâu cho nền sáng */
  --sh-sm:0 1px 2px rgba(10,37,70,.05);
  --sh:0 10px 28px rgba(10,37,70,.07);
  --sh-lg:0 26px 60px rgba(10,37,70,.12);

  --maxw:1200px; --radius:16px; --radius-sm:10px; --radius-pill:999px; --pad-section:96px;
}
*{box-sizing:border-box}
/* Ô có thuộc tính hidden phải ẩn thật, kể cả khi lớp CSS khác đặt display (vd .field{display:flex}) */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",system-ui,sans-serif;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;margin:0;line-height:1.6;word-break:keep-all;overflow-wrap:break-word}
a{text-decoration:none}
img{max-width:100%}

.section{padding:var(--pad-section) 0;position:relative}
.section.alt{background:var(--bg-2)}
.section.tight{padding:64px 0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1{font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;margin:.3em 0;color:var(--ink)}
h2{font-size:clamp(32px,4.5vw,52px);font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0 0 .4em;color:var(--ink)}
.lead{color:var(--muted);font-size:18px;max-width:60ch}
.eyebrow{color:var(--teal)}
.fill{color:var(--teal);border-bottom:1px dashed var(--teal-line);padding-bottom:1px;font-weight:600}
.note{color:var(--dim);font-size:13.5px}

/* Badge */
.badge{display:inline-block;padding:6px 14px;border-radius:var(--radius-pill);background:var(--teal-dim);
  border:1px solid var(--teal-line);color:var(--teal);font-size:13px;font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius-sm);
  font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn-primary{background:linear-gradient(135deg,var(--teal-2),var(--teal));color:var(--teal-ink);
  box-shadow:0 6px 16px rgba(11,99,199,.26)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,99,199,.32)}
.btn-ghost{background:var(--surface);color:var(--teal);border-color:var(--teal-line)}
.btn-ghost:hover{background:var(--teal-dim)}
.btn-white{background:linear-gradient(135deg,var(--teal-2),var(--teal));color:var(--teal-ink);
  box-shadow:0 6px 16px rgba(11,99,199,.26)}
.btn-white:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* Navbar */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:17px}
.logo .mark{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:#fff;flex:none;overflow:hidden}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo small{display:block;color:var(--dim);font-size:11px;font-weight:500;letter-spacing:.02em}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--muted);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--teal)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .login{color:var(--muted);font-size:15px;font-weight:500}
.nav-cta .login:hover{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer}
@media(max-width:960px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--border);padding:8px 24px 16px;box-shadow:var(--sh)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--border-soft)}
  .nav-toggle{display:block}
  .nav-cta .login{display:none}
}

/* Glow */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;top:-25%;left:50%;transform:translateX(-50%);
  width:1000px;height:640px;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--teal-glow) 0%,transparent 62%);filter:blur(18px)}

/* Hero (trang chủ) */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:18px;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);flex:none}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:36px}}

/* Page hero (trang trong) */
.page-hero{position:relative;overflow:hidden;padding:56px 0 40px;border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.crumb{color:var(--dim);font-size:13.5px;margin-bottom:14px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--teal)}
.crumb span{color:var(--teal)}
.page-hero h1{font-size:clamp(32px,5vw,52px);margin:.1em 0 .25em}
.page-hero .lead{font-size:17px}

/* Mockup bill lookup */
.mockup{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--sh-lg);overflow:hidden}
.mk-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border-soft);
  background:var(--surface-2)}
.mk-head .d{width:11px;height:11px;border-radius:50%;background:#d6e2ee}
.mk-head span{margin-left:auto;color:var(--dim);font-size:12px}
.mk-body{padding:22px}
.mk-label{color:var(--dim);font-size:13px;margin-bottom:6px}
.mk-input{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;color:var(--text);font-size:15px;display:flex;justify-content:space-between;align-items:center}
.mk-input .code{color:var(--teal);font-weight:600}
.mk-btn{margin-top:12px;width:100%;justify-content:center}
.mk-result{margin-top:18px;background:linear-gradient(135deg,var(--teal-dim),transparent);
  border:1px solid var(--teal-line);border-radius:12px;padding:16px}
.mk-row{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:var(--muted)}
.mk-row b{color:var(--ink)}
.mk-total{border-top:1px dashed var(--border);margin-top:8px;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
.mk-total .big{font-size:26px;font-weight:800;color:var(--teal)}

/* Quick access */
/* Nam the tien ich. Man hinh rong chia deu 5 cot, phu kin be ngang khoi
   noi dung. Xuong kho hep thi 3+2 roi 2+2+1, hang cuoi luon duoc keo cho kin
   hang chu khong de mot o trong lech ve mot ben. */
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:-40px;position:relative;z-index:2}
.qbtn{min-width:0;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 14px;
  text-align:center;color:var(--ink);transition:.2s;display:block;box-shadow:var(--sh-sm)}
.qbtn:hover{border-color:var(--teal-line);transform:translateY(-3px);box-shadow:var(--sh)}
.qbtn .ic{width:40px;height:40px;margin:0 auto 10px;border-radius:11px;display:grid;place-items:center;
  background:var(--teal-dim);color:var(--teal)}
.qbtn span{font-size:13.5px;font-weight:600;line-height:1.35;display:block}
@media(max-width:1080px){
  /* Sau cot ao, moi the chiem hai cot. Hai the cuoi lui vao giua cho can doi. */
  .quick{grid-template-columns:repeat(6,1fr)}
  .qbtn{grid-column:span 2}
  .qbtn:nth-child(4){grid-column:2/span 2}
  .qbtn:nth-child(5){grid-column:4/span 2}
}
@media(max-width:680px){
  .quick{grid-template-columns:repeat(2,1fr)}
  .qbtn,.qbtn:nth-child(4){grid-column:auto}
  .qbtn:nth-child(5){grid-column:1/-1}
}

/* Hinh anh nha may: luoi 6 cot, anh ngang chiem 3 cot, anh dung chiem 2 cot,
   nen hai anh ngang xep mot hang va ba anh dung xep mot hang, khong o trong. */
.nm-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.nm-item{grid-column:span 2;margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-sm)}
.nm-item.ngang{grid-column:span 3}
.nm-item img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.nm-item.ngang img{aspect-ratio:16/9}
.nm-item figcaption{padding:18px 20px 20px}
.nm-item h3{margin:0 0 6px;font-size:17px}
.nm-item p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
@media(max-width:860px){
  .nm-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .nm-item{grid-column:span 1}
  .nm-item.ngang{grid-column:1/-1}
  .nm-item.ngang img{aspect-ratio:2/1}
}
@media(max-width:560px){
  .nm-grid{grid-template-columns:1fr}
  .nm-item img{aspect-ratio:4/3}
  .nm-item.ngang img{aspect-ratio:16/10}
}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--sh-sm)}
.stat .num{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.stat .num .u{font-size:16px;color:var(--muted);font-weight:600;margin-left:4px}
.stat .lab{color:var(--muted);font-size:14px;margin-top:10px}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}}
/* Bang gia tren trang chu: so tien kem don vi (13.000 d/m3) qua rong cho hai cot
   tren dien thoai, cot phai tran ra ngoai man hinh. Xuong mot cot, va cho o luoi
   duoc co nho hon noi dung de khong bao gio day tran. */
.stats > *{min-width:0}
@media(max-width:560px){#gia-nuoc .stats{grid-template-columns:1fr}}

/* Grids & cards */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;
  transition:.2s;display:block;color:var(--text);box-shadow:var(--sh-sm)}
.card:hover{border-color:var(--teal-line);transform:translateY(-3px);box-shadow:var(--sh)}
.card-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--teal-dim);color:var(--teal);margin-bottom:16px;font-weight:700}
.card h3{font-size:19px;font-weight:700;margin:0 0 8px;color:var(--ink)}
.card p{color:var(--muted);font-size:15px;margin:0}
.card .more{color:var(--teal);font-size:14px;font-weight:600;margin-top:14px;display:inline-flex;gap:6px}
.card .soon{color:var(--dim);font-size:12.5px;margin-top:14px;display:inline-block}

/* Big service cards */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc .card{padding:34px;display:flex;flex-direction:column}
.svc .card.hl{background:linear-gradient(135deg,var(--teal-dim),transparent);border-color:var(--teal-line)}
.svc ul{list-style:none;padding:0;margin:16px 0 0}
.svc ul li{color:var(--muted);font-size:15px;padding:6px 0 6px 22px;position:relative}
.svc ul li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
@media(max-width:760px){.svc{grid-template-columns:1fr}}

/* Section header */
.sh{max-width:60ch;margin-bottom:44px}
.sh .badge{margin-bottom:16px}

/* Split (man) */
.man{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
@media(max-width:860px){.man{grid-template-columns:1fr}}
.warnbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--sh-sm)}
.warnbox .row{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.warnbox .row:last-child{border-bottom:0}
.warnbox .n{width:30px;height:30px;flex:none;border-radius:8px;background:var(--teal-dim);color:var(--teal);
  display:grid;place-items:center;font-weight:700;font-size:14px}
.warnbox .row b{display:block;margin-bottom:2px;color:var(--ink)}
.warnbox .row p{margin:0;color:var(--muted);font-size:14.5px}

/* Table */
.tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--sh-sm)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:14px 20px;font-size:15px}
thead th{color:var(--dim);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
tbody tr{border-bottom:1px solid var(--border-soft)}
tbody tr:last-child{border-bottom:0}
td b{color:var(--ink)}td .muted{color:var(--muted)}
.tag-ok{color:var(--ok);font-weight:600;font-size:13px;background:var(--ok-bg);
  padding:3px 10px;border-radius:var(--radius-pill)}

/* Pricing / list check */
.price-card{background:linear-gradient(135deg,var(--teal-dim),transparent);border:1px solid var(--teal-line);
  border-radius:var(--radius);padding:34px;box-shadow:var(--sh-sm)}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;color:var(--muted);font-size:15px}
.check svg{flex:none;color:var(--teal);margin-top:3px}
.check b{color:var(--ink)}

/* Compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.cmp{grid-template-columns:1fr}}
.cmp .col{border:1px solid var(--border);border-radius:var(--radius);padding:30px;background:var(--surface);box-shadow:var(--sh-sm)}
.cmp .col.good{background:linear-gradient(135deg,var(--teal-dim),transparent);border-color:var(--teal-line)}
.cmp h3{margin:0 0 18px;font-size:20px;color:var(--ink)}
.cmp li{list-style:none;padding:9px 0 9px 26px;position:relative;color:var(--muted);font-size:15px}
.cmp .col.good li{color:var(--text)}
.cmp li::before{position:absolute;left:0;top:9px}
.cmp .bad li::before{content:"—";color:var(--dim)}
.cmp .good li::before{content:"✓";color:var(--teal);font-weight:700}

/* News */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.news{grid-template-columns:1fr}}
.news .card .kt{color:var(--teal);font-size:12.5px;font-weight:700;letter-spacing:.03em}
.news .card .dt{color:var(--dim);font-size:13px;margin-top:14px}
.news .card h3{margin:8px 0 0;font-size:17px;line-height:1.4;color:var(--ink)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.faq{grid-template-columns:1fr}}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:4px 22px;transition:.2s;box-shadow:var(--sh-sm)}
.faq details[open]{border-color:var(--teal-line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-weight:700;font-size:22px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);font-size:15px;margin:0 0 18px}

/* Prose (nội dung trang chi tiết) */
.prose{max-width:72ch;color:var(--muted);font-size:16.5px}
.prose h2{font-size:clamp(24px,3vw,32px);color:var(--ink);margin:1.4em 0 .5em}
.prose h3{font-size:20px;color:var(--ink);margin:1.4em 0 .4em}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.2em}
.prose li{margin:.4em 0}
.prose b,.prose strong{color:var(--ink)}
.prose blockquote{border-left:3px solid var(--teal);background:var(--teal-dim);margin:1.2em 0;
  padding:14px 20px;border-radius:0 12px 12px 0;color:var(--text)}

/* Timeline */
.tl{list-style:none;padding:0;margin:0;border-left:2px solid var(--border);margin-left:8px}
.tl li{position:relative;padding:0 0 26px 26px}
.tl li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 4px var(--bg)}
.tl .yr{color:var(--teal);font-weight:700;font-size:15px}
.tl p{margin:4px 0 0;color:var(--muted);font-size:15px}

/* CTA */
.cta{text-align:center;border:1px solid var(--teal-line);border-radius:24px;padding:64px 24px;
  background:linear-gradient(160deg,var(--teal-dim),var(--surface));box-shadow:var(--sh)}
.cta h2{margin-bottom:.3em}
.cta .lead{margin:0 auto 28px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Ô lưới mặc định không co nhỏ hơn nội dung, mà thẻ select tự nong theo dòng
   option dài nhất. Không khoá min-width:0 và max-width thì cả cột bị kéo rộng
   ra ngoài thẻ trên màn hình hẹp. */
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:14px;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;color:var(--text);font:inherit;font-size:15px}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-glow)}
.field textarea{min-height:120px;resize:vertical}

/* ===== Ảnh / media ===== */
.figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--border);background:var(--surface-2)}
.figure img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.figure.wide img{aspect-ratio:16/10}
.figcap{color:var(--dim);font-size:13px;margin-top:10px}

/* Card có ảnh */
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--sh-sm);transition:.2s;display:flex;flex-direction:column;color:var(--text)}
.pcard:hover{border-color:var(--teal-line);transform:translateY(-3px);box-shadow:var(--sh)}
.pcard .ph{overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.pcard:hover .ph img{transform:scale(1.05)}
.pcard .pb{padding:28px;display:flex;flex-direction:column;flex:1}
.pcard .pb h3{margin:0 0 8px;font-size:20px;color:var(--ink)}
.pcard .pb p{margin:0;color:var(--muted);font-size:15px}
.pcard .pb ul{list-style:none;padding:0;margin:14px 0 0}
.pcard .pb ul li{color:var(--muted);font-size:15px;padding:6px 0 6px 22px;position:relative}
.pcard .pb ul li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.pcard .pb .more{color:var(--teal);font-size:14px;font-weight:600;margin-top:16px;display:inline-flex;gap:6px}

/* Banner ảnh + lớp phủ */
.banner{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--sh-lg);isolation:isolate}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.banner .ov{padding:56px 48px;min-height:300px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(7,30,58,.88) 0%,rgba(7,30,58,.58) 52%,rgba(7,30,58,.22) 100%)}
.banner .ov .badge{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.banner .ov h2{color:#fff;max-width:22ch;margin:14px 0 .35em}
.banner .ov p{color:rgba(255,255,255,.9);max-width:54ch;font-size:17px}
.banner .ov .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.32);margin-top:8px;align-self:flex-start}
.banner .ov .btn-ghost:hover{background:rgba(255,255,255,.24)}
@media(max-width:620px){.banner .ov{padding:36px 24px;min-height:240px}}

/* News card ảnh */
.news .pcard .kt{color:var(--teal);font-size:12.5px;font-weight:700;letter-spacing:.03em}
.news .pcard h3{margin:8px 0 0;font-size:17px;line-height:1.4;color:var(--ink)}
.news .pcard .dt{color:var(--dim);font-size:13px;margin-top:12px}

/* Footer */
.footer{border-top:1px solid var(--border);background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:64px 0 40px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin:0 0 16px;font-weight:600}
.foot-grid a{display:block;color:var(--muted);font-size:15px;padding:6px 0}
.foot-grid a:hover{color:var(--teal)}
.foot-brand p{color:var(--muted);font-size:14.5px;max-width:34ch;margin:16px 0 0}
.hotline{margin-top:18px}
.hotline a{color:var(--ink);font-weight:700;font-size:18px;padding:2px 0}
.hotline span{color:var(--dim);font-size:12.5px}
.foot-bottom{border-top:1px solid var(--border-soft);padding:22px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--dim);font-size:13.5px}
.foot-bottom a{color:var(--dim)}
.foot-bottom a:hover{color:var(--teal)}

/* ===================== TỐI ƯU ĐIỆN THOẠI ===================== */
@media(max-width:860px){
  :root{--pad-section:56px}
  .section.tight{padding:40px 0}
  .sh{margin-bottom:32px}
  .man{gap:28px}
}
/* Nav gọn 1 hàng: logo + nút menu */
@media(max-width:960px){
  .nav-inner{padding:12px 16px;gap:10px}
  .logo{font-size:15px;gap:9px;line-height:1.15}
  .logo .mark{width:40px;height:40px}
  .logo small{font-size:10px;margin-top:1px}
  .nav-cta{gap:6px}
  .nav-cta .btn-white{display:none}      /* ẩn CTA header trên mobile, đã có ở hero + truy cập nhanh */
  .nav-links{padding:6px 16px 14px}
  .nav-links a{font-size:16px}
}
/* Đưa "Tra cứu tiền nước" thành mục nổi bật trong menu xổ (mobile) */
@media(max-width:960px){
  .nav-links .m-cta{display:block;margin-top:10px}
  .nav-links .m-cta a{display:block;text-align:center;background:linear-gradient(135deg,var(--teal-2),var(--teal));
    color:#fff;border-radius:10px;padding:12px;font-weight:700;border-bottom:0}
}
.m-cta{display:none}   /* chỉ hiện trong menu mobile */

@media(max-width:600px){
  h1{font-size:clamp(30px,8.5vw,42px)}
  .page-hero h1{font-size:clamp(28px,8vw,40px)}
  .quick{margin-top:14px;gap:10px}
  .qbtn{padding:16px 10px}
  .stat{padding:20px}
  .stat .num{font-size:clamp(26px,7vw,34px)}
  .card{padding:22px}
  .price-card,.cmp .col,.warnbox{padding:24px}
  .banner .ov{min-height:200px;padding:32px 22px}
  .cta{padding:48px 20px;border-radius:20px}
  .foot-grid{gap:28px;padding:48px 0 32px}
  .hero-actions .btn,.cta-actions .btn{flex:1 1 auto;justify-content:center}
}
@media(max-width:400px){
  .stats{gap:14px}
}

/* ===== Ô tra cứu hóa đơn (chức năng) ===== */
.mk-field{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;color:var(--text);font:inherit;font-size:15px}
.mk-field::placeholder{color:var(--dim)}
.mk-field:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow)}
.tc-msg{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:14px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border-soft)}
.tc-msg.tc-err{background:rgba(198,57,55,.09);border-color:rgba(198,57,55,.28);color:#b3312f}
.tc-msg b{color:inherit}
.tc-note-pay{margin-top:8px;color:var(--dim);font-size:12.5px;text-align:center}

/* Thẻ thông báo nổi bật (tin mới nhất) */
.tb-hero{border:1px solid var(--teal-line);border-left:5px solid var(--teal);border-radius:16px;
  padding:26px 30px;background:linear-gradient(135deg,var(--teal-dim),var(--surface));box-shadow:var(--sh-sm)}
.tb-hero .badge{margin-bottom:2px}
@media(max-width:600px){.tb-hero{padding:22px 20px}}

/* ===== Cửa sổ thanh toán (QR + chuyển khoản) ===== */
.pay-overlay{position:fixed;inset:0;z-index:100;background:rgba(8,32,60,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:18px}
.pay-overlay.open{display:flex}
.pay-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;max-width:420px;width:100%;
  box-shadow:var(--sh-lg);max-height:94vh;overflow:auto}
.pay-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-soft)}
.pay-head h3{margin:0;font-size:18px;color:var(--ink)}
.pay-close{background:none;border:0;color:var(--muted);cursor:pointer;font-size:24px;line-height:1;padding:0 4px}
.pay-close:hover{color:var(--ink)}
.pay-body{padding:20px}
.pay-amount{text-align:center;margin-bottom:14px}
.pay-amount .lbl{color:var(--muted);font-size:13px}
.pay-amount .big{color:var(--teal);font-weight:800;font-size:30px;letter-spacing:-.01em;display:block;margin-top:2px}
.pay-qr{display:block;width:230px;max-width:72%;height:auto;margin:0 auto 8px;border:1px solid var(--border);border-radius:12px;background:#fff}
.pay-qr-note{text-align:center;color:var(--dim);font-size:12.5px;margin-bottom:16px}
.pay-info{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.pay-row{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-soft);font-size:14px;align-items:center}
.pay-row:last-child{border-bottom:0}
.pay-row .k{color:var(--muted);flex:none}
.pay-row .v{color:var(--ink);font-weight:600;text-align:right;word-break:break-word;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.pay-copy{background:var(--teal-dim);color:var(--teal);border:1px solid var(--teal-line);border-radius:8px;
  cursor:pointer;font-size:12px;font-weight:600;padding:3px 9px;white-space:nowrap}
.pay-copy:hover{filter:brightness(.98)}
.pay-note{color:var(--dim);font-size:12.5px;margin-top:14px;text-align:center}
/* Nút mở app ngân hàng (chỉ hiện trên điện thoại) */
.pay-apps{border:1px solid var(--teal-line);background:var(--teal-dim);border-radius:14px;padding:14px;margin-bottom:16px}
.pay-apps-tit{font-weight:700;color:var(--ink);font-size:15px;margin-bottom:10px;text-align:center}
.pay-nh-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pay-nh{display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:7px 8px;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.pay-nh img{flex:none;width:32px;height:32px;border-radius:9px;object-fit:contain}
.pay-nh span{font-size:13.5px;font-weight:600;line-height:1.2;min-width:0;word-break:keep-all;overflow-wrap:normal}
.pay-nh.nho{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-line)}
.pay-nh-khac{display:block;width:100%;margin-top:8px;background:none;border:0;color:var(--teal);font:inherit;
  font-size:13.5px;font-weight:600;cursor:pointer;padding:6px}
.pay-nh-chon{display:block;width:100%;max-width:100%;margin-top:4px;padding:10px;border:1px solid var(--border);
  border-radius:10px;font:inherit;font-size:15px;background:var(--surface);color:var(--ink)}
.pay-nh-chon[hidden],.pay-hint[hidden],.pay-thu[hidden]{display:none!important}
.pay-thu{background:#fdecec;border:1px solid #f3b4b4;color:#b42318;font-weight:600;font-size:13.5px;border-radius:10px;padding:9px 12px;margin-bottom:12px;text-align:center}
.pay-hint{margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;
  font-size:14px;line-height:1.5;color:var(--ink)}
.pay-buoc{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-soft)}
.pay-buoc span{min-width:0;overflow-wrap:anywhere}
.pay-mo{display:flex;width:100%;justify-content:center;margin-top:12px}
.pay-nguoi-nha{display:flex;width:100%;justify-content:center;margin-top:14px;background:var(--surface);
  border:1px solid var(--teal);color:var(--teal);font-weight:700}

/* ============ Thẻ bài viết có ảnh đại diện ============ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-sm);transition:.2s;color:var(--text)}
.post:hover{border-color:var(--teal-line);transform:translateY(-3px);box-shadow:var(--sh)}
.post-thumb{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;flex:none}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.post-kicker{color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.post h3{font-size:18px;font-weight:700;line-height:1.35;margin:8px 0 0;color:var(--ink)}
.post p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:8px 0 0}
.post .more{color:var(--teal);font-size:14px;font-weight:600;margin-top:auto;padding-top:14px}

/* Bài nổi bật: ảnh bên trái, chữ bên phải, chiếm trọn hàng */
.post-lead{grid-column:1/-1;flex-direction:row;align-items:stretch}
.post-lead .post-thumb{aspect-ratio:auto;width:46%;min-height:280px}
.post-lead .post-body{padding:34px 38px;justify-content:center}
.post-lead h3{font-size:clamp(22px,2.7vw,31px);line-height:1.22;margin-top:10px}
.post-lead p{font-size:16px;margin-top:12px;max-width:52ch}

@media(max-width:960px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .post-lead{flex-direction:column}
  .post-lead .post-thumb{width:100%;aspect-ratio:16/9;min-height:0}
  .post-lead .post-body{padding:22px 24px 24px}
}
@media(max-width:620px){ .posts{grid-template-columns:1fr} }

/* Ảnh đại diện trên đầu trang bài viết */
.art-cover{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--sh-sm);aspect-ratio:16/6.2;background:var(--surface-2)}
.art-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:620px){ .art-cover{aspect-ratio:16/9} }

/* Dải chuyên mục gọn, thay cho lưới thẻ lớn */
.topics{display:flex;flex-wrap:wrap;gap:10px}
.topic{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border);font-size:14.5px;font-weight:600;color:var(--ink)}
a.topic:hover{border-color:var(--teal-line);color:var(--teal);background:var(--teal-dim)}
.topic.off{color:var(--dim);font-weight:500;background:transparent}
.topic .st{font-size:12px;font-weight:600;color:var(--dim)}

/* Thanh tiêu đề gọn cho khối danh sách nằm ngay dưới hero */
.sec-bar{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sec-bar p{margin:0;color:var(--muted);font-size:15.5px;flex:1;min-width:240px}

/* Lưới logo đối tác trên trang hướng dẫn thanh toán */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 26px}
.logo-tile{background:#fff;border:1px solid var(--border);border-radius:12px;height:80px;
  display:grid;place-items:center;padding:14px;box-shadow:var(--sh-sm)}
.logo-tile img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.logo-tile figcaption{display:none}
@media(max-width:620px){.logos{grid-template-columns:repeat(2,1fr)}}

/* Bảng địa chỉ điểm thu hộ: trên màn hình hẹp chỉ giữ tên điểm và địa chỉ */
@media(max-width:620px){
  .tbl-diem th:nth-child(1),.tbl-diem td:nth-child(1),
  .tbl-diem th:nth-child(4),.tbl-diem td:nth-child(4){display:none}
  /* Bảng trong bài không có khung cuộn riêng: bỏ min-width 520px chung và cho bảng tự cuộn, không thì cả trang trượt ngang trên điện thoại */
  .art table{font-size:14px;min-width:0;display:block;overflow-x:auto}
  .art th,.art td{padding:8px 10px}
}

/* Form nhiều nhóm: tiêu đề nhóm và ô tích cam kết */
.form-grid h4.fgroup{margin:18px 0 2px;font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--teal)}
.form-grid .field:first-child h4.fgroup{margin-top:0}
.consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:14.5px;
  line-height:1.55;color:var(--muted);font-weight:400}
.consent input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--teal);cursor:pointer}
.consent span{flex:1}

/* Ảnh minh họa các bước trong bài hướng dẫn */
.hd-anh{margin:22px 0;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--surface-2);box-shadow:var(--sh-sm)}
.hd-anh img{display:block;width:100%;height:auto;background:#fff}
.hd-anh figcaption{padding:11px 16px;font-size:13.5px;color:var(--muted);
  border-top:1px solid var(--border-soft);background:var(--surface)}
.hd-anh figcaption b{color:var(--ink)}
/* Ảnh chụp màn hình điện thoại: giới hạn bề ngang cho khỏi phình to.
   Không cắt bớt chiều cao ảnh, vì cắt kiểu đó hay chặt ngang giữa câu. */
.hd-anh.dt{max-width:380px;margin-left:auto;margin-right:auto}


/* ============ Ảnh nền hero ============
   Ảnh nằm dưới chữ, làm mềm bằng bộ lọc và một lớp phủ trắng đậm dần về
   bên trái, nơi đặt tiêu đề, để chữ luôn đủ tương phản. */
.hero-anh{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:.15;filter:brightness(1.22) contrast(.82) saturate(1.05);
  pointer-events:none;user-select:none;z-index:0}
/* Anh do hoa (SVG song nuoc) von da nhat, khong can loc sang va phai dam hon
   anh chup thi moi nhin thay. */
/* Anh chup that cua cong ty: de hien ro, chi lam sang nhe. Lop phu trang ben
   trai (hero-anh::after) van giu chu doc duoc. Neo anh xuong thap hon vi phan
   troi phia tren trong hon, phan be va cay phia duoi moi la thu can thay. */
.hero-bg.anh-that{opacity:.62;filter:brightness(1.06) saturate(1.02);object-position:center 58%}
@media(max-width:860px){.hero-bg.anh-that{opacity:.34}}
/* Voi anh that, doan dan chay qua vung nhieu chi tiet (tan cay) nen lop phu
   trang o giua dam hon mot chut so voi mac dinh. */
.hero-anh:has(.anh-that)::after{background:linear-gradient(96deg,rgba(255,255,255,.90) 0%,
  rgba(255,255,255,.80) 28%,rgba(255,255,255,.46) 55%,rgba(255,255,255,.10) 100%)}
.hero-bg.do-hoa{opacity:.55;filter:saturate(1.04)}
@media(max-width:860px){.hero-bg.do-hoa{opacity:.42}}
.hero-anh::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 26%,
    rgba(255,255,255,.30) 55%,rgba(255,255,255,.10) 100%)}
.hero-anh > .container,.hero-anh > .art{position:relative;z-index:1}
@media(max-width:860px){
  .hero-bg{opacity:.11}
  .hero-anh::after{background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.62) 55%,rgba(255,255,255,.34) 100%)}
}

/* ============ Ảnh nền mờ cho một khối nội dung ============
   Ảnh thật của nhà máy nằm dưới cùng, phủ một lớp màu nền của khối để chữ và thẻ
   số liệu vẫn đọc rõ. Hai mép trên dưới đậm hơn cho khối liền mạch với khối kề. */
.khoi-anh{position:relative;overflow:hidden;isolation:isolate}
.khoi-anh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;
  z-index:-2;opacity:.5;filter:saturate(.55) contrast(.9);pointer-events:none;user-select:none}
.khoi-anh::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(238,245,252,.95) 0%,rgba(238,245,252,.72) 30%,
    rgba(238,245,252,.72) 70%,rgba(238,245,252,.95) 100%)}
@media(max-width:860px){.khoi-anh-bg{opacity:.35}}

/* ============ Trang đọc bài viết /tin/<bài> ============
   Dùng chung cho trang bài (netlify/functions/bai.mjs) và khung soạn thảo trong
   trang quản trị, để soạn thấy thế nào thì đăng lên ra thế ấy. */
.bai{max-width:760px;margin:0 auto}
.bai.rong{max-width:1200px}
.bai .kn-phieu{margin:18px auto;max-width:940px}.bai .kn-phieu img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:10px;background:#fff}
.bai .kn-phieu figcaption{font-size:13.5px;color:var(--dim);margin-top:6px;text-align:center}
.bai .meta{color:var(--dim);font-size:14px;display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 0}
.bai .khu{background:var(--teal-dim);border:1px solid var(--teal-line);color:var(--ink);border-radius:12px;padding:12px 16px;margin:18px 0 0;font-size:15px}
.bai .bia{margin:26px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.bai .bia img{display:block;width:100%;height:auto}
.noi-dung{color:var(--text);font-size:17px;line-height:1.75;margin-top:26px;word-wrap:break-word}
.noi-dung p{margin:0 0 1.05em}
.noi-dung h2{font-size:clamp(22px,3vw,28px);color:var(--ink);margin:1.5em 0 .5em;line-height:1.3}
.noi-dung h3{font-size:20px;color:var(--ink);margin:1.4em 0 .4em}
.noi-dung ul,.noi-dung ol{padding-left:1.4em;margin:0 0 1.05em}
.noi-dung li{margin:.25em 0}
.noi-dung a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.noi-dung img{max-width:100%;height:auto;border-radius:12px;display:block;margin:1.2em auto}
.noi-dung figure{margin:1.4em 0}.noi-dung figcaption{color:var(--dim);font-size:14px;text-align:center;margin-top:6px}
.noi-dung blockquote{margin:1.3em 0;padding:12px 18px;border-left:4px solid var(--teal);background:var(--teal-dim);border-radius:0 12px 12px 0;color:var(--ink)}
.noi-dung table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:15px;display:block;overflow-x:auto}
.noi-dung th,.noi-dung td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.noi-dung th{background:var(--surface-2);color:var(--ink)}
.noi-dung hr{border:0;border-top:1px solid var(--border);margin:2em 0}
.noi-dung .can-trai{text-align:left}.noi-dung .can-giua{text-align:center}.noi-dung .can-phai{text-align:right}.noi-dung .can-deu{text-align:justify}
.noi-dung img.can-trai{float:left;margin:.3em 1.2em .8em 0;max-width:50%}
.noi-dung img.can-phai{float:right;margin:.3em 0 .8em 1.2em;max-width:50%}
.noi-dung img.can-giua{margin-left:auto;margin-right:auto}
.noi-dung::after{content:"";display:block;clear:both}
.chia-se{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--border)}
.lien-quan{max-width:1100px;margin:0 auto}
@media(max-width:600px){.noi-dung{font-size:16.5px}.noi-dung img.can-trai,.noi-dung img.can-phai{float:none;max-width:100%;margin:1em 0}}

/* Số hotline bấm gọi: màu theo thương hiệu, không gãy dòng giữa số. :where để không đè màu của nút .btn */
:where(a[href^="tel:"]:not(.btn)){color:var(--teal);white-space:nowrap}