/* 3 trang dịch vụ (Implant, Răng sứ, Nha khoa tổng quát). Dùng thêm pricing.css (hero board, thanh điều hướng, thẻ giá). */

.hero h1{font-size:clamp(2.6rem,5.4vw,4.9rem)}

/* Vì sao chọn */
.sfeat-sec{background:var(--ivory);padding:clamp(48px,6vw,84px) 0 clamp(24px,3vw,40px)}
.sfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sfeat-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 32px;transition:.45s var(--ease)}
.sfeat-item:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.sfeat-item i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--gold-l);margin-bottom:1.2rem;font-style:normal}
.sfeat-item svg{width:24px;height:24px}
.sfeat-item h3{font-size:1.22rem;line-height:1.3;margin-bottom:.55rem}
.sfeat-item p{color:var(--muted);font-size:.92rem}

/* Bảng giá: nhóm + thẻ */
.sgroup{display:flex;align-items:center;gap:1rem;margin:clamp(40px,5vw,64px) 0 1.6rem;font-size:1.5rem}
.sgroup:first-of-type{margin-top:0}
.sgroup::after{content:"";flex:1;height:1px;background:var(--line)}
.pgrid.c4{grid-template-columns:repeat(4,1fr);gap:20px}
.pgrid.c4 .pcard h3{font-size:1.18rem}
.pgrid.c4 .pcard-body{padding:22px 22px 24px}
.pgrid.c4 .pcard-price strong{font-size:clamp(1.15rem,1.55vw,1.4rem)}
.pcard-price.single{margin-top:1.2rem}
.pcard h3{min-height:2.5em}
.pgrid.c3 .pcard-price strong{font-size:clamp(1.7rem,2.4vw,2.1rem)}

/* Ưu đãi (ảnh quảng cáo) */
.spromo{background:var(--stone)}
.spromo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.spromo-item{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:1;box-shadow:0 24px 40px -28px rgba(12,22,56,.5);background:#dfe8f5;isolation:isolate}
.spromo-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.spromo-item:hover img{transform:scale(1.05)}
.spromo-cta{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.75rem 1rem;border-radius:14px;background:rgba(12,22,56,.9);color:#fff;font-size:.82rem;font-weight:600;transform:translateY(calc(100% + 14px));transition:transform .45s var(--ease)}
.spromo-cta svg{width:16px;height:16px;flex:none;color:var(--gold-l)}
.spromo-item:hover .spromo-cta,.spromo-item:focus-visible .spromo-cta{transform:none}
@media (hover:none){.spromo-cta{transform:none}}

/* Thương hiệu */
.sbrands{background:#fff;padding-block:clamp(56px,7vw,100px)}
.brand-row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.brand{margin:0;aspect-ratio:3/2;position:relative;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.4s var(--ease);overflow:hidden}
.brand:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.brand img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain}

/* Khách hàng thực tế (nền navy dùng .doctor) */
.sresults .sec-head{position:relative}
.res-grid{columns:3;column-gap:20px;position:relative}
.res-grid.wide{columns:2}
.res{margin:0 0 20px;break-inside:avoid;border-radius:20px;overflow:hidden;box-shadow:0 30px 50px -30px rgba(0,0,0,.6);background:#10205a}
.res img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
.res:hover img{transform:scale(1.04)}
.res-cta{position:relative;text-align:center;margin-top:clamp(28px,4vw,48px)}

/* Dịch vụ khác */
.sother{background:var(--ivory)}
.xlinks{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.xlink{display:flex;align-items:center;gap:1.4rem;padding:16px 22px 16px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:.45s var(--ease)}
.xlink:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.xlink img{width:150px;height:120px;object-fit:cover;border-radius:16px;flex:none}
.xlink span{flex:1;display:grid;gap:.2rem}
.xlink small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-d)}
.xlink b{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1.2}
.xlink .arrow{background:var(--ink);color:var(--gold-l);font-style:normal;flex:none}
.xlink:hover .arrow{background:var(--gold);color:var(--ink);transform:rotate(-45deg)}

/* 3 dịch vụ khác: 3 cột, thẻ gọn */
.xlinks.n3{grid-template-columns:repeat(3,1fr);gap:18px}
.xlinks.n3 .xlink{gap:1rem;padding:14px 18px 14px 14px}
.xlinks.n3 .xlink img{width:96px;height:80px}
.xlinks.n3 .xlink b{font-size:1.2rem}
.xlinks.n3 .xlink small{font-size:.66rem;letter-spacing:.12em}
.xlinks.n3 .xlink .arrow{width:40px;height:40px}

@media (max-width:1080px){
  .xlinks.n3{grid-template-columns:1fr}
  .sfeat,.spromo-grid{grid-template-columns:1fr 1fr}
  .pgrid.c4{grid-template-columns:1fr 1fr}
  .brand-row{grid-template-columns:repeat(3,1fr)}
  .res-grid{columns:2}
}
@media (max-width:680px){
  .sfeat,.pgrid.c4,.xlinks{grid-template-columns:1fr}
  .spromo-grid{gap:12px}
  .brand-row{grid-template-columns:repeat(2,1fr);gap:12px}
  .res-grid,.res-grid.wide{columns:1}
  .xlink img{width:110px;height:90px}
  .xlink b{font-size:1.25rem}
}