/* /lop-hoc.html — page styles (scoped to .p-programs) */

/* sticky in-page sub-nav */
.p-programs .cx-subnav{ position:sticky; top:var(--cx-head, 0px); z-index:50; background:rgba(246,239,230,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; }
.p-programs .cx-subnav.is-stuck{ border-bottom-color:var(--ta-line-2); box-shadow:0 8px 18px rgba(60,20,10,.08); }
.p-programs .cx-subnav__chips{ padding:10px 2px; }
.p-programs .cx-subnav .ta-chip{ background:#fff; text-decoration:none; }
.p-programs .cx-subnav .ta-chip[aria-current="true"]{ background:var(--ta-maroon-600); border-color:var(--ta-maroon-600); color:#fff; }
.p-programs .cx-subnav__cta{ background:var(--ta-buy) !important; border-color:var(--ta-buy) !important; color:#fff !important; }
.p-programs .cx-subnav__cta .ta-ico{ width:14px; height:14px; }

/* why strip */
.p-programs .cx-why{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:600px){ .p-programs .cx-why{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .p-programs .cx-why{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } }
.p-programs .cx-why li{ display:flex; align-items:center; gap:12px; padding:14px; background:#fff; border:1px solid #EFE6DC; border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-card); }
.p-programs .cx-why__ico{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#4A2A00; background:var(--ta-g-gold); box-shadow:var(--ta-sh-gold); }
.p-programs .cx-why__ico .ta-ico{ width:21px; height:21px; }
.p-programs .cx-why b{ display:block; font-size:14px; font-weight:800; color:var(--ta-text); }
.p-programs .cx-why small{ display:block; font-size:12.5px; color:var(--ta-muted); line-height:1.4; }

/* program cards: 3 + 2 composition */
.p-programs .cx-progrid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .p-programs .cx-progrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .p-programs .cx-progrid > :last-child:nth-child(odd){ grid-column:1 / -1; } .p-programs .cx-progrid > :last-child:nth-child(odd) .ta-program__media{ aspect-ratio:21/9; } }
@media (min-width:1024px){
  .p-programs .cx-progrid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
  .p-programs .cx-progrid > *{ grid-column:span 2; }
  .p-programs .cx-progrid > :nth-child(4), .p-programs .cx-progrid > :nth-child(5){ grid-column:span 3; }
  .p-programs .cx-progrid > :nth-child(4) .ta-program__media, .p-programs .cx-progrid > :nth-child(5) .ta-program__media{ aspect-ratio:16/8; }
  .p-programs .cx-progrid > :last-child:nth-child(odd){ grid-column:span 3; }
}
.p-programs .cx-progrid .ta-program__ph{ display:grid; place-items:center; }
.p-programs .cx-progrid .ta-program__ph::after{ content:"Mỗi con một nhịp riêng"; font-family:var(--ta-font-script); font-size:34px; color:#FFD27A; text-shadow:0 2px 8px rgba(0,0,0,.35); }

/* program detail sections */
.p-programs .cx-progs{ margin-top:var(--ta-sec-gap); display:grid; gap:22px; }
.p-programs .cx-prog__card{ position:relative; overflow:hidden; background:#fff; border:1px solid #EFE6DC; border-radius:24px; box-shadow:0 16px 40px rgba(60,20,10,.08); padding:20px 16px; }
.p-programs .cx-prog__card::before{ content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg, var(--ta-maroon-600), var(--ta-red) 45%, var(--ta-gold-500)); }
@media (min-width:768px){ .p-programs .cx-prog__card{ padding:28px 28px 30px; } }
.p-programs .cx-prog__head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.p-programs .cx-prog__num{ flex:0 0 auto; font-family:var(--ta-font-display); font-weight:900; font-size:46px; line-height:.95; background:var(--ta-g-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.p-programs .cx-prog__headtxt{ min-width:0; }
.p-programs .cx-prog__title{ margin-top:2px; font-family:var(--ta-font-title); font-weight:700; font-size:clamp(22px, 1rem + 1.1vw, 30px); line-height:1.2; color:var(--ta-maroon-500); text-wrap:balance; }
.p-programs .cx-prog__lead{ margin-top:6px; max-width:70ch; font-size:15px; line-height:1.6; color:var(--ta-text-2); }
@media (min-width:768px){ .p-programs .cx-prog__num{ font-size:64px; } }
.p-programs .cx-prog__grid{ display:grid; gap:22px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){
  .p-programs .cx-prog__grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:34px; align-items:start; }
  .p-programs .cx-prog--flip .cx-prog__media{ order:-1; }
  .p-programs .cx-prog__media{ position:sticky; top:calc(var(--cx-head, 128px) + 70px); }
}
.p-programs .cx-prog__info{ display:grid; gap:18px; min-width:0; }
.p-programs .cx-prog__h{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--ta-maroon-600); }
.p-programs .cx-prog__h .ta-ico{ width:17px; height:17px; color:var(--ta-red); }
.p-programs .cx-prog__who{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.p-programs .cx-prog__who .ta-chip{ font-size:12.5px; padding:5px 12px; }
.p-programs .cx-prog__who .cx-tbc{ margin-left:0; }
.p-programs .cx-prog__learn{ grid-template-columns:1fr; }
@media (min-width:600px){ .p-programs .cx-prog__learn{ grid-template-columns:1fr 1fr; gap:9px 18px; } }
.p-programs .cx-prog__tbc{ margin-top:8px; font-size:12.5px; color:var(--ta-muted); }

/* lộ trình: horizontal on wide screens */
.p-programs .cx-path{ list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:cxp; }
.p-programs .cx-path li{ position:relative; counter-increment:cxp; display:grid; gap:2px; padding:12px 12px 12px 52px; border-radius:var(--ta-r-lg); background:#FFFBF4; border:1px solid #F0E2CC; }
.p-programs .cx-path li::before{ content:counter(cxp); position:absolute; left:12px; top:12px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-family:var(--ta-font-display); font-weight:900; font-size:15px; color:#4A2A00; background:var(--ta-g-gold); box-shadow:var(--ta-sh-gold); }
.p-programs .cx-path b{ font-size:14px; color:var(--ta-text); }
.p-programs .cx-path span{ font-size:12.5px; line-height:1.5; color:var(--ta-muted); }
@media (min-width:600px){ .p-programs .cx-path{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){
  .p-programs .cx-path{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .p-programs .cx-path li{ padding:46px 10px 12px; text-align:center; justify-items:center; }
  .p-programs .cx-path li::before{ left:50%; transform:translateX(-50%); top:10px; }
  .p-programs .cx-path li:not(:last-child)::after{ content:""; position:absolute; top:24px; right:-9px; width:10px; height:2px; background:#E9C97F; }
}

.p-programs .cx-prog__facts{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:600px){ .p-programs .cx-prog__facts{ grid-template-columns:1fr 1fr; } }
.p-programs .cx-prog__fact{ display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:var(--ta-r-lg); border:1px dashed #E2CFB3; background:#fff; }
.p-programs .cx-prog__factico{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--ta-rose-50); color:var(--ta-red); border:1px solid var(--ta-rose-200); }
.p-programs .cx-prog__factico .ta-ico{ width:17px; height:17px; }
.p-programs .cx-prog__fact small{ display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ta-muted); }
.p-programs .cx-prog__fact b{ display:block; font-size:13.5px; line-height:1.4; color:var(--ta-text); margin:2px 0 4px; }
.p-programs .cx-prog__fact .cx-tbc{ margin-left:0; }

/* next sessions inside a program */
.p-programs .cx-prog__events{ display:grid; gap:8px; }
.p-programs .cx-prog__evtitle{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--ta-maroon-600); }
.p-programs .cx-prog__evtitle .ta-ico{ width:15px; height:15px; color:var(--ta-red); }
.p-programs .cx-prog__ev{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 12px; align-items:center; padding:10px 12px; border-radius:var(--ta-r-lg); background:linear-gradient(90deg,#FFF6E3,#FFFDF8); border:1px solid #F1DDB4; }
.p-programs .cx-prog__ev .ta-btn{ grid-column:1 / -1; }
@media (min-width:600px){ .p-programs .cx-prog__ev{ grid-template-columns:auto minmax(0,1fr) auto; } .p-programs .cx-prog__ev .ta-btn{ grid-column:auto; } }
.p-programs .cx-prog__evdate{ display:grid; justify-items:center; width:50px; padding:5px 0; border-radius:10px; font-size:10px; font-weight:900; text-transform:uppercase; color:#4A2A00; background:var(--ta-g-gold); box-shadow:var(--ta-sh-gold); line-height:1.1; }
.p-programs .cx-prog__evdate b{ font-family:var(--ta-font-display); font-size:20px; }
.p-programs .cx-prog__evtxt{ display:grid; gap:3px; justify-items:start; min-width:0; }
.p-programs .cx-prog__evtxt b{ font-size:13.5px; line-height:1.35; }
.p-programs .cx-prog__evtxt small{ font-size:12px; color:var(--ta-muted); }
.p-programs .cx-prog__evnone{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ta-muted); }
.p-programs .cx-prog__evnone .ta-ico{ width:16px; height:16px; margin-top:2px; color:var(--ta-red); flex:0 0 auto; }
.p-programs .cx-prog__evnone a{ color:var(--ta-maroon-500); font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.p-programs .cx-prog__ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.p-programs .cx-prog__ctas .ta-btn{ flex:1 1 200px; }
.p-programs .cx-prog__ctas .ta-ico{ width:17px; height:17px; }
@media (min-width:1024px){ .p-programs .cx-prog__ctas .ta-btn{ flex:0 0 auto; } }

/* photo collage */
.p-programs .cx-prog__media{ display:grid; gap:12px; min-width:0; }
.p-programs .cx-collage{ position:relative; padding:0 0 64px; }
.p-programs .cx-collage__main{ margin:0; position:relative; border-radius:22px; overflow:hidden; box-shadow:0 18px 34px rgba(60,20,10,.18); border:5px solid #fff; outline:3px solid var(--ta-gold-300); }
.p-programs .cx-collage__main img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:50% 35%; }
.p-programs .cx-collage__main figcaption{ position:absolute; left:12px; top:12px; padding:4px 12px; border-radius:99px; background:rgba(255,255,255,.92); font-family:var(--ta-font-hand); font-weight:700; font-size:17px; color:var(--ta-maroon-500); }
.p-programs .cx-collage .ta-photo{ position:absolute; bottom:0; width:38%; }
.p-programs .cx-collage .ta-photo img{ aspect-ratio:1; }
.p-programs .cx-collage__p1{ left:4%; transform:rotate(-5deg); }
.p-programs .cx-collage__p2{ right:4%; transform:rotate(4deg); }
.p-programs .cx-collage .ta-photo figcaption{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-programs .cx-prog__photonote{ display:flex; gap:6px; align-items:flex-start; font-size:12px; color:var(--ta-muted); margin-top:6px; }
.p-programs .cx-prog__photonote .ta-ico{ width:14px; height:14px; margin-top:1px; color:var(--ta-gold-700); flex:0 0 auto; }
.p-programs .cx-prog__skills{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.p-programs .cx-prog__skills span{ padding:6px 12px; border-radius:99px; font-size:12px; font-weight:800; color:var(--ta-maroon-600); background:linear-gradient(180deg,#fff,#FFF5E6); border:1px solid #F0D9AE; }

/* special-needs illustrated panel */
.p-programs .cx-special{ position:relative; border-radius:24px; padding:22px; background:var(--ta-tx-seigaiha), radial-gradient(120% 140% at 100% 0%, #9B1D22 0%, #6A1015 55%, #4E0B0F 100%); background-size:36px 18px, auto; box-shadow:0 18px 34px rgba(60,20,10,.2); }
.p-programs .cx-special::after{ content:""; position:absolute; right:14px; top:12px; width:54px; height:54px; background:var(--ta-ic-blossom-gold) center/contain no-repeat; opacity:.9; }
.p-programs .cx-special__sheet{ display:grid; justify-items:center; gap:12px; padding:30px 18px 26px; border-radius:16px; transform:rotate(-1.5deg); box-shadow:0 14px 30px rgba(0,0,0,.3);
  background:
    linear-gradient(90deg, transparent 34px, rgba(230,70,90,.5) 34px 35px, transparent 35px),
    repeating-linear-gradient(0deg, rgba(124,140,220,.25) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(124,140,220,.2) 0 1px, transparent 1px 14px), #fff; }
.p-programs .cx-special__k{ font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--ta-gold-700); background:#fff; padding:2px 8px; border-radius:6px; }
.p-programs .cx-special__script{ font-family:var(--ta-font-script); font-size:clamp(34px, 1rem + 2.6vw, 50px); line-height:1.1; color:var(--ta-maroon-500); text-align:center; }
.p-programs .cx-special__row{ display:flex; gap:10px; }
.p-programs .cx-special__row i{ width:54px; height:54px; display:grid; place-items:center; border:1.5px solid rgba(124,140,220,.6); border-radius:6px; background:rgba(255,255,255,.7); font-family:var(--ta-font-hand); font-style:normal; font-weight:700; font-size:34px; color:#2B4FC9; }
.p-programs .cx-special__row i.is-heart{ color:var(--ta-red); }
.p-programs .cx-special__row .ta-ico{ width:28px; height:28px; }
.p-programs .cx-special__line{ font-family:var(--ta-font-hand); font-weight:700; font-size:20px; color:#D22322; text-align:center; }

/* học phí */
.p-programs .cx-fee__card{ display:grid; gap:20px; padding:22px 18px; border-radius:24px; background:#fff; border:1px solid #EFE6DC; box-shadow:0 14px 34px rgba(60,20,10,.08); }
.p-programs .cx-fee__list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.p-programs .cx-fee__list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--ta-text-2); }
.p-programs .cx-fee__list .ta-ico{ width:18px; height:18px; margin-top:2px; color:var(--ta-red); flex:0 0 auto; }
.p-programs .cx-fee .cx-lead a{ color:var(--ta-buy); }
.p-programs .cx-fee__aside{ display:grid; gap:10px; align-content:start; padding:20px; border-radius:20px; color:#fff; text-align:center; background:var(--ta-tx-seigaiha), radial-gradient(120% 140% at 0% 0%, #A3151C, #5F0F13); background-size:36px 18px, auto; }
.p-programs .cx-fee__script{ font-family:var(--ta-font-script); font-size:36px; line-height:1; color:#FFD27A; }
.p-programs .cx-fee__phone a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ta-font-display); font-weight:900; font-size:28px; color:#fff; }
.p-programs .cx-fee__phone .ta-ico{ width:24px; height:24px; color:#FFD27A; }
.p-programs .cx-fee__hours{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; font-size:13px; color:rgba(255,246,225,.9); }
.p-programs .cx-fee__hours .ta-ico{ width:14px; height:14px; }
.p-programs .cx-fee__aside .ta-ico{ width:17px; height:17px; }
@media (min-width:960px){ .p-programs .cx-fee__card{ grid-template-columns:minmax(0,1fr) 340px; padding:30px; gap:34px; align-items:center; } }

/* lịch box */
.p-programs .cx-boxlink{ display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:12.5px; font-weight:800; }
.p-programs .cx-boxlink .ta-ico{ width:14px; height:14px; }
.p-programs .cx-lich__type{ display:block; margin-bottom:4px; }
.p-programs .cx-lich__prog{ display:block; font-size:12px; color:var(--ta-muted); margin-top:2px; }
.p-programs #cx-lich > .ta-skel-lines{ padding:16px; }
.p-programs .cx-lich__empty{ display:grid; justify-items:center; gap:10px; padding:28px 16px; text-align:center; color:var(--ta-text-2); }
.p-programs .cx-lich__empty > .ta-ico{ width:34px; height:34px; color:var(--ta-red); }

/* trial split */
.p-programs .cx-trial__lead{ margin:-4px 0 14px; font-size:14px; color:var(--ta-text-2); }
.p-programs .cx-trial__aside{ display:grid; align-content:start; gap:6px; }
.p-programs .cx-trial__ctas{ display:grid; gap:10px; margin-top:10px; max-width:360px; width:100%; justify-self:center; }
.p-programs .cx-trial__ctas .ta-ico{ width:17px; height:17px; }
.p-programs .cx-trial__note{ margin-top:10px; font-size:12.5px; color:var(--ta-text-2); text-align:center; }
.p-programs .cx-nexttrial{ margin:4px auto 6px; max-width:360px; width:100%; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid #EAD6B0; box-shadow:0 8px 18px rgba(120,70,20,.1); }
.p-programs .cx-nexttrial__k{ font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--ta-gold-700); }
.p-programs .cx-nexttrial__t{ margin-top:3px; font-weight:800; font-size:14.5px; color:var(--ta-text); }
.p-programs .cx-nexttrial__f{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap; }

/* FAQ */
.p-programs .cx-faqsec{ display:grid; gap:18px; }
@media (min-width:1024px){ .p-programs .cx-faqsec{ grid-template-columns:340px minmax(0,1fr); gap:32px; align-items:start; } .p-programs .cx-faqsec__head{ position:sticky; top:calc(var(--cx-head, 128px) + 70px); } }
.p-programs .cx-faqsec__card{ margin-top:6px; }
.p-programs .cx-faqsec__addr{ display:flex; gap:8px; align-items:flex-start; font-size:14px; margin-bottom:8px; }
.p-programs .cx-faqsec__addr .ta-ico{ width:16px; height:16px; margin-top:2px; color:var(--ta-red); flex:0 0 auto; }
.p-programs .cx-faqsec__addr a{ font-weight:800; color:var(--ta-text); }
.p-programs .cx-faqsec__btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.p-programs .cx-faqsec__btns .ta-ico{ width:15px; height:15px; }
.p-programs .cx-faq .ta-acc__body a{ color:var(--ta-maroon-500); font-weight:800; text-decoration:underline; text-underline-offset:2px; }

/* compact program index (phones) — the big cards show from 600px */
.p-programs .cx-progidx{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.p-programs .cx-progidx a{ display:grid; grid-template-columns:76px minmax(0,1fr) 18px; gap:12px; align-items:center; padding:8px 12px 8px 8px; background:#fff; border:1px solid #EFE6DC; border-radius:16px; box-shadow:var(--ta-sh-card); color:var(--ta-text); }
.p-programs .cx-progidx__media{ position:relative; width:76px; height:64px; border-radius:12px; overflow:hidden; background:var(--ta-tx-seigaiha), var(--ta-g-header); background-size:36px 18px, auto; }
.p-programs .cx-progidx__media img{ width:100%; height:100%; object-fit:cover; }
.p-programs .cx-progidx__media b{ position:absolute; right:5px; bottom:1px; font-family:var(--ta-font-display); font-weight:900; font-size:22px; color:#FFE7A3; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.p-programs .cx-progidx__ph{ display:grid; place-items:center; width:100%; height:100%; color:#FFD27A; }
.p-programs .cx-progidx__ph .ta-ico{ width:24px; height:24px; }
.p-programs .cx-progidx__txt{ display:grid; gap:2px; min-width:0; }
.p-programs .cx-progidx__txt strong{ font-family:var(--ta-font-title); font-size:16px; line-height:1.25; color:var(--ta-maroon-500); }
.p-programs .cx-progidx__txt small{ font-size:12px; color:var(--ta-muted); }
.p-programs .cx-progidx > li > a > .ta-ico{ width:18px; height:18px; color:var(--ta-maroon-500); }
@media (max-width:599px){ .p-programs .cx-progrid{ display:none; } }
@media (min-width:600px){ .p-programs .cx-progidx{ display:none; } }
.p-programs .cx-prog__factlink{ font-size:12px; font-weight:800; color:var(--ta-maroon-500); text-decoration:underline; text-underline-offset:2px; }

/* phones: denser why-strip and lộ trình */
@media (max-width:599px){
  .p-programs .cx-why{ grid-template-columns:1fr 1fr; gap:8px; }
  .p-programs .cx-why li{ flex-direction:column; align-items:flex-start; gap:8px; padding:12px; }
  .p-programs .cx-why__ico{ width:36px; height:36px; }
  .p-programs .cx-why__ico .ta-ico{ width:17px; height:17px; }
  .p-programs .cx-why b{ font-size:13px; line-height:1.3; }
  .p-programs .cx-why small{ font-size:11.5px; }
  .p-programs .cx-path{ grid-template-columns:1fr 1fr; gap:8px; }
  .p-programs .cx-path li{ padding:10px 10px 10px 10px; gap:4px; }
  .p-programs .cx-path li::before{ position:static; width:26px; height:26px; font-size:13px; margin-bottom:2px; }
  .p-programs .cx-path b{ font-size:13px; line-height:1.3; }
  .p-programs .cx-path span{ font-size:12px; }
  .p-programs .cx-prog__card{ padding:18px 14px 20px; border-radius:20px; }
  .p-programs .cx-prog__head{ gap:10px; margin-bottom:14px; }
  .p-programs .cx-prog__num{ font-size:38px; }
  .p-programs .cx-prog__lead{ font-size:14px; }
  .p-programs .cx-collage{ padding-bottom:48px; }
  .p-programs .cx-collage .ta-photo{ width:40%; }
}