/* ============================================================
   Thảo Điền Spa — CSS riêng cho TRANG GIỚI THIỆU (about.php)
   Story, Stats, Values, Team
   ============================================================ */

/* Story */
.story{background:var(--paper);padding:88px 0}
.story .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
.story-img{position:relative}
.story-img .main-img{border-radius:200px 200px 18px 18px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.story-img .main-img img{width:100%;height:100%;object-fit:cover}
.story-img .badge{position:absolute;bottom:-20px;right:-20px;background:var(--paper);border-radius:16px;padding:18px 22px;box-shadow:var(--shadow);border:1px solid var(--line);text-align:center}
.story-img .badge .num{font-family:var(--sans);font-size:2.4rem;font-weight:700;color:var(--leaf-deep);line-height:1;letter-spacing:-.03em}
.story-img .badge .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.story-text h2{font-size:clamp(2rem,3.6vw,2.9rem);color:var(--leaf-dark);margin:14px 0 22px}
.story-text p{color:var(--ink-soft);margin-bottom:16px;max-width:48ch}
.story-text p:last-of-type{margin-bottom:0}
@media(max-width:880px){.story .wrap{grid-template-columns:1fr;gap:44px}.story-img{max-width:400px;margin:0 auto}.story-img .badge{right:0}}

/* Stats band */
.stats{background:linear-gradient(135deg,var(--leaf-dark),var(--leaf-darker));padding:64px 0;text-align:center}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.stats-grid::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E");pointer-events:none}
.stat-item{padding:10px 20px;position:relative}
.stat-item+.stat-item::before{content:"";position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.12)}
.stat-num{font-family:var(--sans);font-size:2.8rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-.04em}
.stat-num span{font-size:1.6rem;color:var(--gold)}
.stat-lbl{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:8px}
@media(max-width:680px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:32px 0}.stat-item+.stat-item::before{display:none}}

/* Values */
.values{padding:88px 0;background:var(--cream)}
.values .sec-head{text-align:center;max-width:580px;margin:0 auto 56px}
.values .sec-head h2{font-size:clamp(2rem,3.6vw,2.8rem);color:var(--leaf-dark);margin:14px 0 12px}
.values .sec-head p{color:var(--ink-soft)}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.val-card{background:var(--paper);border-radius:18px;padding:36px 28px;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .4s,box-shadow .4s}
.val-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.val-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--leaf),var(--gold))}
.val-ico{width:52px;height:52px;border-radius:14px;background:rgba(124,179,66,.12);display:grid;place-items:center;margin-bottom:20px}
.val-ico svg{width:26px;height:26px;color:var(--leaf-deep)}
.val-card h3{font-size:1.4rem;color:var(--leaf-dark);margin-bottom:10px}
.val-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.65}
@media(max-width:740px){.val-grid{grid-template-columns:1fr;gap:16px}}

/* Team */
.team{background:var(--paper);padding:88px 0}
.team .sec-head{text-align:center;max-width:560px;margin:0 auto 52px}
.team .sec-head h2{font-size:clamp(2rem,3.6vw,2.8rem);color:var(--leaf-dark);margin:14px 0 12px}
.team .sec-head p{color:var(--ink-soft)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.team-card{text-align:center}
.team-card .avatar{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;margin-bottom:18px;box-shadow:0 16px 40px -20px rgba(44,74,31,.4);border:3px solid var(--line)}
.team-card .avatar img{width:100%;height:100%;object-fit:cover}
.team-card h4{font-family:var(--serif);font-size:1.4rem;color:var(--leaf-dark);font-weight:500;margin-bottom:4px}
.team-card .role{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.team-card p{font-size:.86rem;color:var(--ink-soft);margin-top:10px;max-width:22ch;margin-left:auto;margin-right:auto}
@media(max-width:740px){.team-grid{grid-template-columns:1fr;max-width:320px;margin:0 auto}}