/* =========================================================
   IRON Gym — style.css
   Phong cách: năng lượng, tương phản mạnh. Đen + lime neon, chữ nghiêng
   khổng lồ, góc vát, đường kẻ dày.
   Bố cục khác các mẫu trước:
     - Header đen mỏng có nút lime vát góc; menu chữ hoa
     - Hero ảnh tối + CHỮ NGHIÊNG KHỔNG LỒ 3 dòng đè, thanh số liệu dưới
     - Marquee lime chạy
     - Lớp học: LỊCH TUẦN dạng LƯỚI GIỜ × NGÀY (bảng thời khóa biểu)
     - Gói tập: 3 card đen có góc vát, gói giữa lime
     - HLV: lưới 4 ảnh vuông đen trắng, hover đổi màu + hiện chuyên môn
     - Không gian: dải ảnh nghiêng (skew)
     - Đăng ký: form trên nền lime
   Ảnh: mỗi khối ảnh dùng biến --img trên thẻ HTML (đường dẫn ../images/…).
   ========================================================= */

:root{
  --black:#0A0A0A;
  --black-2:#141414;
  --black-3:#1F1F1F;
  --lime:#C6FF00;
  --lime-deep:#A8D900;
  --white:#fff;
  --gray:#9A9A9A;
  --line:#2A2A2A;
  --cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  --ph:linear-gradient(135deg,#2A2A2A 0%,#1A1A1A 55%,#111 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;color:var(--white);background:var(--black);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ph{background:var(--img,var(--ph)) center/cover no-repeat,var(--ph)}
.container{width:min(1240px,100% - 40px);margin-inline:auto}
h1,h2,h3,h4{font-family:'Barlow Condensed','Oswald',Impact,sans-serif;font-weight:800;line-height:.95;text-transform:uppercase;letter-spacing:.01em}
.up{font-size:11.5px;letter-spacing:3px;text-transform:uppercase;font-weight:700}
b,strong{font-weight:700}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:1px;transition:.15s;white-space:nowrap;clip-path:var(--cut)}
.btn svg{width:18px;height:18px}
.btn--lime{background:var(--lime);color:var(--black)}
.btn--lime:hover{background:var(--lime-deep)}
.btn--white{background:#fff;color:var(--black)}
.btn--white:hover{background:var(--lime)}
.btn--line{box-shadow:inset 0 0 0 2px #fff;color:#fff}
.btn--line:hover{background:#fff;color:var(--black)}
.btn--black{background:var(--black);color:var(--lime)}
.btn--black:hover{background:var(--black-3)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;gap:30px;min-height:70px}
.logo{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:30px;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.logo i{width:14px;height:28px;background:var(--lime);display:inline-block;transform:skewX(-14deg)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav__link{padding:8px 14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:1px;color:var(--gray);transition:.15s}
.nav__link:hover,.nav__link.is-active{color:var(--lime)}
.burger{display:none;width:42px;height:42px;place-items:center;background:var(--black-3)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92vh,820px);display:flex;align-items:flex-end;overflow:hidden}
.hero .ph{position:absolute;inset:0;filter:grayscale(.4) contrast(1.1)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.3),rgba(10,10,10,.85) 90%)}
.hero__in{position:relative;z-index:1;width:100%;padding:100px 0 0}
.hero h1{font-size:clamp(72px,14vw,200px);font-style:italic;letter-spacing:-.02em}
.hero h1 span{display:block}
.hero h1 .o{-webkit-text-stroke:2px #fff;color:transparent}
.hero h1 .l{color:var(--lime)}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:20px;flex-wrap:wrap}
.hero__row p{max-width:460px;color:var(--gray);font-size:16px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--lime);margin-top:50px;background:var(--black)}
.hero__stats div{padding:24px 20px;border-right:1px solid var(--line)}
.hero__stats div:last-child{border-right:0}
.hero__stats b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:800;color:var(--lime);line-height:1}
.hero__stats span{font-size:12.5px;color:var(--gray);text-transform:uppercase;letter-spacing:1.5px}

/* ---------- Marquee ---------- */
.marq{background:var(--lime);color:var(--black);overflow:hidden;white-space:nowrap;padding:12px 0;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:2px;transform:skewY(-1.2deg);margin:40px 0}
.marq__track{display:inline-block;animation:marq 30s linear infinite}
.marq__track span{margin:0 30px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Section ---------- */
.section{padding:90px 0}
.section--dark{background:var(--black-2)}
.section--lime{background:var(--lime);color:var(--black)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px;flex-wrap:wrap}
.section__title{font-size:clamp(44px,6.5vw,88px)}
.section__title em{font-style:italic;color:var(--lime)}
.section--lime .section__title em{color:var(--black);-webkit-text-stroke:2px var(--black);color:transparent}
.section__head p{color:var(--gray);max-width:440px}
.section--lime .section__head p{color:rgba(10,10,10,.7)}
.section__head .up{color:var(--lime)}
.section--lime .section__head .up{color:var(--black)}

/* ---------- Lớp học: cards ---------- */
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cls{position:relative;aspect-ratio:4/5;clip-path:var(--cut);overflow:hidden;display:flex;align-items:flex-end;padding:24px}
.cls .ph{position:absolute;inset:0;transition:.4s;filter:grayscale(1)}
.cls:hover .ph{filter:none;transform:scale(1.04)}
.cls::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.9))}
.cls div{position:relative;z-index:1}
.cls h3{font-size:36px}
.cls small{color:var(--lime);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.cls p{color:var(--gray);font-size:13.5px;margin-top:6px}
.cls__lv{position:absolute;top:18px;left:18px;z-index:1;background:var(--lime);color:var(--black);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px}

/* ---------- Lịch tuần: lưới giờ × ngày ---------- */
.sched{overflow-x:auto}
.sched table{width:100%;min-width:900px;border-collapse:collapse;font-size:13px}
.sched th{background:var(--black-3);padding:14px 10px;font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:1px;border:1px solid var(--line)}
.sched th:first-child{width:90px;color:var(--lime)}
.sched td{border:1px solid var(--line);padding:6px;vertical-align:top;height:70px}
.sched td:first-child{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--gray);text-align:center;vertical-align:middle;background:var(--black-2)}
.slot{display:block;padding:8px 10px;border-left:3px solid var(--lime);background:var(--black-3);height:100%}
.slot b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:.5px}
.slot small{color:var(--gray);font-size:11.5px}
.slot--hiit{border-color:#FF3D3D}.slot--yoga{border-color:#7CE0FF}.slot--box{border-color:#FFB800}.slot--spin{border-color:#FF6BFF}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--gray)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;display:inline-block}

/* ---------- Gói tập ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:var(--black-3);clip-path:var(--cut);padding:36px 32px;display:flex;flex-direction:column;position:relative}
.plan--hot{background:var(--lime);color:var(--black)}
.plan .up{color:var(--lime)}
.plan--hot .up{color:var(--black)}
.plan h3{font-size:44px;margin-top:8px}
.plan .price{font-family:'Barlow Condensed',sans-serif;font-size:56px;font-weight:800;line-height:1;margin:18px 0 4px}
.plan .price small{font-family:'Be Vietnam Pro',sans-serif;font-size:14px;font-weight:400;color:var(--gray)}
.plan--hot .price small{color:rgba(10,10,10,.6)}
.plan .per{font-size:13px;color:var(--gray)}
.plan--hot .per{color:rgba(10,10,10,.6)}
.plan ul{list-style:none;margin:26px 0 30px;display:grid;gap:10px;font-size:14px}
.plan li{display:flex;gap:10px}
.plan li svg{color:var(--lime);width:18px;height:18px}
.plan--hot li svg{color:var(--black)}
.plan li.off{color:var(--gray);text-decoration:line-through}
.plan .btn{margin-top:auto;width:100%}
.plan--hot .btn{background:var(--black);color:var(--lime)}

/* ---------- HLV ---------- */
.coaches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.coach{position:relative;aspect-ratio:1;overflow:hidden;clip-path:var(--cut)}
.coach .ph{position:absolute;inset:0;filter:grayscale(1);transition:.4s}
.coach:hover .ph{filter:none}
.coach div{position:absolute;left:0;right:0;bottom:0;padding:50px 18px 18px;background:linear-gradient(180deg,transparent,rgba(10,10,10,.95))}
.coach b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px;text-transform:uppercase;line-height:1}
.coach small{color:var(--lime);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.coach p{font-size:12.5px;color:var(--gray);margin-top:6px;max-height:0;overflow:hidden;transition:.3s}
.coach:hover p{max-height:60px}

/* ---------- Dải ảnh nghiêng ---------- */
.skew{transform:skewY(-3deg);overflow:hidden;margin:30px 0}
.skew__in{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;transform:skewY(3deg) scale(1.08)}
.skew__in .ph{aspect-ratio:4/3;filter:grayscale(.6)}
.skew__in .ph:nth-child(even){margin-top:30px}

/* ---------- Đăng ký ---------- */
.join{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.join h2{font-size:clamp(48px,7vw,96px)}
.join p{margin-top:14px;font-size:16px;color:rgba(10,10,10,.75)}
.form{background:var(--black);color:#fff;padding:34px;clip-path:var(--cut)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);font-weight:700}
.field input,.field select,.field textarea{background:var(--black-3);border:1px solid var(--line);color:#fff;padding:12px 14px;font:inherit;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime)}
.field select option{color:var(--text,#000)}
.field textarea{min-height:90px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{padding:9px 14px;border:1px solid var(--line);font-size:13px;cursor:pointer;display:flex;gap:8px;align-items:center;background:var(--black-3)}
.chips input{accent-color:var(--lime)}

/* ---------- Trang con ---------- */
.pagehead{position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden}
.pagehead .ph{position:absolute;inset:0;filter:grayscale(.6)}
.pagehead::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.4),rgba(10,10,10,.9))}
.pagehead__in{position:relative;z-index:1;width:100%;padding:60px 0 40px}
.pagehead h1{font-size:clamp(60px,10vw,140px);font-style:italic}
.pagehead p{color:var(--gray);max-width:560px;margin-top:10px}
.crumbs{display:flex;gap:10px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:14px;font-weight:700}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}
.contact__list{display:grid;gap:18px;margin-top:24px}
.contact__list b{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--lime);font-weight:700}
.contact__list span{color:var(--gray)}
.faq details{border:1px solid var(--line);padding:16px 20px;margin-bottom:10px;background:var(--black-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:var(--lime)}
.faq p{color:var(--gray);margin-top:10px;font-size:14px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:60px 0 0;background:var(--black)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.footer__col p{color:var(--gray);font-size:13.5px;margin-top:14px;max-width:300px}
.footer__col h4{font-size:16px;letter-spacing:2px;color:var(--lime);margin-bottom:16px}
.footer__col a{display:block;padding:4px 0;font-size:14px;color:var(--gray)}
.footer__col a:hover{color:#fff}
.footer__bar{margin-top:50px;border-top:1px solid var(--line);padding:18px 0;font-size:12.5px;color:var(--gray);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.coaches{grid-template-columns:repeat(2,1fr)}.footer__grid{grid-template-columns:1fr 1fr}.skew__in{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){
  .nav{display:none}
  .nav.is-open{display:flex;position:fixed;inset:70px 0 auto 0;flex-direction:column;background:var(--black);border-bottom:1px solid var(--line);padding:12px 20px 20px;z-index:60}
  .nav.is-open .nav__link{padding:12px 0;border-bottom:1px solid var(--line)}
  .burger{display:grid;margin-left:auto}
  .header .btn{display:none}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .hero__stats div:nth-child(2){border-right:0}
  .classes,.plans{grid-template-columns:1fr}
  .join,.contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .container{width:min(1240px,100% - 32px)}
  .section{padding:60px 0}
  .coaches{grid-template-columns:1fr 1fr}
  .form__grid{grid-template-columns:1fr}
  .form{padding:24px}
  .footer__grid{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr}
  .hero__stats div{border-right:0;border-bottom:1px solid var(--line)}
  .hero__in{padding-top:60px}
}