/*
 * HERO TRANG CHỦ (16/10) — "bộ mặt" thương hiệu. Nạp SAU p-type.css (đè cỡ h1 cho riêng hero).
 *  - Nền: gradient mint → xanh bạc hà/ngà + chấm kẻ mờ + hình nét LỚN (partials/hero-art.ejs, line-art, không 3D/ảnh).
 *  - Mint chiếm chủ đạo; blue/cam/hồng chỉ điểm nhỏ (dấu cộng, tia sáng).
 *  - Thanh tìm kiếm là nhân vật chính: máy tính = 1 hàng Dịch vụ | Khu vực | Tìm; điện thoại = thẻ gọn xếp 2 hàng + nút Tìm.
 *  - Chip tỉnh/thành: một hàng, cuộn ngang, mép mờ (h-scroll.js), không thanh cuộn.
 *  Cách dùng + ngoại lệ cỡ chữ (h1 hero tới 36px ở máy tính): docs/CHUAN-GIAO-DIEN.md mục Hero.
 */
.hero{position:relative;border-bottom:1px solid #dfe9e5;
  background:
    radial-gradient(52% 85% at 88% 6%,#d3f0e5 0,rgba(211,240,229,0) 64%),
    radial-gradient(44% 70% at 0% 100%,#dbe8fb 0,rgba(219,232,251,0) 68%),
    linear-gradient(180deg,#eff9f5 0%,#f5faf9 58%,#fff 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(12,156,121,.2) 1.1px,transparent 1.4px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(60% 90% at 0% 0%,#000 0,transparent 72%);mask-image:radial-gradient(60% 90% at 0% 0%,#000 0,transparent 72%)}
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-art svg{overflow:visible;position:absolute;top:50%;transform:translateY(-50%);width:900px;height:600px;max-width:none;
  left:min(calc(100% - 646px),calc(50% - 40px))}
.hero .wrap{position:relative;z-index:1;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px;padding-bottom:30px}
@media (min-width:961px){.hero .wrap{grid-template-columns:minmax(0,1fr) 360px;gap:40px;padding-top:40px;padding-bottom:44px}}
.hero-main{min-width:0;max-width:760px}

/* nhãn phạm vi */
.hero-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:var(--r);background:rgba(255,255,255,.78);border:1px solid rgba(12,156,121,.28);
  color:var(--mint-d);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.hero-tag .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(12,156,121,.45);animation:heroPulse 2.4s ease-out infinite}
@keyframes heroPulse{0%{box-shadow:0 0 0 0 rgba(12,156,121,.45)}70%,100%{box-shadow:0 0 0 7px rgba(12,156,121,0)}}

/* tiêu đề: nhịp 2 dòng, cụm khoá gạch chân vẽ tay (SVG), "miễn phí" nhấn xanh dương */
.hero h1{font-size:24px;line-height:1.16;letter-spacing:-.9px;margin:14px 0 10px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--mint-d);padding-bottom:.1em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C34 3 66 10.5 108 6 150 1.5 184 8.5 218 4' fill='none' stroke='%230c9c79' stroke-width='3.6' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .34em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero h1 .h-key{color:var(--blue)}
.hero p.lead{text-wrap:pretty;font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 22px;max-width:560px}

/* thanh tìm kiếm */
.hero .finder{display:grid;grid-template-columns:1fr 1fr auto;align-items:stretch;max-width:760px;min-height:68px;overflow:hidden;
  background:#fff;border:1px solid #cfe0d9;border-radius:var(--r);
  box-shadow:0 22px 44px -18px rgba(12,156,121,.42),0 3px 8px rgba(20,33,61,.07)}
.hero .finder .f{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;border-right:1px solid var(--line);position:relative;min-width:0;transition:background-color .15s,box-shadow .15s}
.hero .finder .f:hover{background:#f6fbf9}
.hero .finder .f:focus-within{background:#f1faf6;box-shadow:inset 0 0 0 2px var(--blue)}
.hero .finder .fi{flex:none;margin-top:2px;width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;font-size:20px}
.hero .finder .fb{flex:1;min-width:0}
.hero .finder label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.2}
.hero .finder .v{margin-top:3px;border:0;box-shadow:none;border-radius:0;display:block}
.hero .finder .v:focus-within{border:0;box-shadow:none}
.hero .finder .v select{display:block;width:100%;height:30px;min-height:0;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px;
  appearance:none;-webkit-appearance:none;padding:0 22px 0 0;text-overflow:ellipsis;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23667086' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E") no-repeat right 2px center/13px}
.hero .finder select:focus-visible{outline:0}
.hero .finder .go{border:0;margin:0;border-radius:0;background:linear-gradient(180deg,#10ab86 0,var(--mint) 100%);color:#fff;font:inherit;font-size:15px;font-weight:800;letter-spacing:-.1px;
  padding:0 30px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;white-space:nowrap;transition:filter .15s}
.hero .finder .go i{font-size:20px}
.hero .finder .go:hover{filter:brightness(.93)}
.hero .finder .go:active{filter:brightness(.88);transform:translateY(1px)}
.hero .finder .go:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}

/* chip tỉnh/thành: một hàng, cuộn ngang (mép mờ do h-scroll.js), ẩn thanh cuộn */
.hero .areas{display:flex;flex-wrap:nowrap;gap:8px;margin-top:12px;max-width:760px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-items:center;padding:4px 0}
.hero .areas::-webkit-scrollbar{display:none}
.hero .areas>*{flex:none;white-space:nowrap}
.hero .areas span.t{font-size:12px;font-weight:700;color:var(--ink-3);margin-right:2px}
.hero .areas .chip{min-height:32px;padding:0 12px;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.92);border:1px solid #d3e3dc;border-radius:var(--r);box-shadow:0 1px 2px rgba(20,33,61,.04);transition:border-color .15s,color .15s,transform .15s,box-shadow .15s}
.hero .areas .chip i{font-size:13px;color:var(--mint)}
.hero .areas .chip:hover{border-color:var(--mint);color:var(--mint-d);transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(12,156,121,.35)}
.hero .areas .chip.old{border-style:dashed;background:transparent;box-shadow:none}
.hero .areas .chip.old i{color:var(--ink-3)}
.hero .areas .chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* dải niềm tin */
.hero-trust{display:flex;flex-wrap:nowrap;gap:26px;list-style:none;margin:22px 0 0;padding:16px 0 0;max-width:760px;border-top:1px solid rgba(20,33,61,.09);font-size:12px;font-weight:600;color:var(--ink-2)}
.hero-trust li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero-trust i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r);font-size:17px}
.hero-trust .a i{background:var(--mint-s);color:var(--mint)}
.hero-trust .b i{background:var(--blue-s);color:var(--blue)}
.hero-trust .c i{background:var(--orange-s);color:var(--orange-ink,#b4540a)}
/* khung Đặt hẹn nhanh đã có dải 3 ý riêng ở hero → bỏ để khỏi lặp */
.hero .qbook .qb-trust{display:none}

/* ≤ 960px: một cột, hình nền lên góc phải */
@media (max-width:960px){
  .hero-art .dec{display:none}
  .hero-art svg{width:640px;height:427px;top:-30px;transform:none;left:auto;right:-200px}
}
/* 961–1100px: cột chữ hẹp → thu nhỏ ô tìm kiếm để không cắt chữ */
@media (min-width:961px) and (max-width:1100px){
  .hero .finder .f{padding:13px 12px;gap:9px}
  .hero .finder .fi{width:30px;height:30px;margin-top:5px;font-size:17px}
  .hero .finder .go{padding:0 20px}
  .hero-trust{gap:16px}
}
@media (min-width:761px){
  .hero h1{font-size:30px;letter-spacing:-1px}
  .hero p.lead{font-size:15px}
}
@media (min-width:1101px){.hero h1{font-size:34px;letter-spacing:-1.2px}}
@media (min-width:1280px){.hero h1{font-size:36px}}
/* điện thoại: thẻ tìm kiếm gọn 2 hàng + nút Tìm; dải niềm tin thành 3 cột */
@media (max-width:760px){
  .hero .wrap{padding:20px 16px 24px;gap:22px}
  .hero-art svg{width:520px;height:347px;top:-24px;right:-215px}
  .hero-tag{font-size:11px;padding:4px 9px;letter-spacing:.05em}
  .hero h1{margin:12px 0 8px}
  .hero p.lead{font-size:13px;margin-bottom:16px}
  .hero .finder{grid-template-columns:1fr;min-height:0;box-shadow:0 14px 28px -14px rgba(12,156,121,.4),0 2px 6px rgba(20,33,61,.07)}
  .hero .finder .f{padding:7px 12px;gap:11px;border-right:0;border-bottom:1px solid var(--line);min-height:58px}
  .hero .finder .fi{width:34px;height:34px;margin-top:4px;font-size:18px}
  .hero .finder .v select{height:32px;min-height:0;font-size:14px}
  .hero .finder .go{height:48px;padding:0 16px;font-size:15px}
  .hero .areas{margin:14px -16px 0;padding:2px 16px;max-width:none}
  .hero .areas .chip{min-height:36px}
  .hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:14px}
  .hero-trust li{flex-direction:column;gap:5px;text-align:center;white-space:normal;font-size:11px;line-height:1.3}
}
@media (prefers-reduced-motion:reduce){.hero-tag .dot{animation:none}.hero .areas .chip,.hero .finder .f{transition:none}.hero .areas .chip:hover{transform:none}}

/* ===== ICON DỊCH VỤ chuẩn (partials/svc-icon.ejs): răng bo mềm chuyển sắc + biểu tượng nhỏ nổi ở góc; cùng khung 56x56, pastel cùng tông ===== */
.svi{flex:none;display:inline-block;width:var(--svi,20px);height:var(--svi,20px);vertical-align:-5px;overflow:visible}
.svc .ic.svc-ic{width:52px;height:52px;margin:0 auto 5px;border-radius:0;background:none;display:grid;place-items:center}
.svc .svc-ic .svi{--svi:50px;vertical-align:0}
.pill .svi,.links a .svi{--svi:22px;margin:-3px 2px -3px 0}
@media (max-width:760px){.svc .ic.svc-ic{width:44px;height:44px}.svc .svc-ic .svi{--svi:44px}}