/* ============================================================
   Thảo Điền Spa — CSS riêng cho TRANG CHỦ (index.php)
   Hero, About, Services, Experience, Gallery, Contact
   ============================================================ */

/* ---------- Hero ---------- */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 15%,rgba(124,179,66,.16),transparent 55%),
    radial-gradient(90% 80% at 12% 90%,rgba(242,183,5,.12),transparent 50%),
    linear-gradient(180deg,var(--cream),var(--cream-2))}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding-top:70px;padding-bottom:80px;position:relative;z-index:3}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-copy h1{font-size:clamp(2.6rem,5.4vw,4.8rem);color:var(--leaf-dark);text-wrap:balance}
.hero-copy h1 em{font-style:italic;color:var(--gold-deep)}
.hero-copy p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:44ch;margin:26px 0 36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:38px;margin-top:46px;flex-wrap:wrap}
.hero-meta .num{font-family:var(--sans);font-size:2.6rem;color:var(--leaf-deep);line-height:1;font-weight:700;letter-spacing:-.03em}
.hero-meta .lbl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}

.hero-visual{position:relative}
.hero-frame{position:relative;border-radius:200px 200px 16px 16px;overflow:hidden;aspect-ratio:3/3.6;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.5)}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(44,74,31,.28))}
.hero-badge{position:absolute;bottom:-26px;left:-26px;background:var(--paper);border-radius:18px;padding:18px 22px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;border:1px solid var(--line)}
.hero-badge .ico{width:42px;height:42px;border-radius:50%;background:rgba(124,179,66,.16);display:grid;place-items:center;flex:none}
.hero-badge .ico svg{width:22px;height:22px;color:var(--leaf-deep)}
.hero-badge b{font-family:var(--serif);font-size:1.05rem;color:var(--ink);display:block;font-weight:600}
.hero-badge small{font-size:.74rem;color:var(--ink-soft);letter-spacing:.02em}
.leaf-deco{position:absolute;z-index:1;opacity:.5;pointer-events:none}
.leaf-deco.d1{top:6%;right:38%;width:120px;color:var(--leaf);animation:sway 9s ease-in-out infinite}
.leaf-deco.d2{bottom:8%;left:2%;width:90px;color:var(--gold);opacity:.4;animation:sway 11s ease-in-out infinite reverse}
@keyframes sway{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-10px)}}

@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:54px;text-align:center}
  .hero-copy .eyebrow,.hero-actions,.hero-meta{justify-content:center}
  .hero-copy p.lead{margin-left:auto;margin-right:auto}
  .hero-visual{max-width:420px;margin:0 auto}
  .leaf-deco{display:none}
}

/* ---------- About ---------- */
.about{background:var(--paper)}
.about .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.about-imgs{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.about-imgs img{border-radius:14px;box-shadow:0 16px 40px -24px rgba(44,74,31,.5);width:100%;height:100%;object-fit:cover}
.about-imgs .tall{grid-row:span 2;aspect-ratio:3/5}
.about-imgs .short{aspect-ratio:3/2.4}
.about-text h2{font-size:clamp(2rem,3.6vw,2.9rem);color:var(--leaf-dark);margin:16px 0 20px}
.about-text p{color:var(--ink-soft);margin-bottom:18px}
.about-list{list-style:none;margin-top:24px;display:grid;gap:14px}
.about-list li{display:flex;gap:13px;align-items:flex-start;font-size:.95rem;color:var(--ink)}
.about-list svg{width:20px;height:20px;color:var(--leaf);flex:none;margin-top:3px}
@media(max-width:880px){.about .wrap{grid-template-columns:1fr;gap:44px}}

/* ---------- Services ---------- */
.services{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc-card{background:var(--paper);border-radius:18px;padding:34px 26px;border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;position:relative;overflow:hidden}
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--leaf),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .4s}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.svc-card:hover::before{transform:scaleX(1)}
.svc-ico{width:56px;height:56px;border-radius:14px;background:rgba(124,179,66,.13);display:grid;place-items:center;margin-bottom:20px;transition:background .4s}
.svc-card:hover .svc-ico{background:rgba(242,183,5,.18)}
.svc-ico svg{width:28px;height:28px;color:var(--leaf-deep)}
.svc-card h3{font-size:1.5rem;color:var(--ink);margin-bottom:8px}
.svc-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.6}
.svc-card .more{display:inline-block;margin-top:16px;font-size:.78rem;letter-spacing:.06em;color:var(--gold-deep);font-weight:500;opacity:0;transform:translateX(-6px);transition:.35s}
.svc-card:hover .more{opacity:1;transform:none}
.svc-card.cta{background:linear-gradient(140deg,var(--leaf-deep),var(--leaf-dark));color:var(--text-on-leaf-soft);display:flex;flex-direction:column;justify-content:center}
.svc-card.cta h3{color:#fff}
.svc-card.cta p{color:rgba(255,255,255,.78)}
.svc-card.cta::before{display:none}
.svc-card.cta:hover{transform:translateY(-8px)}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
@media(max-width:640px){.svc-card{padding:15px}}

/* ---------- Experience band ---------- */
.exp{background:var(--leaf-dark);color:var(--text-on-leaf);text-align:center;position:relative;overflow:hidden}
.exp::before,.exp::after{content:"";position:absolute;border-radius:50%;filter:blur(8px);opacity:.18}
.exp::before{width:300px;height:300px;background:var(--gold);top:-120px;left:-80px}
.exp::after{width:340px;height:340px;background:var(--leaf);bottom:-150px;right:-90px}
.exp .wrap{position:relative;z-index:2}
.exp .eyebrow{color:var(--gold)}
.exp .eyebrow::before{background:var(--gold)}
.exp h2{font-size:clamp(2rem,4vw,3rem);color:#fff;margin:16px auto 18px;max-width:18ch}
.exp p{color:rgba(255,255,255,.8);max-width:56ch;margin:0 auto 34px}
.exp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:54px;text-align:center}
.exp-feats .ef svg{width:34px;height:34px;color:var(--gold);margin-bottom:12px}
.exp-feats .ef h4{font-family:var(--serif);font-size:1.4rem;color:#fff;font-weight:500;margin-bottom:6px}
.exp-feats .ef p{font-size:.86rem;color:rgba(255,255,255,.72);margin:0}
@media(max-width:760px){.exp-feats{grid-template-columns:1fr;gap:34px}}

/* ---------- Gallery ---------- */
.gallery .gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.gal-grid figure{overflow:hidden;border-radius:14px;position:relative;cursor:pointer}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gal-grid figure:hover img{transform:scale(1.08)}
.gal-grid figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(44,74,31,.4));opacity:0;transition:.4s}
.gal-grid figure:hover::after{opacity:1}
.g-wide{grid-column:span 2}
.g-tall{grid-row:span 2}
@media(max-width:760px){.gallery .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.g-wide{grid-column:span 2}.g-tall{grid-row:span 1}}

/* ---------- Contact (trang chủ) ---------- */
.contact{background:var(--paper)}
.contact .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:stretch}
.c-info h2{font-size:clamp(2rem,3.6vw,2.8rem);color:var(--leaf-dark);margin:16px 0 24px}
.c-map{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);min-height:420px;border:1px solid var(--line)}
.c-map iframe{width:100%;height:100%;border:0;min-height:420px;filter:saturate(.92)}
@media(max-width:880px){.contact .wrap{grid-template-columns:1fr;gap:40px}.c-map{min-height:340px}}