:root{
--red: #202B7B;
    --red-deep: #161D58;
    --red-bright: #2E3DA6;
    --hero-deep: #151B55;
    --coral: #5C68C9;
    --blush: #AEB6E4;
    --blush-soft: #EEF0FA;
    --blush-tint: #F6F7FC;
    --cta-soft: #6B76D4;
    --white: #FFFFFF;
    --ink: #141A3B;
    --ink-soft: #474E79;
    --muted: #7A80A8;
    --line: #E2E5F2;
    --bg: #FFFFFF;
    --bg-soft: #F8F9FD;
    --bg-section: #F2F4FA;
    --media-bg: #ECEEF8;
    --media-line: #DEE1F0;
    --media-label: #969CC2;
    --footer-bg: #101536;
    --scrim: rgba(16, 21, 54, .45);
    --scrim-2: rgba(16, 21, 54, .2);
    --scrim-3: rgba(16, 21, 54, .05);
    --scrim-4: rgba(16, 21, 54, .86);
    --glow: rgba(32, 43, 123, .22);
    --glow-strong: rgba(32, 43, 123, .32);
    --font-h1: 'Paytone One', system-ui, sans-serif;
    --font: 'Quicksand', system-ui, sans-serif;
    --max: 1200px;
    --gutter: 40px;
    --header: 80px;
    --r: 16px;
    --r-lg: 24px;
    --r-sm: 10px;
    --sh: 0 8px 28px rgba(16, 21, 54, .06);
    --sh2: 0 14px 40px rgba(16, 21, 54, .1);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --group-green: #2DAA50;
    --group-green-soft: #E4F3E9;
    --group-red: #E51732;
}
.page-id-506{
  --red: #D4151F;
    --red-deep: #A80F17;
    --red-bright: #E61E28;
    --hero-deep: #C4121B;
    --coral: #FF7E74;
    --blush: #FFB5B5;
    --blush-soft: #FFF0EE;
    --blush-tint: #FFF8F7;
    --cta-soft: #F06A62;
    --white: #FFFFFF;
    --ink: #2B1214;
    --ink-soft: #5C3A3D;
    --muted: #8A6A6D;
    --line: #EDE4E4;
    --bg: #FFFFFF;
    --bg-soft: #FCF9F8;
    --bg-section: #FAF6F5;
    --media-bg: #F3EEEC;
    --media-line: #E5DCDA;
    --media-label: #9A8585;
    --glow: rgba(212, 21, 31, .22);
    --glow-strong: rgba(212, 21, 31, .32);
    --sh: 0 8px 28px rgba(43, 18, 20, .06);
    --sh2: 0 14px 40px rgba(43, 18, 20, .1);
}
.page-id-506 .koi-hero-fluent-button1 .koi-consult-open {
  background: var(--red) !important;
}
.head-680 .koi-widget{
      max-width: 680px !important;
}
.page-id-506 .ic {
  
    background: var(--blush-soft);
    color: var(--red);
}
.page-id-506 .icon-li ul li::before {
       background: var(--blush-soft);
}
.page-id-506 .icon-li ul li::after {
   
    background:  var(--red);
}
.page-id-506 .cta{
      background: linear-gradient(120deg, var(--red) 0%, var(--red-bright) 55%, var(--cta-soft) 100%);
    color: #fff;
}
.page-id-506 .cta h2, .page-id-506 .cta .cta-description p{
  color: white !important;
}
.page-id-506 .elementor-widget-koi-cta .koi-consult-open {
    background: #fff !important;
    color: var(--red) !important;
}
.page-id-506 .sec-chuong-trinh-hoc-cta .koi-consult-open:nth-of-type(2){
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .55) !important;
}
.page-id-600{
    --red: #D85327;
    --red-deep: #B0401B;
    --red-bright: #E56535;
    --hero-deep: #B0401B;
    --coral: #E8926B;
    --blush: #F2C3A5;
    --blush-soft: #FAEFE2;
    --blush-tint: #FDF7F0;
    --cta-soft: #E8926B;
    --white: #FFFFFF;
    --ink: #3B2A1D;
    --ink-soft: #6E5640;
    --muted: #96806A;
    --line: #EAE0CF;
    --bg: #FFFFFF;
    --bg-soft: #FBF6EE;
    --bg-section: #EDDFC7;
    --media-bg: #F2E7D4;
    --media-line: #E4D6BD;
    --media-label: #A08A6F;
    --glow: rgba(216, 83, 39, .22);
    --glow-strong: rgba(216, 83, 39, .32);
    --sh: 0 8px 28px rgba(90, 50, 28, .06);
    --sh2: 0 14px 40px rgba(90, 50, 28, .1);
}
.page-id-600 .koi-hero-fluent-button1 .koi-consult-open {
  background: var(--red) !important;
}
.page-id-600 .hero-cta-sys .koi-consult-open:nth-child(1) {
    color: var(--red);
}
.page-id-600 .ic {
  
    background: var(--blush-soft);
    color: var(--red);
}
.page-id-600 .icon-li ul li::before {
       background: var(--blush-soft);
}
.page-id-600 .icon-li ul li::after {
   
    background:  var(--red);
}
.page-id-600 .cta{
      background: linear-gradient(120deg, var(--red) 0%, var(--red-bright) 55%, var(--cta-soft) 100%);
    color: #fff;
}
.page-id-600 .cta h2, .page-id-600 .cta .cta-description p{
  color: white !important;
}
.page-id-600 .elementor-widget-koi-cta .koi-consult-open {
    background: #fff !important;
    color: var(--red) !important;
}
.page-id-600 .sec-chuong-trinh-hoc-cta .koi-consult-open:nth-of-type(2){
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .55) !important;
}
.sys-location .koi-consult-open{
     background:  var(--red) !important;
}
.page-id-689 {
    --red: #3A3F89;
    --red-deep: #2B2F6B;
    --red-bright: #4B51A4;
    --hero-deep: #2B2F6B;
    --coral: #8E94D6;
    --blush: #C4C8EA;
    --blush-soft: #EEF0FA;
    --blush-tint: #F6F7FC;
    --cta-soft: #8E94D6;
    --white: #FFFFFF;
    --ink: #23264E;
    --ink-soft: #4E527E;
    --muted: #7D81A6;
    --line: #E2E0F1;
    --bg: #FFFFFF;
    --bg-soft: #F8F9FD;
    --bg-section: #F1E9D9;
    --media-bg: #ECE0CA;
    --media-line: #DFD0B4;
    --media-label: #9C8E6E;
    --glow: rgba(58, 63, 137, .22);
    --glow-strong: rgba(58, 63, 137, .32);
    --sh: 0 8px 28px rgba(35, 38, 78, .06);
    --sh2: 0 14px 40px rgba(35, 38, 78, .1);
}
.page-id-689 .koi-hero-fluent-button1 .koi-consult-open {
  background: var(--red) !important;
}
.page-id-689 .hero-cta-sys .koi-consult-open:nth-child(1) {
    color: var(--red);
}
.page-id-689 .ic {
  
    background: var(--blush-soft);
    color: var(--red);
}
.page-id-689 .icon-li ul li::before {
       background: var(--blush-soft);
}
.page-id-689 .icon-li ul li::after {
   
    background:  var(--red);
}
.page-id-689 .cta{
      background: linear-gradient(120deg, var(--red) 0%, var(--red-bright) 55%, var(--cta-soft) 100%);
    color: #fff;
}
.page-id-689 .cta h2, .page-id-689 .cta .cta-description p, .page-id-7226 .cta h2, .page-id-7226 .cta .cta-description p {
  color: white !important;
}
.page-id-689 .elementor-widget-koi-cta .koi-consult-open {
    background: #fff !important;
    color: var(--red) !important;
}
.page-id-689 .sec-chuong-trinh-hoc-cta .koi-consult-open:nth-of-type(2){
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .55) !important;
}
.page-id-7226 .cta{
      background: linear-gradient(120deg, var(--red) 0%, var(--red-bright) 55%, var(--cta-soft) 100%);
}
.page-id-7226 .sec-chuong-trinh-hoc-cta .koi-consult-open{background: #fff !important;
    color: var(--red) !important;}
.page-id-7226 .sec-chuong-trinh-hoc-cta .koi-consult-open:nth-of-type(2){
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, .55) !important;
    margin-top:12px;
}
.koi-widget,.koi-widget *,.koi-widget *::before,.koi-widget *::after{box-sizing:border-box}


.koi-widget img,.koi-widget svg{display:block;max-width:100%}
.koi-widget a{color:inherit;text-decoration:none}
.koi-widget button{font-family:inherit;cursor:pointer;border:0;background:none}
.koi-widget ul{list-style:none;margin:0;padding:0}
.h1{font-family:var(--font-h1);font-weight:400;font-size:clamp(34px,4vw,60px);line-height:1.14;letter-spacing:-.01em;color:var(--red)}
.h2{font-family:var(--font);font-weight:600;font-size:clamp(24px,2.2vw,28px);line-height:1.3;color:var(--ink)}
.h2-30 h2{font-size:clamp(24px,2.2vw,30px)}
.h2.red{color:var(--red)}
.h3{font-family:var(--font);font-weight:600;font-size:18px;line-height:1.35}
.lead{font-size:15.5px;color:var(--ink-soft);line-height:1.55;max-width:50ch}
.lead-c{font-size:15.5px;color:var(--ink-soft);line-height:1.55;max-width:54ch;margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.text-center{text-align:center}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{}
.sec-soft{background:var(--bg-soft)}
.sec-blush{background:var(--bg-section)}
.page-id-506 .sec-soft{    background: var(--bg-soft);}
.page-id-506 .sec-blush{    background: var(--bg-section);}
.sec-head{max-width:680px;margin:0 auto 40px;text-align:center}
.sec-head .h2{margin-bottom:12px}
.sec-head .lead,.sec-head .lead-c{margin-top:4px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;transition:all .25s var(--ease);white-space:nowrap}
.btn-p{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(212,21,31,.22)}
.btn-p:hover{background:var(--red-deep);transform:translateY(-1px)}
.btn-s{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.btn-s:hover{background:var(--blush-tint)}
.btn-w{background:#fff;color:var(--red)}
.btn-w:hover{/*background:var(--blush-tint)*/}
.btn-g{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-g:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* Media frame — for real photos later (neutral, not red) */
.mf{position:relative;overflow:hidden;background:var(--media-bg);border:1.5px dashed var(--media-line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;min-height:120px}
.mf-16-9{aspect-ratio:16/9;width:100%}
.mf-4-3{aspect-ratio:4/3;width:100%}
.mf-1-1{aspect-ratio:1/1;width:100%}
.mf-fill{width:100%;height:100%}
.mf-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--media-label);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:16px;pointer-events:none}
.mf-label svg{opacity:.45;margin-bottom:4px}
.mf-tag{position:absolute;top:10px;left:10px;z-index:2;background:rgba(255,255,255,.92);border:1px solid var(--media-line);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.mf-sm{min-height:90px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--red);border-style:solid;background:var(--blush-soft)}
.mf-sm svg{width:24px;height:24px}
.age-panel .mf-fill,.brand-card .mf-fill{min-height:100%;height:100%}
.day-blocks{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.day-blocks{grid-template-columns:1fr 1fr!important}}

/* Header */
.header{position:sticky;top:0;z-index:1000;height:var(--header);background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.header.scrolled{box-shadow:0 4px 18px rgba(43,18,20,.05)}
.header-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-mark{width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,var(--red-bright),var(--red));color:#fff;display:grid;place-items:center;font-family:var(--font-h1);font-size:13px;box-shadow:0 4px 12px rgba(212,21,31,.28);position:relative;overflow:hidden}
.logo-mark::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),transparent 50%)}
.logo-text strong{display:block;font-weight:700;font-size:15px;color:var(--red);letter-spacing:.04em;line-height:1.2}
.logo-text span{font-size:11px;color:var(--muted);font-weight:500}
.nav{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav a,.nav button.nav-link{display:flex;align-items:center;gap:5px;padding:8px 10px;font-size:13.5px;font-weight:600;color:var(--ink-soft);border-radius:8px;transition:.2s}
.nav a:hover,.nav button.nav-link:hover,.nav a.active,.nav button.nav-link.active{color:var(--red);background:var(--blush-tint)}
.nav .chev{width:11px;height:11px;opacity:.5;transition:transform .2s}
.nav-item:hover .chev{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(6px);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);padding:10px;opacity:0;visibility:hidden;pointer-events:none;transition:all .22s var(--ease)}
.nav-item:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.drop a{display:block;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
.drop a:hover{background:var(--blush-tint);color:var(--red)}
.mega{min-width:620px;left:0;transform:translateX(0) translateY(6px);padding:20px}
.nav-item:hover .mega{transform:translateX(0) translateY(0)}
.mega-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mega-b{padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);transition:.2s}
.mega-b:hover{border-color:var(--coral);background:var(--blush-tint)}
.mega-b strong{display:block;color:var(--red);font-size:13.5px;margin-bottom:4px}
.mega-b span{font-size:12px;color:var(--muted);line-height:1.45;font-weight:500}
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hotline{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--red);padding:8px 12px;border-radius:999px}
.hotline:hover{background:var(--blush-tint)}
.header-cta .btn{min-height:42px;padding:0 18px;font-size:13.5px}

/* Hero */


/* ===== HERO (brand red — match design sample) ===== */
.hero{
  position:relative;
     background: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 55%, var(--hero-deep) 100%);
  border-bottom:none;
  padding:64px 0 72px;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 80% at 85% 20%,rgba(255,255,255,.12),transparent 55%);
  pointer-events:none;
}
.hero .wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:48px;
  align-items:center;
}
.hero-copy{max-width:560px;color:#fff}
.hero-copy .h1{
  color:#fff;
  margin-bottom:18px;
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.18;
  font-weight:400;
}
.hero-copy .h1.br-ok{white-space:normal}
.hero-copy .h1 br{display:none}
.hero-copy .lead{
  color:rgba(255,255,255,.88);
  margin-bottom:12px;
  max-width:46ch;
  font-size:16px;
  line-height:1.6;
}
.hero-copy p:not(.lead){
  color:rgba(255,255,255,.82);
  margin-bottom:8px;
  max-width:48ch;
  font-size:15px;
  line-height:1.6;
}
.hero-copy .btns{margin-top:28px;gap:12px}
/* Primary on red hero = white pill */
.hero-copy .btn-w,
.hero-copy .btn-p{
  background:#fff;
  color:var(--red);
  border:1.5px solid #fff;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.hero-copy .btn-w:hover,
.hero-copy .btn-p:hover{
  background:#FFF5F4;
  color:var(--red-deep);
  border-color:#fff;
}
/* Secondary = outline white */
.hero-copy .btn-g{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.75);
}
.hero-copy .btn-g:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  color:#fff;
}
/* Media frame on red hero */
.hero-media-box{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.45);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.hero-media-box::before{
 /* content:'16:9 · Video / Ảnh Hero';
  position:absolute;
  top:12px;left:12px;z-index:4;
  background:rgba(255,255,255,.96);
  border:1.5px solid rgba(255,255,255,.5);
  color:var(--red);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);*/
}
.hero-media-box::after{
  content:'';
  position:absolute;inset:10px;
  border:1.5px dashed rgba(255,255,255,.4);
  border-radius:10px;pointer-events:none;z-index:3;
}
.hero-media-inner{
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  display:grid;place-items:center;
}
.hero-media-inner span{
  position:relative;z-index:2;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.75);text-align:center;padding:16px;
}
.hero-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:5;
  width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.97);color:var(--red);
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition:transform .2s;
}
.hero-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.hero-right-col{display:flex;flex-direction:column;gap:0}
/* Caption under media on red hero */
.hero-side-note{
  margin-top:14px;
  font-size:13.5px;
  color:rgba(255,255,255,.88);
  line-height:1.55;
  max-width:100%;
  font-weight:500;
  font-style:italic;
  text-align:center;
  padding:10px 8px 0;
  background:transparent;
  border:none;
  border-radius:0;
  position:relative;
  box-shadow:none;
}
.hero-side-note::before{
  content:'';
  display:block;
  width:24px;height:1px;
  background:rgba(255,255,255,.35);
  margin:0 auto 10px;
  border-radius:1px;
}
.hero-compact{padding:52px 0 60px}
.hero-compact .hero-copy .h1{white-space:normal;font-size:clamp(28px,3vw,42px)}
.hero-cta-sys .koi-consult-open{}
.hero-cta-sys .koi-hero-fluent-button1{}
.hero-cta-sys .koi-consult-open:nth-child(1){background: white !important;
    color: var(--koi-red);}
@media(max-width:1100px){
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .hero-copy .h1{white-space:normal}
  .hero{padding:44px 0 52px}
}
.trust{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.trust-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.trust-item{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.ic{width:22px;height:22px;border-radius:50%;background:var(--blush-soft);color:var(--red);display:grid;place-items:center;flex-shrink:0;    background: var(--group-green-soft);
    color: var(--group-green);}
.ic svg{width:12px;height:12px}
@media(max-width:768px){
.trust-list{    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;}
.trust-item{
  display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding: 5px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 11.8px !important;
    line-height: 1.4 !important;
}
.hero-cta-sys .koi-hero-fluent-button1{   display: flex;
        gap: 8px;      }
.hero-cta-sys .koi-hero-buttons{        grid-template-columns: 1fr !important;}
.trust-list-2-cot .trust-list{    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 12px !important;
    align-items: start !important;}
}
/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:all .35s var(--ease);height:100%;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#e8d5d3}
.card-media{position:relative}
.card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:16.5px}
.card-body p{color:var(--ink-soft);font-size:14px;line-height:1.6}
.card-link{margin-top:auto;padding-top:8px;font-weight:600;font-size:14px;color:var(--red)}

.icon-card{text-align:center;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:all .35s var(--ease);height:100%;overflow:hidden;display:flex;flex-direction:column}
.icon-card:hover{border-color:#e8d5d3;box-shadow:var(--sh);transform:translateY(-3px)}
.icon-card .card-media{border-radius:0}
.icon-card .ic-body{padding:20px 16px 24px;flex:1}
.icon-badge{width:52px;height:52px;margin:0 auto 12px;border-radius:14px;background:var(--blush-soft);color:var(--red);display:grid;place-items:center}
.icon-badge svg{width:24px;height:24px}
.icon-card h3{margin-bottom:6px;font-size:15.5px}
.icon-card p{color:var(--ink-soft);font-size:13.5px;line-height:1.55}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{text-align:center;padding:26px 12px;background:#fff;border-radius:var(--r);border:1px solid var(--line)}
.stat-n{font-family:var(--font-h1);font-size:38px;color:var(--red);line-height:1;margin-bottom:6px}
.stat-l{font-size:13px;font-weight:600;color:var(--ink-soft)}
.stat-highlight{margin-top:28px;text-align:center;padding:22px 28px;background:linear-gradient(135deg,var(--blush-tint),var(--blush-soft));border:1px solid #f0dede;border-radius:var(--r);max-width:640px;margin-left:auto;margin-right:auto}
.stat-highlight .pct{font-family:var(--font-h1);font-size:42px;color:var(--red);line-height:1;margin-bottom:6px}
.stat-highlight p{font-size:15.5px;font-weight:600;color:var(--ink-soft);line-height:1.45}

/* Brand cards */
.brand-card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:28px;transition:transform .35s var(--ease),box-shadow .35s;    background: transparent;
    border: 1.5px solid var(--line);
    color: var(--ink);}
.brand-card:nth-child(2){}
.brand-card:nth-child(3){}
.brand-card:hover{transform:translateY(-5px);box-shadow:var(--sh2);    border-color: var(--red);}
.brand-card .brand-mf{position:absolute;inset:0;opacity:.22}
.brand-card .brand-mf .mf{height:100%;border:0;border-radius:0;background:transparent}
/*.brand-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.22),transparent 42%),linear-gradient(to top,rgba(43,18,20,.35),transparent 55%);pointer-events:none;z-index:1}*/
.brand-card>*{position:relative;z-index:2}
.brand-card .tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.95;margin-bottom:8px;color:  var(--red);}
.brand-card h3{color:var(--ink);;font-size:20px;margin-bottom:8px; font-weight: 700;    line-height: 1.7;}
.brand-card p{color:var(--ink-soft);;font-size:13.5px;margin-bottom:14px;line-height:1.5}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split-content .h2{margin-bottom:14px}
.split-content p{color:var(--ink-soft);margin-bottom:10px;font-size:15.5px;line-height:1.65}
.split-content p.lead{
  font-size: 18px;
}
.split-content p.lead strong{
      font-weight: 600;
    color: var(--ink);
}

/* Profile */
.profile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;box-shadow:var(--sh);max-width:860px;margin:0 auto}
.avatar{width:120px;height:120px;border-radius:50%;background:var(--media-bg);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line);position:relative;overflow:hidden;display:grid;place-items:center}
.avatar .mf-label{font-size:10px}
.profile .role{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.profile-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 10px;font-size:13px;color:var(--muted)}
.profile p{color:var(--ink-soft);font-size:14px}

/* Timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.timeline::before{content:'';position:absolute;top:26px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,#f0dede,var(--red),#f0dede)}
.t-item{text-align:center;position:relative;padding-top:6px}
.t-dot{width:16px;height:16px;border-radius:50%;background:var(--red);border:3px solid #fff;margin:0 auto 14px;position:relative;z-index:1;box-shadow:0 0 0 2px var(--blush)}
.t-year{font-family:var(--font-h1);font-size:20px;color:var(--red);margin-bottom:6px}
.t-item p{font-size:13px;color:var(--ink-soft);font-weight:500}

/* Day activity cards with image slot */
.day-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.day-b{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.day-b .mf{border-radius:0;border:0;border-bottom:1.5px dashed var(--media-line);min-height:110px;aspect-ratio:16/10}
.day-b .day-txt{padding:16px}
.day-b h3{font-size:15px;margin-bottom:6px;color:var(--red)}
.day-b p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* Age tabs */
.age-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.age-tab{padding:10px 18px;border-radius:999px;font-weight:600;font-size:13.5px;color:var(--ink-soft);background:#fff;border:1.5px solid var(--line) !important;transition:.2s}
.age-tab:hover{border-color:var(--coral) !important;color:var(--red)}
.age-tab.on{background:var(--red);color:#fff;border-color:var(--red)}
.age-panel{display:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.age-panel.on{display:grid;grid-template-columns:1fr 1.1fr}
.age-panel .mf{border:0;border-radius:0;min-height:280px}
.age-panel .age-body{padding:32px 28px}
.age-panel h3{font-size:18px;color:var(--red);margin-bottom:12px}
.age-panel li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);margin-bottom:8px;line-height:1.5}
.age-note{margin-top:24px;text-align:center;padding:18px 24px;background:var(--blush-tint);border-radius:var(--r-sm);font-size:14.5px;color:var(--ink-soft);font-weight:500;line-height:1.55}

/* Age row list */
.age-track{display:grid;gap:12px}
.age-row{display:grid;grid-template-columns:130px 1fr 280px;gap:20px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);align-items:center;transition:border-color .2s}
.age-row:hover{border-color:#e8d5d3}
.age-b{font-family:var(--font-h1);font-size:17px;color:var(--red);line-height:1.2}
.age-row h3{font-size:15.5px;margin-bottom:4px}
.age-row p{color:var(--ink-soft);font-size:13.5px;line-height:1.55}
.age-row .mf{min-height:140px;border-radius:var(--r-sm);aspect-ratio:4/3}

/* Method */
.method{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px}
.method:nth-child(even){direction:rtl}
.method:nth-child(even)>*{direction:ltr}
.method-m{min-height:240px}
.method-m .mf{height:100%;border:0;border-radius:0}
.method-b{padding:32px 28px;display:flex;flex-direction:column;justify-content:center}
.method-b h3{font-size:19px;margin-bottom:8px;color:var(--red)}
.method-b p{color:var(--ink-soft);margin-bottom:10px;font-size:14.5px;line-height:1.6}
.benefit{background:var(--blush-tint);border-radius:var(--r-sm);padding:12px 14px}
.benefit strong{display:block;font-size:12px;color:var(--red);margin-bottom:6px}
.benefit li{font-size:13.5px;color:var(--ink-soft);padding-left:18px;position:relative;margin-bottom:3px}
.benefit li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--red)}

/* Checklist professional icons */
.checks{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:500;line-height:1.45}
.checks .d{width:22px;height:22px;border-radius:50%;background:var(--blush-soft);color:var(--red);display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.checks .d svg{width:12px;height:12px}

/* Gallery */


/* Bento gallery — compact, ratios 16:9 / 9:16 / 1:1 only */
.gallery-bento{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:minmax(72px, 9vw);
  gap:12px;
  /*max-width:960px;*/
  margin:0 auto;
}
.gallery-bento .g-item{
  border-radius:14px;
  overflow:hidden;
  min-height:0;
  border:none;
  box-shadow:none;
  background:transparent;
}
.gallery-bento .g-item .mf{
  height:100%;
  min-height:100%;
  border:1.5px dashed var(--media-line);
  border-radius:14px;
  background:var(--media-bg);
}
.gallery-bento .g-item .mf-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--media-label);
}
.gallery-bento .g-item .mf-label svg,
.gallery-bento .g-item .mf-tag{display:none}
/* Ratio layout:
   16:9 = wide (span 2 cols, 1 row) or (span 3 cols depending)
   1:1  = square-ish (equal col/row span)
   9:16 = tall (span 1 col, 2 rows)
*/
/* Row1: tall 9:16 | 1:1 | 1:1 | 16:9 wide | 1:1 */
.gallery-bento .g-item:nth-child(1){grid-column:1; grid-row:1 / span 2} /* 9:16 tall */
.gallery-bento .g-item:nth-child(2){grid-column:2; grid-row:1} /* ~1:1 */
.gallery-bento .g-item:nth-child(3){grid-column:3; grid-row:1} /* ~1:1 */
.gallery-bento .g-item:nth-child(4){grid-column:4 / span 2; grid-row:1} /* 16:9 */
.gallery-bento .g-item:nth-child(5){grid-column:6; grid-row:1} /* ~1:1 */
/* Row2 */
.gallery-bento .g-item:nth-child(6){grid-column:2; grid-row:2} /* 1:1 */
.gallery-bento .g-item:nth-child(7){grid-column:3; grid-row:2} /* 1:1 */
.gallery-bento .g-item:nth-child(8){grid-column:4; grid-row:2 / span 2} /* 9:16 tall */
.gallery-bento .g-item:nth-child(9){grid-column:5 / span 2; grid-row:2} /* 16:9 */
/* Row3 */
.gallery-bento .g-item:nth-child(10){grid-column:1; grid-row:3} /* 1:1 */
.gallery-bento .g-item:nth-child(11){grid-column:2 / span 2; grid-row:3} /* 16:9 */
.gallery-bento .g-item:nth-child(12){grid-column:5 / span 2; grid-row:3} /* 16:9 */
/* hide children beyond 12 if any */
.gallery-bento .g-item:nth-child(n+13){display:none}
@media(max-width:900px){
  .gallery-bento{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:unset;
  }
  .gallery-bento .g-item{grid-column:auto !important;grid-row:auto !important}
  .gallery-bento .g-item:nth-child(1),
  .gallery-bento .g-item:nth-child(8){grid-row:span 2 !important} /* keep tall 9:16 feel */
  .gallery-bento .g-item:nth-child(4),
  .gallery-bento .g-item:nth-child(9),
  .gallery-bento .g-item:nth-child(11),
  .gallery-bento .g-item:nth-child(12){grid-column:span 2 !important} /* 16:9 wide */
  .gallery-bento .g-item:nth-child(n+11){display:block}
}

.sec-moments{background:var(--bg-soft);/*padding:72px 0*/}
.sec-moments .sec-head{margin-bottom:28px}
.sec-moments .sec-head .h2{color:var(--ink);font-size:clamp(24px,2.4vw,30px)}
.sec-moments .sec-head .lead-c{color:var(--ink-soft);max-width:54ch}

/* Keep legacy .gallery for other pages */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:10px}
.g-item{border-radius:14px;overflow:hidden}
.g-item .mf{height:100%;border-radius:14px;border:none}


/* Testimonials desktop */
.koi-widget .reviews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.koi-widget .rev {
    height: 100%;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    box-shadow: none;
    overflow: hidden;
}

.koi-widget .rev-media {
    position: relative;
    width: 100%;
    min-height: 178px;
    aspect-ratio: 16 / 9;
    margin: 0 0 16px;
    border: 1.5px dashed var(--media-line);
    border-radius: var(--r-sm);
    background: var(--media-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.koi-widget .rev-media > img,
.koi-widget .rev-video-link,
.koi-widget .rev-video-link > img {
    width: 100%;
    height: 100%;
    display: block;
}

.koi-widget .rev-media > img,
.koi-widget .rev-video-link > img {
    object-fit: cover;
}

.koi-widget .rev-video-link {
    position: absolute;
    inset: 0;
}

.koi-widget .rev-media-tag {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 4;
    padding: 5px 9px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

.koi-widget .rev-media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--media-label);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.koi-widget .rev-media-placeholder svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    opacity: 0.55;
}

.koi-widget .rev-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--red);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(43, 18, 20, 0.15);
}

.koi-widget .rev-play svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.koi-widget .rev-a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.koi-widget .rev-av {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--media-bg);
    border: 1px solid var(--line);
}

.koi-widget .rev-av img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.koi-widget .rev-info {
    min-width: 0;
}

.koi-widget .rev-a strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
}

.koi-widget .rev-a span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .koi-widget .reviews {
        grid-template-columns: 1fr;
    }
}
/* Nút media */
.koi-widget .rev-video-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

.koi-widget .rev-video-link > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.koi-widget .rev-media > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* Popup video */
.koi-video-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.koi-video-modal.is-open {
    display: flex;
}

.koi-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 8, 10, 0.78);
    backdrop-filter: blur(5px);
}

.koi-video-modal__dialog {
    position: relative;
    z-index: 2;
    width: min(960px, 94vw);
    border-radius: 18px;
    background: #000;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.koi-video-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: inherit;
}

.koi-video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.koi-video-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
}

html.koi-video-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .koi-video-modal {
        padding: 14px;
    }

    .koi-video-modal__dialog {
        width: 100%;
        border-radius: 12px;
    }

    .koi-video-modal__close {
        top: -12px;
        right: -6px;
        width: 36px;
        height: 36px;
        font-size: 23px;
    }
    .gallery-bento .g-item:nth-child(4){
      aspect-ratio: 16 / 9 !important;
}
}
/* FAQ */
.faq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-i{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .2s}
.faq-i.open{    border-color: var(--blush);}
.faq-q{width:100%;text-align:left;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:600;font-size:14.5px;color:var(--ink) !important}
.faq-q:hover{color:var(--red) !important}
.faq-ic{width:26px;height:26px;border-radius:50%;background:var(--blush-soft);color:var(--red);display:grid;place-items:center;flex-shrink:0;font-size:16px;transition:transform .2s,background .2s,color .2s}
.faq-i.open .faq-ic{transform:rotate(45deg);background:var(--red);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .4s;padding:0 20px;color:var(--ink-soft);font-size:14px;line-height:1.7}
.faq-i.open .faq-a{max-height:520px;padding:0 20px 18px}

/* CTA */
.cta{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(120deg,#D4151F 0%,#E61E28 55%,#F06A62 100%);color:#fff;padding:56px 44px;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;position:relative;    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line);}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 20%,rgba(255,255,255,.15),transparent 40%);pointer-events:none}
.cta>*{position:relative;z-index:1}
.cta .h2{color: var(--ink);;margin-bottom:10px;font-size:clamp(22px,2.2vw,28px)}
.cta p{color:rgba(255,255,255,.9);font-size:15px;margin-bottom:5px;line-height:1.55;max-width:48ch}
.cta-viz{border-radius:var(--r);overflow:hidden;min-height:180px;z-index: 0}
.cta-viz .mf{height:100%;min-height:180px;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.cta-viz .mf-label{color:rgba(255,255,255,.75)}
.cta-sys .koi-consult-open{
  font-size:15px !important;
}
/* VM */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vm-c{padding:0;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);height:100%;overflow:hidden;display:flex;flex-direction:column}
.vm-c.acc{background:var(--red);border-color:var(--red);color:#fff}
.vm-c.acc .eyebrow,.vm-c.acc .h2,.vm-c.acc p{color:#fff}
.vm-c.acc p{color:rgba(255,255,255,.9)}
.vm-c .vm-top{padding:28px 26px 8px}
.vm-c .h2{margin:6px 0 12px;font-size:18px}
.vm-c p{color:var(--ink-soft);font-size:14px;margin-bottom:8px;line-height:1.6;}
.vm-c .mf{margin:16px 20px 20px;border-radius:var(--r-sm);min-height:120px}
.vm-c.acc .mf{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.vm-c.acc .mf-label{color:rgba(255,255,255,.7)}
.val{padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);height:100%;border-top:3px solid var(--red);overflow:hidden;display:flex;flex-direction:column}
.val .val-top{padding:24px 20px 8px;text-align:center}
.val h3{font-size:16px;margin:10px 0 8px;color:var(--red)}
.val p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;padding:0 18px}
.val .mf{margin:14px 16px 18px;border-radius:var(--r-sm);min-height:100px}

/* Process timeline with arrows */
.steps{display:flex;align-items:stretch;gap:0;justify-content:center}
.step{text-align:center;padding:24px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);flex:1;position:relative;max-width:180px}
.step-n{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center;margin:0 auto 10px}
.step .mf{width:56px;height:56px;margin:0 auto 12px;border-radius:14px;min-height:56px}
.step h3{font-size:13.5px;line-height:1.35}
.step-arrow{display:flex;align-items:center;padding:0 4px;color:var(--coral);flex-shrink:0}
.step-arrow svg{width:24px;height:24px}

/* Schedule infographic */
.sched-infographic{background:#fff;border:2px dashed var(--media-line);border-radius:var(--r-lg);padding:48px 28px;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;margin-bottom:20px;position:relative}
.sched-infographic::before{/*content:'Infographic timeline + ảnh thật';position:absolute;top:12px;left:14px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:var(--blush-soft);padding:4px 10px;border-radius:6px*/}
.sched-infographic .mf-label{position:static;color:var(--media-label)}
.sched-flow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.sched-chip{padding:10px 16px;background:var(--blush-soft);color:var(--red);border-radius:999px;font-weight:600;font-size:13px}
.sched-arr{color:var(--coral);font-weight:700;opacity:.6}
.sched{display:grid;gap:8px;max-width:880px;margin:0 auto}
.sched-r{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.sched-t{font-weight:700;color:var(--red);font-size:13px}
.sched-r p{color:var(--ink-soft);font-size:13.5px;line-height:1.5}
.note-sm{font-size:13px;color:var(--muted);text-align:center;margin-top:12px;font-style:normal}
.campus-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.campus-links a,.campus-links button{padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:13px;color:var(--ink-soft);background:#fff;transition:.2s}
.campus-links a:hover,.campus-links button:hover{border-color:var(--red);color:var(--red)}

/* Map */
.map{border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);min-height:400px;background:
  linear-gradient(135deg,#Faf6f5,#F3EEEC),
  repeating-linear-gradient(0deg,transparent,transparent 39px,var(--line) 40px),
  repeating-linear-gradient(90deg,transparent,transparent 39px,var(--line) 40px);
  display:grid;place-items:center;position:relative}
.map::before{content:'Google Maps Embed · Pin 5 cơ sở';position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.map-pins{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:700px;padding:20px}
.pin{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--red);box-shadow:var(--sh);display:flex;align-items:center;gap:7px;cursor:pointer;transition:.2s}
.pin:hover{border-color:var(--red);transform:translateY(-1px)}
.pin::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red)}

/* Logos */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.logo-c{min-width:120px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);text-align:center;font-weight:600;font-size:12.5px;color:var(--ink-soft)}
.logo-c small{display:block;margin-top:3px;font-size:11px;color:var(--muted);font-weight:500}

/* Footer compact L1 */
.footer{background:#1F0A0C;color:rgba(255,255,255,.8);padding-top:56px}
.ft-top{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1);align-items:center}
.ft-brand p{margin-top:12px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62);max-width:320px}
.ft-brand .logo-text strong{color:#fff}
.ft-brand .logo-text span{color:rgba(255,255,255,.5)}
.ft-cta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ft-cta .hl{font-family:var(--font-h1);font-size:22px;color:#fff}
.ft-cta span{font-size:12.5px;color:rgba(255,255,255,.55);display:block;margin-bottom:2px}
.ft-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ft-col h4{font-weight:700;font-size:12.5px;color:#fff;margin-bottom:10px;letter-spacing:.04em}
.ft-col a{display:block;font-size:12.5px;color:rgba(255,255,255,.58);padding:3px 0;transition:color .2s}
.ft-col a:hover{color:var(--blush)}
.ft-camp{padding:28px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ft-camp h4{font-weight:700;font-size:12.5px;color:#fff;margin-bottom:14px}
.camp-g{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.camp-m{padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm)}
.camp-m strong{display:block;font-size:12px;color:#fff;margin-bottom:3px}
.camp-m span{display:block;font-size:11px;color:rgba(255,255,255,.48);line-height:1.4}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 28px;font-size:12px;color:rgba(255,255,255,.42)}
.socials{display:flex;gap:8px}
.socials a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);transition:.2s}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff}
.policies{display:flex;flex-wrap:wrap;gap:6px 12px}
.policies a:hover{color:var(--blush)}

.float{position:fixed;right:22px;bottom:22px;z-index:900;display:flex;flex-direction:column;gap:8px}
.float a{width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(212,21,31,.32);font-weight:700;font-size:11px;transition:transform .2s}
.float a:hover{transform:scale(1.05)}
.float a.z{background:#0068FF}

.koi-widget .page{display:none}
.koi-widget .page.active{display:block;animation:fadeIn .3s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-r]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-r].in{opacity:1;transform:none}

.page-bar{background:var(--ink);color:#fff;padding:7px 0;font-size:11.5px;position:relative;z-index:1100}
.page-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.page-bar span{opacity:.55;font-weight:500}
.page-pills{display:flex;flex-wrap:wrap;gap:5px}
.page-pills button{padding:4px 11px;border-radius:999px;font-size:11px;font-weight:600;color:rgba(255,255,255,.68);background:rgba(255,255,255,.08);transition:.2s}
.page-pills button:hover,.page-pills button.on{background:var(--red);color:#fff}

.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.exp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:center}
.exp-card .mf{border:0;border-radius:0;min-height:120px}
.exp-card .exp-body{padding:16px}
.exp-card h3{font-size:15px;margin-bottom:4px}
.exp-card .freq{color:var(--red);font-weight:700;font-size:13px}

@media(max-width:1100px){
  .nav{display:none}
  .g5,.stats{grid-template-columns:repeat(2,1fr)}
  .steps{flex-wrap:wrap;gap:12px}
  .step-arrow{display:none}
  .step{max-width:none}
  .camp-g{grid-template-columns:repeat(3,1fr)}
  .cta{grid-template-columns:1fr;padding:36px 24px}
  .cta-viz{display:none}
  .g2,.g3,.g4,.split,.vm,.method,.profile,.ft-top,.ft-nav,.reviews,.day-blocks,.age-panel.on,.exp-grid{grid-template-columns:1fr}
  .method:nth-child(even){direction:ltr}
  .timeline{grid-template-columns:repeat(1,1fr)}
  .timeline::before{display:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .age-row,.sched-r{grid-template-columns:1fr}
  .timeline {
    position: relative !important;
    display: block !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Đường thẳng chính giữa */
.timeline::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 1px !important;
    height: auto !important;
    background: #26369b !important;
    transform: translateX(-50%) !important;
    z-index: 0 !important;
}


/* ==================================================
   MỖI ITEM = 1 HÀNG RIÊNG
   QUAN TRỌNG: KHÔNG CÓ WIDTH
   ================================================== */

.timeline .t-item {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 1fr 44px 1fr !important;
    grid-template-rows: auto auto !important;

    min-height: 76px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 2px 0 12px !important;

    float: none !important;
    clear: both !important;

    box-sizing: border-box !important;
}


/* ==================================================
   ICON LUÔN Ở GIỮA
   ================================================== */

.timeline .t-dot {
    position: relative !important;

    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;

    justify-self: center !important;
    align-self: start !important;

    top: 3px !important;
    left: auto !important;
    right: auto !important;

    width: 12px !important;
    height: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    background: #26369b !important;
    border: 3px solid #ffffff !important;

    box-shadow: 0 0 0 2px #aeb8e8 !important;

    box-sizing: content-box !important;

    z-index: 10 !important;
}


/* ==================================================
   ITEM LẺ: 2018 / 2022 / 2026
   NẰM BÊN TRÁI
   ================================================== */

.timeline .t-item:nth-child(odd) .t-year {
    grid-column: 1 !important;
    grid-row: 1 !important;

    text-align: right !important;

    margin: 0 !important;
    padding: 0 !important;
}

.timeline .t-item:nth-child(odd) p {
    grid-column: 1 !important;
    grid-row: 2 !important;

    text-align: right !important;

    margin: 4px 0 0 !important;
    padding: 0 !important;
}


/* ==================================================
   ITEM CHẴN: 2021 / 2023
   NẰM BÊN PHẢI
   ================================================== */

.timeline .t-item:nth-child(even) .t-year {
    grid-column: 3 !important;
    grid-row: 1 !important;

    text-align: left !important;

    margin: 0 !important;
    padding: 0 !important;
}

.timeline .t-item:nth-child(even) p {
    grid-column: 3 !important;
    grid-row: 2 !important;

    text-align: left !important;

    margin: 4px 0 0 !important;
    padding: 0 !important;
}


/* ==================================================
   YEAR
   ================================================== */

.timeline .t-year {
    position: relative !important;

    width: auto !important;
    height: auto !important;

    font-weight: 700 !important;

    line-height: 1.25 !important;

    box-sizing: border-box !important;
}


/* ==================================================
   NỘI DUNG
   ================================================== */

.timeline .t-item p {
    position: relative !important;

    width: auto !important;
    height: auto !important;

    line-height: 1.5 !important;

    box-sizing: border-box !important;
}


/* ITEM CUỐI */
.timeline .t-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.timeline::before {
    display: block !important;
    top: 8px !important;
    bottom: 10px !important;
    left: 7px !important;
    right: auto !important;
    width: 2px !important;
    height: auto !important;
    background: linear-gradient(180deg, var(--blush), var(--red), var(--blush)) !important;
}
.timeline::before {
    display: block !important;
    left: 50% !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 2px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
}
.elementor-widget-koi-timeline .koi-widget{
  padding-top:unset !important;
}
}

/* Teacher body as boxes */
.stat-boxes{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.stat-box{padding:16px 18px;background:var(--blush-tint);border:1px solid #f0dede;border-radius:var(--r-sm);border-left:3px solid var(--red)}
.stat-box strong{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px;font-weight:700}
.stat-box span{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.logo-c.simple{min-width:110px;padding:20px 22px;font-size:14px}
.logo-c.simple small{display:none}
.gallery{grid-auto-rows:150px}
.gallery.more .g-item:nth-child(n){/* all visible */}
/* Red accent cards for campus grid on home */
.campus-red-card{position:relative;border-radius:var(--r);overflow:hidden;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;/*background:linear-gradient(155deg,#FF7E74,#D4151F)*/;transition:transform .3s,box-shadow .3s}
/*.campus-red-card:nth-child(2){background:linear-gradient(155deg,#FFB5B5,#E61E28)}
.campus-red-card:nth-child(3){background:linear-gradient(155deg,#FF8A80,#A80F17)}
.campus-red-card:nth-child(4){background:linear-gradient(155deg,#FF7E74,#C4121B)}
.campus-red-card:nth-child(5){background:linear-gradient(155deg,#FF9A92,#A80F17)}*/
.campus-red-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.campus-red-card h3{color:#fff;font-size:16px;margin-bottom:6px}
.campus-red-card p{color:rgba(255,255,255,.9);font-size:13px;line-height:1.45}
.campus-red-card .card-link{color:#fff;font-weight:600;margin-top:10px;opacity:.95}




/* Wider section heads */
.sec-head.wide{max-width:900px}
.sec-head.wide .lead-c,.sec-head.wide .lead{/*max-width:72ch*/}
.sec-head h2.one-line{font-size:clamp(22px,2.1vw,28px);line-height:1.3}
@media(max-width:900px){.sec-head h2.one-line{white-space:normal}}

/* Portrait profile */
.profile.portrait{grid-template-columns:180px 1fr}
.profile-photo{aspect-ratio: 3 / 4;border-radius:var(--r);background:var(--media-bg);border:1.5px solid var(--line);overflow:hidden;position:relative}
.profile-photo .mf{height:100%;border:0;border-radius:0;min-height:100%}
.elementor-widget-koi-profile .koi-widget {
  padding:80px; margin: var(--gutter);
}
/* Stats redesign */
.stats-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:0 auto}
.stat-v2{text-align:center;padding:32px 16px;background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh);position:relative;overflow:hidden}
.stat-v2::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--red), var(--group-green));}
.stat-v2 .stat-n{font-family:var(--font-h1);font-size:40px;color:var(--red);line-height:1;margin-bottom:8px}
.stat-v2 .stat-l{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.koi-center-button__link{
  background: var(--red) !important;
    color: #fff;
    /*box-shadow: 0 4px 14px var(--glow) !important;*/
}
.one-line h2{
      white-space: nowrap;
    font-size: clamp(18px, 1.9vw, 28px);
}
/* Logo marquee */
.logo-marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);padding:12px 0}
.logo-track{display:flex;gap:20px;width:max-content;animation:marquee 28s linear infinite}
.logo-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.logo-slot{width:140px;height:72px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;transition:border-color .2s,box-shadow .2s}
.logo-slot:hover{border-color:var(--coral);box-shadow:var(--sh)}
.logo-slot span{font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center;letter-spacing:.02em}
.logo-slot .ph{width:100%;height:100%;border:1.5px dashed var(--media-line);border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--media-label);text-transform:uppercase;letter-spacing:.06em}
.logo-slot img{    border-radius: 10px;
    height: 72px;
    width: 100%;
    object-fit: cover;}
/* Age journey slideshow style */
.age-journey{display:grid;gap:20px}
.age-slide{display:grid;grid-template-columns:200px 1.2fr 320px;gap:24px;align-items:center;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);transition:border-color .2s}
.age-slide:hover{border-color:var(--coral)}
.age-slide .age-b{font-family:var(--font-h1);font-size:22px;color:var(--red);line-height:1.15}
.age-slide h3{font-size:17px;margin-bottom:8px;color:var(--ink)}
.age-slide p{color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.age-slide .mf{min-height:200px;aspect-ratio:4/3;border-radius:var(--r);border:2px solid var(--line)}
@media(max-width:1100px){.age-slide{grid-template-columns:1fr}.stats-v2{grid-template-columns:repeat(2,1fr)}.profile.portrait{grid-template-columns:1fr}}

/* Campus directory */
.campus-dir{display:grid;grid-template-columns:repeat(1,1fr);gap:14px;max-width:900px;margin:0 auto}
.campus-dir-item{display:grid;grid-template-columns:140px 1fr auto;gap:20px;align-items:center;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.campus-dir-item:hover{border-color:var(--coral);box-shadow:var(--sh)}
.campus-dir-item .tag{font-weight:700;font-size:14px;color:var(--red)}
.campus-dir-item .addr{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.campus-dir-item .phone{font-size:13px;color:var(--ink);font-weight:600;margin-top:4px}
.campus-dir-item .mf{width:140px;min-height:90px;aspect-ratio:4/3;border-radius:var(--r-sm)}
@media(max-width:900px){.campus-dir-item{grid-template-columns:1fr}}

/* Steps richer */
.steps-rich{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap}
.step-rich{flex:1;min-width:140px;max-width:200px;text-align:center;padding:28px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);position:relative}
.step-rich .step-n{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--coral),var(--red));color:#fff;font-weight:700;font-size:16px;display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 4px 12px rgba(212,21,31,.25)}
.step-rich h3{font-size:14px;margin-bottom:6px}
.step-rich p{font-size:12.5px;color:var(--muted);line-height:1.4}
.step-rich a.link-inline{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Social icons SVG */
.socials a{width:36px;height:36px}
.socials a svg{width:16px;height:16px}

/* Modal form */
.modal-overlay{position:fixed;inset:0;background:rgba(43,18,20,.45);backdrop-filter:blur(4px);z-index:2000;display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--r-lg);width:100%;max-width:480px;padding:36px 32px;box-shadow:0 24px 64px rgba(43,18,20,.2);position:relative;max-height:90vh;overflow-y:auto}
.modal h2{font-size:22px;color:var(--red);margin-bottom:8px;font-family:var(--font);font-weight:700}
.modal .sub{font-size:14px;color:var(--ink-soft);margin-bottom:24px;line-height:1.5}
.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:var(--bg-soft);color:var(--ink-soft);display:grid;place-items:center;font-size:20px;cursor:pointer;transition:.2s}
.modal-close:hover{background:var(--blush-soft);color:var(--red)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.form-group label .opt{font-weight:500;color:var(--muted);font-size:12px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:var(--font);font-size:14.5px;color:var(--ink);background:#fff;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--coral)}
.form-group textarea{min-height:80px;resize:vertical}
.form-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.45;text-align:center}
.modal .btn{width:100%;margin-top:8px}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.contact-info h3{font-size:16px;color:var(--red);margin-bottom:8px}
.contact-info .email{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:28px}
.contact-campus{padding:16px 0;border-bottom:1px solid var(--line)}
.contact-campus:last-child{border-bottom:0}
.contact-campus strong{display:block;color:var(--red);font-size:14.5px;margin-bottom:4px}
.contact-campus span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.contact-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh)}

/* Blog cards */
.blog-meta{font-size:12px;font-weight:600;color:var(--red);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}

/* Hero caption under media */


.hero-right-col{display:flex;flex-direction:column}
@media(max-width:1100px){.contact-grid{grid-template-columns:1fr}.steps-rich{gap:12px}.step-rich{max-width:none}}


/* Simple page title (news / contact) — no hero media */
.page-title-bar{padding:48px 0 28px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.page-title-bar .h1{font-size:clamp(28px,3vw,40px);margin-bottom:0}

/* Hero side note — compact caption under media */


.hero-right-col{display:flex;flex-direction:column;gap:0}

/* Stats headline with red 90% */




/* Compact campus directory — no image, fit one viewport */
.campus-dir.compact{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1000px;margin:0 auto}
.campus-dir.compact .campus-dir-item{grid-template-columns:1fr auto;gap:12px 16px;padding:16px 18px;align-items:center}
.campus-dir.compact .campus-dir-item .info{display:flex;flex-direction:column;gap:6px;min-width:0}
.campus-dir.compact .campus-dir-item .tag{font-size:14px;font-weight:700;color:var(--red);line-height:1.3}
.campus-dir.compact .campus-dir-item .addr{font-size:12.5px;line-height:1.45;color:var(--ink-soft);padding-top:2px;border-top:1px solid var(--line)}
.campus-dir.compact .campus-dir-item .phone{font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600}
.campus-dir.compact .campus-dir-item .btn{min-height:36px;padding:0 12px;font-size:12px;align-self:center;flex-shrink:0}
@media(max-width:900px){.campus-dir.compact{grid-template-columns:1fr}}

/* Age carousel */
.age-carousel{position:relative;overflow:hidden;padding:8px 48px 16px}
.age-carousel-track{display:flex;gap:16px;transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.age-carousel .age-slide{flex:0 0 calc(33.333% - 11px);min-width:0;grid-template-columns:1fr;padding:0;overflow:hidden}
.age-carousel .age-slide .age-b{padding:16px 16px 0;font-size:18px}
.age-carousel .age-slide .age-body{padding:8px 16px 16px}
.age-carousel .age-slide h3{font-size:15px;margin-bottom:6px;font-weight:bold;}
.age-carousel .age-slide p{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.age-carousel .age-slide .mf{min-height:160px;aspect-ratio:16/10;border-radius:0;border:0;border-bottom:1px solid var(--line);order:-1}
.age-carousel .age-slide{display:flex;flex-direction:column}
.age-nav{padding:unset;position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff !important;border:1.5px solid var(--line) !important;color:var(--red) !important;display:grid;place-items:center;box-shadow:var(--sh);z-index:2;cursor:pointer !important;transition:.2s}
.age-nav:hover{border-color:var(--red) !important ;background:var(--blush-tint)}
.age-nav.prev{left:0}
.age-nav.next{right:0}
.age-nav svg{width:18px;height:18px}
.age-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.age-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);padding:0;transition:.2s}
.age-dots button.on{background:var(--red);width:22px;border-radius:999px}
@media(max-width:1100px){.age-carousel .age-slide{flex:0 0 calc(50% - 8px)}}
@media(max-width:700px){.age-carousel .age-slide{flex:0 0 100%}.age-carousel{padding:8px 40px 16px}}

/* Form link highlight in steps */
.form-link{font-weight:700;color:var(--red);background:var(--blush-soft);padding:1px 6px;border-radius:4px;text-decoration:none;border-bottom:1.5px solid var(--coral);cursor:pointer}
.form-link:hover{background:var(--blush)}





.campus-dir.compact{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1000px;margin:0 auto}
.campus-dir.compact .campus-dir-item{display:grid;grid-template-columns:1fr auto;gap:12px 16px;padding:16px 18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.campus-dir.compact .campus-dir-item .info{display:flex;flex-direction:column;gap:8px;min-width:0}
.campus-dir.compact .campus-dir-item .tag{display:block;font-size:14px;font-weight:700;color:var(--red);line-height:1.3}
.campus-dir.compact .campus-dir-item .addr{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-soft);padding-top:8px;border-top:1px solid var(--line)}
.campus-dir.compact .campus-dir-item .phone{display:block;font-size:12.5px;line-height:1.4;color:var(--ink);font-weight:600}
.campus-dir.compact .campus-dir-item .btn{min-height:36px;padding:0 12px;font-size:12px;align-self:center;flex-shrink:0}
@media(max-width:900px){.campus-dir.compact{grid-template-columns:1fr}}











/* 90% headline */
.stat-headline{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 40px;flex-wrap:nowrap;max-width:960px}
.stat-headline .pct{font-family:var(--font-h1);font-size:clamp(42px,4.2vw,56px);color:var(--red);line-height:1;flex-shrink:0}
.stat-headline .txt{font-family:var(--font);font-weight:600;font-size:clamp(16px,1.55vw,22px);color:var(--ink);line-height:1.2;white-space:nowrap}
@media(max-width:900px){.stat-headline{flex-wrap:wrap}.stat-headline .txt{white-space:normal;max-width:18em;text-align:center}}

.sec-moments{background:var(--bg-soft);/*padding:72px 0*/}
.sec-moments .sec-head{margin-bottom:32px}
.sec-moments .sec-head .h2{color:var(--ink);font-size:clamp(24px,2.4vw,28px)}
.sec-moments .sec-head .lead-c{color: var(--muted);;max-width:48ch}
.sec-moments .lead-c{    max-width: min(720px, 92%) !important;}
.lead-c-72 .lead-c{    max-width: 72ch;}
.lead-c-76 .lead-c{    max-width: min(760px, 92%) !important;}

/* Final overrides: soft hero caption + simple gallery tiles */
.hero-side-note{
  margin-top:14px !important;
  font-size:13.5px !important;
  color:rgba(255,255,255,.88) !important;
  line-height:1.55 !important;
  font-weight:500 !important;
  font-style:italic !important;
  text-align:center !important;
  padding:10px 6px 0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.hero-side-note::before{
  content:'' !important;
  display:block !important;
  width:24px !important;
  height:1px !important;
  background:rgba(255,255,255,.35) !important;
  margin:0 auto 10px !important;
  border-radius:1px !important;
  position:static !important;
  transform:none !important;
  left:auto !important;
  top:auto !important;
}
.gallery-bento .g-item .mf{
  background:var(--media-bg) !important;
  border:1.5px dashed var(--media-line) !important;
  border-radius:14px !important;
}
.gallery-bento .g-item{
  box-shadow:none !important;
}
.sec-moments{
  background:var(--bg-soft) !important;
}
.sec-moments .sec-head .h2.one-line{
  white-space:nowrap;
}
@media(max-width:900px){
  .sec-moments .sec-head .h2.one-line{white-space:normal}
}


.moments-desc{
  max-width:min(720px, 92%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  line-height:1.55 !important;
  text-align:center !important;
  overflow:visible !important;
  display:block !important;
}

.sec-moments .sec-head .moments-desc,
.sec-moments .sec-head .lead-c.moments-desc{
  max-width:min(720px, 92%) !important;
}

/* Real brand logo */
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-img{width:52px;height:52px;object-fit:contain;display:block;flex-shrink:0}
.logo-img.lg{width:58px;height:58px}
.ft-brand .logo{align-items:center;gap:12px;margin-bottom:4px}
.ft-brand .logo-img{width:52px;height:52px}







/* Header logo stacked: mark on top, brand name below */
.header .logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-shrink:0;
  text-align:center;
  min-width:64px;
}
.header .logo-img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
}
.header .logo-text{
  display:block;
  line-height:1.1;
}
.header .logo-text strong{
  display:block;
  font-weight:700;
  font-size:10px;
  color:var(--red);
  letter-spacing:.06em;
  line-height:1.15;
  white-space:nowrap;
}
/* Footer logo stays horizontal */
.ft-brand .logo,
footer .logo{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  text-align:left;
}
.ft-brand .logo-img,
footer .logo-img{
  width:52px;
  height:52px;
}
.ft-brand .logo-text strong,
footer .logo-text strong{
  font-size:14px;
  letter-spacing:.04em;
}






/* ===== Header logo: image on top, brand name below (smaller) ===== */
.header .logo,
#header .logo,
a.logo[data-go="home"]{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  text-align:center !important;
  flex-shrink:0 !important;
}
.header .logo-img,
#header .logo-img,
a.logo[data-go="home"] .logo-img{
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;
}
.header .logo-text,
#header .logo-text,
a.logo[data-go="home"] .logo-text{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
.header .logo-text strong,
#header .logo-text strong,
a.logo[data-go="home"] .logo-text strong{
  display:block !important;
  font-size:9.5px !important;
  font-weight:700 !important;
  color:var(--red) !important;
  letter-spacing:0.05em !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
/* Footer logo remains horizontal */
footer .logo,
.ft-brand .logo{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
}
footer .logo-img,
.ft-brand .logo-img{
  width:52px !important;
  height:52px !important;
}
footer .logo-text strong,
.ft-brand .logo-text strong{
  font-size:14px !important;
  letter-spacing:0.04em !important;
  color:#fff !important;
}



/* 2-line nav (2 words per line), optional chevron */
.nav-link.nav-2line{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  line-height:1.15 !important;
  text-align:center !important;
  padding:6px 10px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
}
.nav-link.nav-2line .nav-2line-text{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  line-height:1.15 !important;
}
.nav-link.nav-2line .nav-2line-text > span{
  display:block !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  color:inherit !important;
}
.nav-link.nav-2line .chev{
  flex-shrink:0;
  margin-top:1px;
}


/* Wide section lead — ~3 lines */
.sec-head.wide-3 .lead-c,
.lead-c.lead-3wide{
  max-width:min(760px, 92%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  line-height:1.6 !important;
}

.icon-card .ic-body:not(:has(p)){padding-bottom:20px}
.icon-card .ic-body h3{margin-bottom:10px; font-weight: bold;}

.sec-head .h2.one-line{
  white-space:nowrap;
  font-size:clamp(18px,1.9vw,28px);
}
.no-title .brand-card{min-height: unset !important}
@media(max-width:900px){
  .sec-head .h2.one-line{white-space:normal;font-size:clamp(20px,5vw,26px)}
}

/* Space gallery — classroom large like sample */
/* Space gallery — classroom large like sample */
.gallery.space-gallery{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  grid-auto-rows:minmax(110px, 12vw) !important;
  gap:14px !important;
  max-width:1100px;
  margin:0 auto;
}
.gallery.space-gallery .g-item{
  border-radius:16px !important;
  overflow:hidden;
  min-height:0;
}
.gallery.space-gallery .g-item .mf{
  height:100% !important;
  min-height:100% !important;
  border:1.5px dashed var(--media-line) !important;
  background:var(--media-bg) !important;
  border-radius:16px !important;
}
.gallery.space-gallery .g-item--classroom{
  grid-column: 1 / span 2 !important;
  grid-row: 1 / span 2 !important;
}
.gallery.space-gallery .g-item--classroom .mf-label span{
  font-size:13px !important;
  letter-spacing:.08em;
}
@media(max-width:900px){
  .gallery.space-gallery{
    grid-template-columns:repeat(2, 1fr) !important;
    grid-auto-rows:120px !important;
  }
  .gallery.space-gallery .g-item--classroom{
    grid-column: 1 / span 2 !important;
    grid-row: span 2 !important;
  }
}
@media(max-width:900px){
  .gallery.space-gallery{
    grid-template-columns:repeat(2, 1fr) !important;
    grid-auto-rows:120px !important;
  }
  .gallery.space-gallery .g-item--classroom{
    grid-column: 1 / span 2 !important;
    grid-row: span 2 !important;
  }
}


/* Space gallery final — classroom large (sample layout) */
.gallery.space-gallery{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows:minmax(100px,11vw) !important;
  gap:14px !important;
}
.gallery.space-gallery .g-item{
  border-radius:16px !important;
  overflow:hidden !important;
  min-width:0 !important;
}
.gallery.space-gallery .g-item .mf{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  border:1.5px dashed var(--media-line) !important;
  background:var(--media-bg) !important;
  border-radius:16px !important;
}
.gallery.space-gallery .g-item--classroom{
  grid-column:1 / span 2 !important;
  grid-row:1 / span 2 !important;
}
@media(max-width:900px){
  .gallery.space-gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:110px !important;}
  .gallery.space-gallery .g-item--classroom{grid-column:1 / span 2 !important; grid-row:1 / span 2 !important;}
}


/* Feedback update: clearer social/contact icons, review text cards, balanced age bullets */
.age-panel .age-body ul{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.age-panel .age-body li{gap:12px;align-items:flex-start;margin-bottom:0}
.age-panel .age-body .d{width:18px;height:18px;border-radius:50%;background:var(--blush-soft);color:var(--red);display:grid;place-items:center;flex:0 0 18px;margin-top:2px}
.age-panel .age-body .d svg{width:9px;height:9px}
.rev.review-text{display:flex;flex-direction:column;gap:14px;padding:22px;min-height:100%;box-shadow:0 10px 28px rgba(43,18,20,.06)}
.rev.review-text .stars{color:#FFB300;letter-spacing:2px;font-size:17px;line-height:1;font-weight:700}
.rev.review-text .review-copy{color:var(--ink-soft);font-size:14.5px;line-height:1.65;margin:0;white-space:pre-line}
.rev.review-text .rev-a{margin-top:auto;padding-top:4px}
.socials a{background:#fff;color:var(--red);border-color:rgba(255,255,255,.55);box-shadow:0 6px 16px rgba(0,0,0,.14)}
.socials a:hover{transform:translateY(-2px);background:#fff;color:var(--red);border-color:#fff}
.socials a.social-facebook{background:#1877F2;color:#fff}
.socials a.social-zalo{background:#0068FF;color:#fff;font-size:9px;letter-spacing:-.02em}
.socials a.social-tiktok{background:#111;color:#fff}
.socials a.social-youtube{background:#FF0000;color:#fff}
.socials a.social-empty{opacity:.72}
.float{gap:10px}
.float a{font-size:0;text-align:center}
.float a svg{width:22px;height:22px}
.float a.float-zalo{background:#0068FF;font-size:11px;letter-spacing:-.02em}
.float a.float-messenger{background:#0084FF}
.float a.float-hotline{background:var(--red)}


.koi-widget{font-family:var(--font);font-weight:500;font-size:15px;line-height:1.7;color:var(--ink);width:100%;}
.koi-widget .mf img,.koi-widget .hero-media-box img,.koi-widget .profile-photo img,.koi-widget .avatar img{width:100%;height:100%;object-fit:cover;}
.koi-widget .elementor-inline-editing{min-height:1em;}
.koi-widget .koi-empty{opacity:.65;font-style:italic;}
.koi-widget .koi-contact-form .success{display:none;margin-top:12px;color:var(--red);font-weight:700;}


/* KOI Mobile UI v1.1 */
.koi-mobile-header-wrap{display:none}.m-sticky-cta{display:none}
.koi-mobile-snap-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.core-values-carousel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.two-by-two-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.koi-mobile-snap-card img,.core-values-carousel img{width:100%;height:100%;object-fit:cover}
@media(max-width:767px){
 .koi-mobile-header-wrap{display:block}.koi-mobile-header{height:56px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
 .koi-mobile-header .wrap{padding:0 16px}.koi-mobile-header .header-in{height:56px}.koi-mobile-header .logo-img{width:38px;height:38px;object-fit:contain}.koi-mobile-header .logo-text strong{font-size:13px}
 .nav-toggle{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:0;background:transparent}.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
 .koi-mobile-header .nav{display:flex;position:fixed;right:0;top:0;width:min(88vw,340px);height:100dvh;background:#fff;z-index:1750;transform:translateX(105%);transition:transform .28s var(--ease);padding:70px 14px 24px;flex-direction:column;overflow:auto;box-shadow:-16px 0 48px rgba(10,37,64,.16)}
 .koi-mobile-header .nav.is-open{transform:none}.nav-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;font-size:28px;background:var(--bg-soft)}
 .koi-mobile-header .nav-item{margin:0 4px}.koi-mobile-header .nav-link{display:flex;min-height:48px;align-items:center;padding:12px 10px;border-bottom:1px solid var(--line);font-size:15px;font-weight:650}
 .koi-mobile-nav-cta{margin-top:16px}.koi-mobile-nav-cta .btn{width:100%}.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(10,37,64,.38);z-index:1700}.nav-backdrop.show{display:block!important}
 .m-sticky-cta{position:fixed;display:grid;left:50%;transform:translateX(-50%);bottom:0;width:min(430px,100%);grid-template-columns:.9fr 1.2fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid rgba(0,0,0,.06);box-shadow:0 -10px 30px rgba(10,37,64,.08);backdrop-filter:blur(12px);z-index:1500}
 .m-sticky-cta .btn{width:100%;min-height:48px;padding:0 10px;font-size:12.5px;font-weight:700;border-radius:999px}.sticky-hotline{background:#fff;color:var(--red);border:1px solid rgba(212,21,31,.25)}.sticky-booking{background:var(--red);color:#fff}.koi-phone-icon{font-size:16px}
 body:has(.m-sticky-cta){padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 .koi-widget.sec,.koi-widget.sec-moments{padding:28px 0}.koi-widget .wrap{padding-left:16px;padding-right:16px}.koi-widget .sec-head{text-align:left;margin-bottom:14px}.koi-widget .sec-head .h2{font-size:22px;line-height:1.25}
 .koi-mobile-snap-rail,.core-values-carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 12px;margin-left:-16px;margin-right:-16px;scrollbar-width:none}.koi-mobile-snap-rail::-webkit-scrollbar,.core-values-carousel::-webkit-scrollbar{display:none}
 .koi-mobile-snap-rail>*{flex:0 0 min(80vw,300px);scroll-snap-align:start}.core-values-carousel>.val{flex:0 0 min(72vw,260px);scroll-snap-align:start}
 .koi-mobile-snap-card{border-radius:16px}.koi-mobile-snap-card .card-media{aspect-ratio:16/9}.koi-mobile-snap-card .mf{height:100%;border:0}.koi-mobile-snap-card .card-body{padding:16px}
 .core-values-carousel .val{border-radius:16px}.core-values-carousel .val-top{padding:14px 12px 5px}.core-values-carousel .icon-badge{width:36px;height:36px;margin:0 auto 5px}.core-values-carousel .val h3{font-size:14px;margin:5px 0}.core-values-carousel .val p{font-size:12px;line-height:1.45;padding:0 12px}.core-values-carousel .val .mf{height:84px;min-height:84px;margin:9px 10px 11px}
 .two-by-two-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.two-by-two-grid .icon-card{border-radius:14px}.two-by-two-grid .ic-body{padding:14px 10px}.two-by-two-grid .icon-badge{width:30px;height:30px;margin-bottom:6px}.two-by-two-grid h3{font-size:12px;line-height:1.3}.two-by-two-grid p{font-size:11.5px;line-height:1.4}
 .home-environments .g3,.method-carousel,.compact-process-section .steps-rich{display:flex!important;overflow-x:auto!important;gap:10px!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important}.home-environments .g3>* ,.method-carousel>* ,.compact-process-section .steps-rich>*{flex:0 0 min(80vw,300px)!important;scroll-snap-align:start!important}
 .about-timeline .timeline{grid-template-columns:1fr 1fr!important;gap:10px 34px!important}.about-timeline .timeline::before{display:block!important;left:50%!important;right:auto!important;top:0!important;bottom:8px!important;width:2px!important;height:auto!important}.about-timeline .t-item{text-align:left;padding-bottom:14px}.about-timeline .t-item:nth-child(odd){text-align:right}.about-timeline .t-dot{position:absolute;top:4px}.about-timeline .t-item:nth-child(odd) .t-dot{right:-25px}.about-timeline .t-item:nth-child(even) .t-dot{left:-25px}
.elementor-widget-koi-profile .koi-widget{
  margin: unset;
}
.profile-photo{width: 180px !important}
.one-line h2{white-space: unset;}
}

/* =========================================================
   KOI DESKTOP – Tin tức theo danh mục
========================================================= */

.koi-news-section {
    padding: 72px 0;
    background: var(--bg-soft, #fcf9f8);
}

.koi-news-section__title {
    margin: 0 0 42px;
    color: var(--ink, #2b1214);
    font-family: var(--font, "Quicksand", sans-serif);
    font-size: clamp(26px, 2.5vw, 30px);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.koi-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.koi-news-card {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line, #ede4e4);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.koi-news-card:hover {
    transform: translateY(-4px);
    border-color: #e8d5d3;
    box-shadow: 0 14px 40px rgba(43, 18, 20, 0.1);
}

.koi-news-card__media-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.koi-news-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 200px;
    overflow: hidden;

}

.koi-news-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
aspect-ratio: 16 / 9;
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

.koi-news-card:hover .koi-news-card__image {
    transform: scale(1.035);
}

.koi-news-card__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--line, #ede4e4);
    border-radius: 6px;
    color: var(--ink-soft, #5c3a3d);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.koi-news-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--media-label, #9a8585);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.koi-news-card__placeholder svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.48;
}

.koi-news-card__body {
    padding: 24px 20px 22px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.koi-news-card__title {
    margin: 0 0 10px;
    color: var(--ink, #2b1214);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.koi-news-card__title a {
    color: inherit;
    text-decoration: none;
}

.koi-news-card__title a:hover {
    color: var(--red, #d4151f);
}

.koi-news-card__excerpt {
    margin: 0 0 16px;
    color: var(--ink-soft, #5c3a3d);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}

.koi-news-card__link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: auto;
    color: var(--red, #d4151f);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.koi-news-card__link:hover {
    color: var(--red-deep, #a80f17);
}

.koi-news-section__footer {
    margin-top: 34px;
    display: flex;
    justify-content: center;
}

.koi-news-section__button {
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--red, #d4151f);
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    /*box-shadow: 0 6px 18px rgba(212, 21, 31, 0.22);*/
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.koi-news-section__button:hover {
    background: var(--red-deep, #a80f17);
    color: #fff;
    transform: translateY(-2px);
    /*box-shadow: 0 9px 24px rgba(212, 21, 31, 0.27);*/
}

.koi-news-empty {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line, #ede4e4);
    border-radius: 14px;
    color: var(--muted, #8a6a6d);
    text-align: center;
}

/* Tablet */
@media (max-width: 1024px) {
    .koi-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Widget này là bản desktop */
@media (max-width: 767px) {
    .elementor-widget-koi-category-posts {

    }
}
/* KOI v1.2.0 — device-separated widgets */
.koi-mobile-only{display:none!important}
.koi-desktop-only{display:block}
@media(max-width:767px){
  .koi-desktop-only{display:none!important}
  .koi-mobile-only{display:block!important}
}
/* Keep both device versions visible inside Elementor editor */
.elementor-editor-active .koi-desktop-only,
.elementor-editor-active .koi-mobile-only,
.elementor-editor-preview .koi-desktop-only,
.elementor-editor-preview .koi-mobile-only{display:block!important;position:relative}
.elementor-editor-active .koi-desktop-only::before,
.elementor-editor-active .koi-mobile-only::before{
  position:absolute;z-index:9999;top:6px;right:6px;padding:4px 9px;border-radius:999px;
  font:700 10px/1.2 Arial,sans-serif;letter-spacing:.06em;color:#fff;pointer-events:none
}
.elementor-editor-active .koi-desktop-only::before{content:'DESKTOP';background:#263238}
.elementor-editor-active .koi-mobile-only::before{content:'MOBILE';background:#D4151F}
/* =========================================================
   KOI DESKTOP – Campus Directory
========================================================= */

.koi-campus-desktop-section {
    padding: 72px 0;
    background: #fff;
}

.koi-campus-desktop-title {
    margin: 0 0 42px;
    color: var(--ink, #2b1214);
    font-family: var(--font, "Quicksand", sans-serif);
    font-size: clamp(27px, 2.5vw, 34px);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.koi-campus-desktop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.koi-campus-desktop-grid .campus-red-card {
    position: relative;
    min-width: 0;
    min-height: 220px;
    padding: 26px 22px;
    border-radius: 17px;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
        background: transparent;
    border: 1.5px solid var(--line);
    color: var(--ink);
}

.koi-campus-desktop-grid .campus-red-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(255, 255, 255, 0.12),
            transparent 42%
        );
    pointer-events: none;
}

.koi-campus-desktop-grid .campus-red-card:hover {
    border-color: var(--red);
    transform: translateY(-4px);
    box-shadow: var(--sh2);
}

/* 5 màu nền theo đúng dạng demo */
.koi-campus-desktop-grid .campus-red-card--1 {
   /* background: linear-gradient(
        145deg,
        #ff786f 0%,
        #e61722 100%
    );*/
}

.koi-campus-desktop-grid .campus-red-card--2 {
    background: linear-gradient(
        145deg,
        #ff9b9d 0%,
        #ef1723 100%
    );
}

.koi-campus-desktop-grid .campus-red-card--3 {
    background: linear-gradient(
        145deg,
        #ed6662 0%,
        #b30e17 100%
    );
}

.koi-campus-desktop-grid .campus-red-card--4 {
    background: linear-gradient(
        145deg,
        #ff736d 0%,
        #d60f1a 100%
    );
}

.koi-campus-desktop-grid .campus-red-card--5 {
    background: linear-gradient(
        145deg,
        #e87170 0%,
        #b30d17 100%
    );
}

.koi-campus-desktop-grid .campus-red-card__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.koi-campus-desktop-grid .campus-red-card h3 {
    margin: 0 0 8px;
     color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.koi-campus-desktop-grid .campus-red-card p {
    margin: 0 0 17px;
        color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
}

.koi-campus-desktop-grid .campus-red-card .card-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: auto;
    padding: 0;
     color: var(--red);
    opacity: 1;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.koi-campus-desktop-grid .campus-red-card .card-link:hover {
    border-color: var(--red);
    transform: translateY(-4px);
    box-shadow: var(--sh2);
}

/* Tablet desktop */
@media (max-width: 1024px) {
    .koi-campus-desktop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Chỉ dành cho bản desktop */
@media (max-width: 767px) {
    .elementor-widget-koi-campus-directory {

    }
}
@media(max-width:767px){
 .koi-mobile-only.sec{padding:40px 0}
 .koi-mobile-only .wrap{padding-left:18px;padding-right:18px}
 .koi-mobile-only .sec-head{margin-bottom:24px;text-align:left}
 .koi-mobile-only .sec-head .lead-c{margin-left:0;margin-right:0}
 .koi-mobile-only.hero{padding:34px 0 42px}
 .koi-mobile-only.hero .wrap{grid-template-columns:1fr;gap:22px}
 .koi-mobile-only.hero .hero-copy{order:2}
 .koi-mobile-only.hero .hero-right-col{order:1}
 .koi-mobile-only.hero .hero-copy .h1{font-size:32px}
 .koi-mobile-only.hero .btns{display:grid;grid-template-columns:1fr;gap:10px}
 .koi-mobile-only.hero .btn{width:100%}
 .koi-mobile-only.trust .trust-list{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}
 .koi-mobile-only.trust .trust-item{flex:0 0 auto;scroll-snap-align:start;background:#fff;border:1px solid var(--line);padding:9px 12px;border-radius:999px}
 .koi-mobile-only .stats-v2{grid-template-columns:repeat(2,1fr);gap:10px}
 .koi-mobile-only .stat-v2{padding:22px 10px}
 .koi-mobile-only .g2,.koi-mobile-only .g3,.koi-mobile-only .g4,.koi-mobile-only .g5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:8px}
 .koi-mobile-only .g2>* ,.koi-mobile-only .g3>* ,.koi-mobile-only .g4>* ,.koi-mobile-only .g5>*{flex:0 0 84%;scroll-snap-align:start}
 .koi-mobile-only .brand-card{min-height:300px}
 .koi-mobile-only .split{grid-template-columns:1fr;gap:20px}
 .koi-mobile-only .profile,.koi-mobile-only .profile.portrait{grid-template-columns:1fr;padding:20px}
 .koi-mobile-only .timeline{grid-template-columns:1fr;gap:14px}
 .koi-mobile-only .timeline::before{display:none}
 .koi-mobile-only .t-item{text-align:left;padding:16px 16px 16px 46px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
 .koi-mobile-only .t-dot{position:absolute;left:17px;top:19px;margin:0}
 .koi-mobile-only .day-blocks{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px}
 .koi-mobile-only .day-b{flex:0 0 84%;scroll-snap-align:start}
 .koi-mobile-only .age-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}
 .koi-mobile-only .age-panel.on{grid-template-columns:1fr}
 .koi-mobile-only .age-panel .age-body{padding:22px 18px}
 .koi-mobile-only .method{display:flex;flex-direction:column;margin-bottom:14px}
 .koi-mobile-only .method:nth-child(even){direction:ltr}
 .koi-mobile-only .method-b{padding:22px 18px}
 .koi-mobile-only .gallery-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:118px}
 .koi-mobile-only .reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px}
 .koi-mobile-only .rev{flex:0 0 88%;scroll-snap-align:start}
 .koi-mobile-only .campus-dir.compact{grid-template-columns:1fr}
 .koi-mobile-only .sched-r{grid-template-columns:1fr;gap:5px}
 .koi-mobile-only .steps-rich{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;gap:14px}
 .koi-mobile-only .step-rich{flex:0 0 76%;max-width:none;scroll-snap-align:start}
 .koi-mobile-only .cta{grid-template-columns:1fr;padding:30px 20px;border-radius:18px}
 .koi-mobile-only .cta-viz{display:block;min-height:150px}
 .koi-mobile-only .contact-grid{grid-template-columns:1fr;gap:22px}
 .koi-mobile-only .contact-form-card{padding:22px 18px}
}


/* Icon Cards: ký tự, emoji, SVG inline và URL SVG */
.koi-widget .icon-badge{overflow:hidden}
.koi-widget .icon-badge svg,
.koi-widget .icon-badge .koi-card-svg{
  width:24px;
  height:24px;
  display:block;
  flex:0 0 24px;
  object-fit:contain;
  max-width:100%;
  max-height:100%;
    stroke-width: 1.8px;
}
.koi-widget .icon-badge svg path,
.koi-widget .icon-badge svg circle,
.koi-widget .icon-badge svg rect,
.koi-widget .icon-badge svg line,
.koi-widget .icon-badge svg polyline,
.koi-widget .icon-badge svg polygon{
  vector-effect:non-scaling-stroke;
}
.koi-widget .icon-badge .koi-card-character{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  line-height:1;
  font-size:24px;
}

/* =========================================================
   KOI DESKTOP – CTA
========================================================= */

.koi-widget .cta-content {
    min-width: 0;
}

.koi-widget .cta-description p {
    margin: 0 0 6px;
    /*color: rgba(255, 255, 255, 0.9);*/
        color: var(--ink-soft);
}

.koi-widget .koi-cta-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/*
 * Wrapper do shortcode Fluent Forms tạo ra.
 */
.koi-widget .koi-cta-fluent-button,
.koi-widget .koi-cta-fluent-button p,
.koi-widget .koi-cta-fluent-button form,
.koi-widget .koi-cta-fluent-button .fluentform {
    margin: 0;
}

/*
 * Nút popup Fluent Forms.
 * Bao gồm nhiều class để tương thích các phiên bản Fluent Forms.
 */
.koi-widget .koi-cta-fluent-button button,
.koi-widget .koi-cta-fluent-button .ff_modal_btn,
.koi-widget .koi-cta-fluent-button .fluentform_modal_btn,
.koi-widget .koi-cta-fluent-button a {
  /*  min-height: 48px;
    padding: 0 26px !important;
    border: 1.5px solid #fff !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--red, #d4151f) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: var(--font, "Quicksand", sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;*/
}

.koi-widget .koi-cta-fluent-button .ff_modal_btn:hover,
.koi-widget .koi-cta-fluent-button .fluentform_modal_btn:hover,
.koi-widget .koi-cta-fluent-button a:hover {
    background: #fff5f4 !important;
    color: var(--red-deep, #a80f17) !important;
    transform: translateY(-1px);
}
.cta-viz .mf{
  aspect-ratio: 4 / 3
}
/*
 * Nút tìm trường.
 */
.koi-widget .koi-cta-find-button {
    min-height: 48px;
    margin: 0;
    padding: 0 26px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    color: var(--red) !important;
    border: 1.5px solid var(--red);
    background: transparent;
}

.koi-widget .koi-cta-find-button:hover {
   /* border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;*/
}

/*
 * Ảnh CTA.
 */
.koi-widget .cta-viz .mf {
    width: 100%;
    height: 100%;
    min-height: 180px;
}

.koi-widget .cta-viz .mf > img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

/*
 * Tablet.
 */
@media (max-width: 1024px) {
    .koi-widget .cta {
        grid-template-columns: 1fr;
    }

    .koi-widget .cta-viz {
        display: block;
    }
}

/*
 * Widget Desktop tự ẩn trên mobile.
 */
@media (max-width: 767px) {
    .cta-viz {
        display: none !important;
    }
}

/* =========================================================
   KOI HERO RESPONSIVE
   Một widget dùng chung Desktop + Mobile
========================================================= */

.elementor-widget-koi-hero .hero {
    position: relative;
    padding: 64px 0 72px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--red-bright) 0%, var(--red) 55%, var(--hero-deep) 100%);
}

.elementor-widget-koi-hero .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 70% 80% at 85% 20%,
            rgba(255, 255, 255, 0.12),
            transparent 55%
        );
    pointer-events: none;
}

/*
 * Desktop:
 *
 * copy    media
 * buttons media
 */
.elementor-widget-koi-hero .koi-hero-layout {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas:
        "copy media"
        "buttons media";
    column-gap: 48px;
    row-gap: 0;
    align-items: center;
}

.elementor-widget-koi-hero .hero-copy {
    grid-area: copy;
    max-width: 560px;
    color: #fff;
    align-self: end;
}

.elementor-widget-koi-hero .hero-right-col {
    grid-area: media;
    min-width: 0;
    align-self: center;
}

.elementor-widget-koi-hero .koi-hero-buttons {
    grid-area: buttons;
    align-self: start;
}

.elementor-widget-koi-hero .hero-copy .h1 {
    margin: 0 0 18px;
    color: #fff;
    font-family: var(--font-h1);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.12;
}

.elementor-widget-koi-hero .koi-hero-description {
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.65;
}

.elementor-widget-koi-hero .koi-hero-description p {
    margin: 0 0 8px;
    color: inherit;
}

/* Hai nút */
.elementor-widget-koi-hero .koi-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* Nút tìm trường */
.elementor-widget-koi-hero .koi-hero-find-button {
    min-height: 50px;
    padding: 0 27px;
    border: 1.5px solid #fff;
    background: #fff;
    color: var(--red);
}

.elementor-widget-koi-hero .koi-hero-find-button:hover {
    border-color: #fff;
    background: #fff5f4;
    color: var(--red-deep);
}

/* Wrapper Fluent Forms */
.elementor-widget-koi-hero .koi-hero-fluent-button,
.elementor-widget-koi-hero .koi-hero-fluent-button p,
.elementor-widget-koi-hero .koi-hero-fluent-button form,
.elementor-widget-koi-hero .koi-hero-fluent-button .fluentform {
    margin: 0;
}

/* Nút đặt lịch */
.elementor-widget-koi-hero .koi-hero-fluent-button button,
.elementor-widget-koi-hero .koi-hero-fluent-button a,
.elementor-widget-koi-hero .koi-hero-fluent-button .ff_modal_btn,
.elementor-widget-koi-hero .koi-hero-fluent-button .fluentform_modal_btn {
    /*min-height: 50px;
    padding: 0 27px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: var(--font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;*/
}

.elementor-widget-koi-hero .koi-hero-fluent-button a:hover,
.elementor-widget-koi-hero .koi-hero-fluent-button .ff_modal_btn:hover,
.elementor-widget-koi-hero .koi-hero-fluent-button .fluentform_modal_btn:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Media */
.elementor-widget-koi-hero .hero-media-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.elementor-widget-koi-hero .hero-media-box::after {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 2;
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    pointer-events: none;
}

.elementor-widget-koi-hero .koi-hero-media-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    padding: 7px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--red);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.elementor-widget-koi-hero .koi-hero-image,
.elementor-widget-koi-hero .koi-hero-image img,
.elementor-widget-koi-hero .koi-hero-video-trigger,
.elementor-widget-koi-hero .koi-hero-video-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
}

.elementor-widget-koi-hero .koi-hero-image img,
.elementor-widget-koi-hero .koi-hero-video-thumbnail {
    object-fit: cover;
}

.elementor-widget-koi-hero .koi-hero-video-trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.elementor-widget-koi-hero .hero-media-inner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.06)
        );
}

.elementor-widget-koi-hero .hero-media-inner span {
    padding: 16px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.elementor-widget-koi-hero .hero-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    color: var(--red);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.elementor-widget-koi-hero .hero-play svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Iframe chạy trong khung */
.elementor-widget-koi-hero .hero-media-box > iframe {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* Chú thích */
.elementor-widget-koi-hero .hero-side-note {
    margin-top: 15px;
    padding-top: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.55;
    text-align: center;
}

.elementor-widget-koi-hero .hero-side-note::before {
    content: "";
    width: 24px;
    height: 1px;
    margin: 0 auto 10px;
    background: rgba(255, 255, 255, 0.38);
    display: block;
}
/* =========================================================
   KOI HERO - LOGO + TITLE
   ========================================================= */

.koi-hero-brand {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 16px;
}

.koi-hero-brand .h1 {
    margin: 0;
}

.koi-hero-brand__logo {
    width: 100px;
    height: 90px;
    flex: 0 0 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #fff;
    border-radius: 14px;
}

.koi-hero-brand__logo img {
    width: 100%;
    height: 100%;

    padding: 10px;

    display: block;

    object-fit: contain;
}
/* =========================================================
   Mobile:
   copy
   media
   buttons
========================================================= */

@media (max-width: 767px) {
    .elementor-widget-koi-hero .hero {
        padding: 30px 0 34px;
    }

    .elementor-widget-koi-hero .koi-hero-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "media"
            "buttons";
        gap: 0;
        padding-right: 12px;
        padding-left: 12px;
    }

    .elementor-widget-koi-hero .hero-copy {
        max-width: none;
        align-self: auto;
    }

    .elementor-widget-koi-hero .hero-copy .h1 {
        margin-bottom: 10px;
        font-size: clamp(22px, 7vw, 32px);
        line-height: 1.1;
    }

    .elementor-widget-koi-hero .koi-hero-description {
        max-width: none;
        font-size: 13.5px;
        line-height: 1.55;
    }

    .elementor-widget-koi-hero .hero-right-col {
        margin-top: 16px;
    }

    .elementor-widget-koi-hero .hero-media-box {
        border-radius: 14px;
    }

    .elementor-widget-koi-hero .koi-hero-media-label {
        top: 8px;
        left: 8px;
        padding: 6px 9px;
        font-size: 8px;
    }

    .elementor-widget-koi-hero .hero-play {
        width: 50px;
        height: 50px;
    }

    .elementor-widget-koi-hero .hero-play svg {
        width: 19px;
        height: 19px;
    }

    .elementor-widget-koi-hero .hero-side-note {
        margin-top: 10px;
        padding-top: 6px;
        font-size: 11.5px;
        line-height: 1.5;
        text-align: left;
    }

    .elementor-widget-koi-hero .hero-side-note::before {
        display: none;
    }

    .elementor-widget-koi-hero .koi-hero-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
    }

    .elementor-widget-koi-hero .koi-hero-find-button,
    .elementor-widget-koi-hero .koi-hero-fluent-button,
    .elementor-widget-koi-hero .koi-hero-fluent-button button,
    .elementor-widget-koi-hero .koi-hero-fluent-button a,
    .elementor-widget-koi-hero .koi-hero-fluent-button .ff_modal_btn,
    .elementor-widget-koi-hero .koi-hero-fluent-button .fluentform_modal_btn {
        width: 100%;
        min-width: 0;
    }

    .elementor-widget-koi-hero .koi-hero-find-button,
    .elementor-widget-koi-hero .koi-hero-fluent-button button,
    .elementor-widget-koi-hero .koi-hero-fluent-button a,
    .elementor-widget-koi-hero .koi-hero-fluent-button .ff_modal_btn,
    .elementor-widget-koi-hero .koi-hero-fluent-button .fluentform_modal_btn {
        min-height: 40px;
        padding-right: 10px !important;
        padding-left: 10px !important;
        font-size: 11px !important;
    }
        .koi-hero-brand {
        gap: 12px;
        margin-bottom: 14px;
    }

    .koi-hero-brand__logo {
        width: 70px;
        height: 64px;
        flex-basis: 70px;

        border-radius: 11px;
    }

    .koi-hero-brand__logo img {
        padding: 7px;
    }
}
.koi-hero-chung .koi-desktop-only{
      display: block !important;
}

/* =========================================================
   KOI – TẦM NHÌN & SỨ MỆNH
========================================================= */

.elementor-widget-koi-vision-mission {
    width: 100%;
}

.koi-vision-mission {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
}

.koi-vm-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line, #ede4e4);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
}

.koi-vm-card--vision {
background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.koi-vm-card--mission {
    background: #fff;
    color: var(--ink, #2b1214);
}

.koi-vm-card__content {
    padding: 28px 26px 24px;
}

.koi-vm-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 14px;
    display: grid;
    place-items: center;
}

.koi-vm-card--vision .koi-vm-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.koi-vm-card--mission .koi-vm-icon {
    background: #fff0ef;
    color: var(--red, #d4151f);
}

.koi-vm-icon svg,
.koi-vm-icon .koi-vm-icon-image {
    width: 25px;
    height: 25px;
    display: block;
    object-fit: contain;
}

.koi-vm-icon svg [stroke] {
    stroke-width: 2.2;
}

.koi-vm-icon-character {
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
}

.koi-vm-card__label {
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.koi-vm-card--vision .koi-vm-card__label {
    color: #fff;
}

.koi-vm-card--mission .koi-vm-card__label {
    color: var(--ink-soft, #5c3a3d);
}

.koi-vm-card__title {
    margin: 0 0 20px;
    font-size: clamp(18px, 1.7vw, 18px);
    font-weight: 700;
    line-height: 1.35;
}

.koi-vm-card--vision .koi-vm-card__title {
    color: #fff;
}

.koi-vm-card--mission .koi-vm-card__title {
    color: var(--ink, #2b1214);
}

.koi-vm-card__text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
}

.koi-vm-card__text p {
    margin: 0 0 10px;
}

.koi-vm-card__text p:last-child {
    margin-bottom: 0;
}

.koi-vm-card--vision .koi-vm-card__text,
.koi-vm-card--vision .koi-vm-card__text p {
    color: rgba(255, 255, 255, 0.96);
}

.koi-vm-card--mission .koi-vm-card__text,
.koi-vm-card--mission .koi-vm-card__text p {
    color: var(--ink-soft, #5c3a3d);
}

/* Media */
.koi-vm-card__media {
    position: relative;
    width: calc(100% - 40px);
    margin: 16px 20px 20px;
    overflow: hidden;
    border-radius: 12px;
}

.koi-vm-ratio-16-9 .koi-vm-card__media {
    aspect-ratio: 16 / 9;
}

.koi-vm-ratio-4-3 .koi-vm-card__media {
    aspect-ratio: 4 / 3;
}

.koi-vm-ratio-1-1 .koi-vm-card__media {
    aspect-ratio: 1 / 1;
}

.koi-vm-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.koi-vm-card--vision .koi-vm-card__media {
    border: 1.5px dashed rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.12);
}

.koi-vm-card--mission .koi-vm-card__media {
    border: 1.5px dashed #e6d9d7;
    background: #f5f0ee;
}

.koi-vm-card__media-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink-soft, #5c3a3d);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.koi-vm-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 18px;
    text-align: center;
}

.koi-vm-card__placeholder svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.koi-vm-card__placeholder span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.koi-vm-card--vision .koi-vm-card__placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.koi-vm-card--mission .koi-vm-card__placeholder {
    color: #a58d8c;
}

/* Tablet */
@media (max-width: 900px) {
    .koi-vision-mission {
        gap: 16px;
    }

    .koi-vm-card__content {
        padding: 24px 20px 20px;
    }

    .koi-vm-card__media {
        width: calc(100% - 32px);
        margin-right: 16px;
        margin-bottom: 16px;
        margin-left: 16px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .koi-vision-mission {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .koi-vm-reverse-mobile .koi-vm-card--mission {
        order: 1;
    }

    .koi-vm-reverse-mobile .koi-vm-card--vision {
        order: 2;
    }

    .koi-vm-card {
        border-radius: 20px;
    }

    .koi-vm-card__content {
        padding: 22px 18px 18px;
    }

    .koi-vm-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
    }

    .koi-vm-card__label {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .koi-vm-card__title {
        margin-bottom: 14px;
        font-size: 18px;
    }

    .koi-vm-card__text {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .koi-vm-card__media {
        width: calc(100% - 28px);
        margin-right: 14px;
        margin-bottom: 14px;
        margin-left: 14px;
        border-radius: 10px;
    }
}
.koi-core-values {
  width: 100%;
}

.koi-core-values__grid {
  display: grid;
  gap: 22px;
  align-items: stretch;
}

.koi-core-values__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koi-core-values__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koi-core-values__grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.koi-core-value {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--r);
}

.koi-core-value__content {
  flex: 1;
  padding: 24px 18px 0;
}

.koi-core-value__head {
  text-align: center;
}

.koi-core-value__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--blush-soft);
  color: var(--red);
}

.koi-core-value__icon svg,
.koi-core-value__icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
      stroke-width: 1.8;
}

.koi-core-value__character {
  font-size: 25px;
  line-height: 1;
}

.koi-core-value__title {
  margin: 0 0 18px;
  color: var(--red);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  font-weight: bold;
}

.koi-core-value__description {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
}

.koi-core-value__description p {
  margin: 0 0 14px;
}

.koi-core-value__description p:last-child {
  margin-bottom: 0;
}

.koi-core-value__media {
  position: relative;
  width: calc(100% - 32px);
  min-height: 200px;
  margin: 16px 16px 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--media-bg);
  border: 1.5px dashed var(--media-line);
  border-radius: var(--r-sm);
}

.koi-core-value__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}

.koi-core-value__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 8px;
  border: 1px solid var(--media-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.koi-core-value__placeholder {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--media-label);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.koi-core-value__placeholder svg {
  width: 28px;
  height: 28px;
  opacity: .48;
}

@media (max-width: 1024px) {
  .koi-core-values__grid--3,
  .koi-core-values__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .koi-core-values__grid,
  .koi-core-values__grid--2,
  .koi-core-values__grid--3,
  .koi-core-values__grid--4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .koi-core-value__content {
    padding: 22px 18px 0;
  }

  .koi-core-value__media,
  .koi-core-value__media img {
    min-height: 180px;
  }
}

/* =========================================================
   KOI CENTER BUTTON
   ========================================================= */

.koi-center-button {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.koi-center-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;

    padding: 14px 28px;
    border-radius: 999px;

    background: #e30d1b;
    color: #fff;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;

    box-shadow: 0 7px 18px rgba(227, 13, 27, 0.24);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.koi-center-button__link:hover,
.koi-center-button__link:focus {
    color: #fff;
    background: #c70b16;
    transform: translateY(-2px);
    /*box-shadow: 0 10px 24px rgba(227, 13, 27, 0.3);*/
}

.koi-center-button__link:focus-visible {
    outline: 3px solid rgba(227, 13, 27, 0.22);
    outline-offset: 4px;
}
.tit-dau-moc h2{
  font-family: var(--font) !important;
      font-weight: 700 !important;;
    color: var(--red) !important;;
    margin-bottom: 28px !important;;
    font-size: 15px !important;
    margin-top:15px;
}
@media (max-width: 767px) {
    .koi-center-button__link {
        padding: 13px 22px;
        font-size: 14px;
    }
    .tit-dau-moc h2{
    font-size: 13px !important;;
}
.elementor-widget-koi-section-heading{padding:10px !important}
}

.koi-section-heading__description {
}

.koi-section-heading__description br {
    display: block;
    content: "";
    margin-top: 8px;
}

/* =========================================================
   KOI CAMPUS SHORTCODE
   ========================================================= */

.koi-campus-shortcode {
    width: 100%;
}

.koi-campus-shortcode .campus-dir.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.koi-campus-shortcode .campus-dir-item {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: center;

    padding: 16px 18px;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.koi-campus-shortcode .campus-dir-item:hover {
    border-color: var(--coral);
    box-shadow: var(--sh);
    transform: translateY(-1px);
}

.koi-campus-shortcode .campus-dir-item .info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.koi-campus-shortcode .campus-dir-item .tag {
    display: block;
    width: fit-content;

    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.koi-campus-shortcode a.tag:hover {
    color: var(--red-deep);
}

.koi-campus-shortcode .campus-dir-item .addr {
    display: block;

    padding-top: 8px;
    border-top: 1px solid var(--line);

    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

.koi-campus-shortcode .campus-dir-item .phone {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

.koi-campus-shortcode .campus-dir-item .phone svg {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    flex: 0 0 auto;
    color: #e83e8c;
}

.koi-campus-shortcode .campus-dir-item__consult {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/*
 * Giới hạn CSS vào khu vực nút shortcode tư vấn.
 * Hỗ trợ trường hợp shortcode trả về div, button hoặc link.
 */
.koi-campus-shortcode .campus-dir-item__consult > div,
.koi-campus-shortcode .campus-dir-item__consult form {
    width: auto;
    margin: 0;
}

.koi-campus-shortcode .campus-dir-item__consult button,
.koi-campus-shortcode .campus-dir-item__consult a {
    width: auto;
    min-width: 96px;
    min-height: 36px;
    margin: 0;
    padding: 7px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--red);
    border-radius: 999px;
    background: #fff;
    color: var(--red);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;

    box-shadow: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
        background: unset !important;
}

.koi-campus-shortcode .campus-dir-item__consult button:hover,
.koi-campus-shortcode .campus-dir-item__consult a:hover {
    background: var(--red);
   /* color: #fff;*/
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .koi-campus-shortcode .campus-dir.compact {
        grid-template-columns: 1fr;
        padding:10px;
    }
    .campus-dir.compact .campus-dir-item{
      display: block;
    }
    .campus-dir.compact .campus-dir-item .info{margin-bottom:16px;}
}

@media (max-width: 560px) {
    .koi-campus-shortcode .campus-dir-item {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }
    .koi-section-heading__description {
    text-align: left;
}

    .koi-campus-shortcode .campus-dir-item__consult {
        justify-content: flex-start;
    }

    .koi-campus-shortcode .campus-dir-item__consult button,
    .koi-campus-shortcode .campus-dir-item__consult a {
        min-height: 34px;
        padding: 7px 13px;
        font-size: 11.5px;
        background: unset !important;
    }
}

/* =========================================================
   KOI MOBILE TIMELINE
   ========================================================= */
@media (max-width: 767px) {

    .elementor-widget-koi-mobile-timeline {
        width: 100%;
    }

    .elementor-widget-koi-mobile-timeline .about-timeline,
    .elementor-widget-koi-mobile-timeline .koi-mobile-only {
        width: 100%;
        overflow: visible;
    }

    .elementor-widget-koi-mobile-timeline .wrap {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    .elementor-widget-koi-mobile-timeline .timeline {
        position: relative;
        width: 100% !important;
        max-width: 340px !important;
        min-height: 0;
        margin: 0 auto !important;
        padding: 0 0 4px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Đường thẳng ở chính giữa */
    .elementor-widget-koi-mobile-timeline .timeline::before {
        content: "";
        position: absolute !important;
        display: block !important;

        top: 9px !important;
        bottom: 8px !important;
        left: 50% !important;
        right: auto !important;

        width: 2px !important;
        height: auto !important;

        background: #ff5260 !important;
        transform: translateX(-50%) !important;
        z-index: 0;
    }

    /* Từng mốc */
    .elementor-widget-koi-mobile-timeline .t-item {
        position: relative;
        width: calc(50% - 22px) !important;
        min-height: 78px !important;
        margin: 0 !important;
        padding: 0 0 14px !important;

        display: block !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Mốc bên trái */
    .elementor-widget-koi-mobile-timeline .t-item:nth-child(odd) {
        justify-self: start !important;
        text-align: right !important;
    }

    /* Mốc bên phải */
    .elementor-widget-koi-mobile-timeline .t-item:nth-child(even) {
        justify-self: end !important;
        text-align: left !important;
    }

    /* Chấm timeline */
    .elementor-widget-koi-mobile-timeline .t-dot {
        position: absolute !important;
        top: 5px !important;

        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;

        background: #ed1c2b !important;
        border: 3px solid #fff !important;
        border-radius: 50% !important;

        box-shadow: 0 0 0 2px #ff9da4 !important;
        z-index: 2;
    }

    .elementor-widget-koi-mobile-timeline
    .t-item:nth-child(odd) .t-dot {
        left: auto !important;
        right: -30px !important;
    }

    .elementor-widget-koi-mobile-timeline
    .t-item:nth-child(even) .t-dot {
        left: -30px !important;
        right: auto !important;
    }

    /* Năm */
    .elementor-widget-koi-mobile-timeline .t-year {
        margin: 0 0 2px !important;

        color: #d4151f !important;
        font-family: var(--font, "Quicksand", sans-serif) !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* Nội dung */
    .elementor-widget-koi-mobile-timeline .t-item p {
        margin: 0 !important;

        color: #8a6a6d !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
    }
}

/* =========================================================
   KOI PROGRAM METHOD
   ========================================================= */

.elementor-widget-koi-program-method {
    width: 100%;
}

.koi-program-method.method {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;

    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

/* Hình nằm bên trái */
.koi-program-method.method--image-left {
    grid-template-areas: "media content";
}

/* Hình nằm bên phải */
.koi-program-method.method--image-right {
    grid-template-areas: "content media";
}

.koi-program-method .method-m {
    grid-area: media;
    min-width: 0;
    min-height: 340px;
}

.koi-program-method .method-b {
    grid-area: content;
    min-width: 0;
    padding: 34px 28px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.koi-program-method .method-m .mf {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 340px;

    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--media-bg);
}

.koi-program-method__image {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
}

/*
 * Tiêu đề.
 */
.koi-program-method .method-b h3 {
    margin: 0 0 10px;

    color: var(--red);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
}

/*
 * Phụ đề tiếng Anh hoặc tên phương pháp.
 */
.koi-program-method__subtitle {
    margin: -2px 0 8px;

    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

/*
 * Nội dung mô tả nhiều đoạn.
 */
.koi-program-method__description {
    color: var(--ink-soft);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.65;
}

.koi-program-method__description p {
    margin: 0 0 10px;
}

.koi-program-method__description p:last-child {
    margin-bottom: 0;
}

/*
 * Khung Con nhận được.
 */
.koi-program-method .benefit {
    margin-top: 10px;
    padding: 13px 14px;

    background: var(--blush-tint);
    border-radius: var(--r-sm);
}

.koi-program-method .benefit strong {
    display: block;
    margin-bottom: 7px;

    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.koi-program-method .benefit ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.koi-program-method .benefit li {
    position: relative;
    margin: 0 0 5px;
    padding-left: 18px;

    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

.koi-program-method .benefit li:last-child {
    margin-bottom: 0;
}

/* Icon chấm đỏ */
.koi-program-method .benefit li::before {
    content: "";
    position: absolute;
    top: 0.58em;
    left: 0;

    width: 6px;
    height: 6px;

    background: var(--group-green);
    border-radius: 50%;
}

/*
 * Placeholder khi chưa chọn hình.
 */
.koi-program-method .mf-label {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 20px;

    color: var(--media-label);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.koi-program-method .mf-label svg {
    width: 28px;
    height: 28px;
    opacity: 0.48;
}

/*
 * Tablet và mobile.
 */
@media (max-width: 767px) {
    .koi-program-method.method,
    .koi-program-method.method--image-left,
    .koi-program-method.method--image-right {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "content";
    }

    .koi-program-method .method-m,
    .koi-program-method .method-m .mf,
    .koi-program-method__image {
        min-height: 230px;
    }

    .koi-program-method .method-b {
        padding: 24px 20px;
    }

    .koi-program-method .method-b h3 {
        font-size: 18px;
    }

    .koi-program-method__description {
        font-size: 14px;
    }
}

/* =========================================================
   KOI SCHEDULE INFOGRAPHIC
   ========================================================= */

.elementor-widget-koi-schedule-infographic {
    width: 100%;
}

.koi-schedule-infographic {
    width: 100%;
}

.koi-schedule-infographic .sched-infographic {
    position: relative;
    width: 100%;
    min-height: 320px;
    margin: 0 0 20px;
    padding: 0px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    overflow: hidden;
    background: #fff;
    border: 2px dashed var(--media-line);
    border-radius: var(--r-lg);
}

/* Nhãn trên góc trái */
.koi-schedule-infographic .sched-infographic::before {
    /*content: "Infographic timeline + ảnh thật";

    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 2;

    padding: 4px 10px;

    background: var(--blush-soft);
    border-radius: 6px;

    color: var(--red);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;*/
}

/*
 * Vùng ảnh.
 */
.koi-schedule-infographic__media {
    position: relative;
    width: 100%;
    min-height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.koi-schedule-infographic__media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.koi-schedule-infographic__media .mf-label {
    position: static;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: var(--media-label);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.koi-schedule-infographic__media .mf-label svg {
    width: 28px;
    height: 28px;
    opacity: 0.48;
}

/*
 * Timeline hoạt động.
 */
.koi-schedule-infographic .sched-flow {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.koi-schedule-infographic .sched-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 9px 16px;

    background: var(--blush-soft);
    border-radius: 999px;

    color: var(--red);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
}

.koi-schedule-infographic .sched-arr {
    color: var(--coral);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.7;
}

/*
 * Nội dung dưới infographic.
 */
.koi-schedule-infographic__description {
    max-width: 900px;
    margin: 0 auto;

    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

.koi-schedule-infographic__heading {
    margin-top: 22px;

    color: var(--red);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

/*
 * Nút cơ sở.
 */
.koi-schedule-infographic .campus-links {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.koi-schedule-infographic .campus-links a {
    min-height: 36px;
    padding: 8px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;

    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.koi-schedule-infographic .campus-links a:hover,
.koi-schedule-infographic .campus-links a:focus {
    color: var(--red);
    border-color: var(--red);
    background: var(--blush-tint);
    transform: translateY(-1px);
}

.koi-schedule-infographic .campus-links a:focus-visible {
    outline: 3px solid rgba(212, 21, 31, 0.18);
    outline-offset: 3px;
}

/*
 * Tablet.
 */
@media (max-width: 900px) {
    .koi-schedule-infographic .sched-infographic {
        min-height: 290px;
        padding: 48px 22px 32px;
    }

    .koi-schedule-infographic .sched-chip {
        padding: 9px 14px;
        font-size: 12.5px;
    }
}

/*
 * Mobile: hiển thị timeline dễ đọc, không tràn ngang.
 */
@media (max-width: 767px) {
    .koi-schedule-infographic .sched-infographic {
        min-height: 0;
        padding: 52px 16px 24px;
        gap: 18px;
        border-radius: 18px;
    }

    .koi-schedule-infographic .sched-infographic::before {
        top: 10px;
        left: 10px;
        max-width: calc(100% - 20px);

        font-size: 9px;
        white-space: normal;
    }

    .koi-schedule-infographic__media {
        min-height: 90px;
    }

    .koi-schedule-infographic .sched-flow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
        max-width: 280px;
    }

    .koi-schedule-infographic .sched-chip {
        width: 100%;
        min-height: 40px;
        padding: 9px 14px;
    }

    /*
     * Mũi tên chuyển thành hướng xuống.
     */
    .koi-schedule-infographic .sched-arr {
        height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 0;
    }

    .koi-schedule-infographic .sched-arr::before {
        content: "↓";
        font-size: 14px;
    }

    .koi-schedule-infographic__description {
        padding: 0 4px;
        font-size: 12.5px;
    }

    .koi-schedule-infographic__heading {
        margin-top: 18px;
        padding: 0 10px;
        font-size: 14.5px;
    }

    .koi-schedule-infographic .campus-links {
        gap: 8px;
    }

    .koi-schedule-infographic .campus-links a {
        min-height: 34px;
        padding: 7px 14px;
        font-size: 12px;
    }

}
@media (max-width: 767px) {
    .koi-schedule-infographic .sched-flow {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 10px 8px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }


    .koi-schedule-infographic .sched-chip {
        width: auto !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 16px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }

    .koi-schedule-infographic .sched-arr {
        width: auto !important;
        height: auto !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 14px !important;
        line-height: 1 !important;
        color: var(--coral) !important;
        opacity: 0.7 !important;
    }

    /* bỏ kiểu mũi tên xuống cũ */
    .koi-schedule-infographic .sched-arr::before {
        content: none !important;
    }
    .koi-schedule-infographic .campus-links {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
        margin: 14px auto 0 !important;
        padding:10px;
    }

    .koi-schedule-infographic .campus-links a {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 5px 8px !important;

        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: break-spaces !important;
    }

    /* 3 nút đầu: mỗi nút chiếm 2/6 cột */
    .koi-schedule-infographic .campus-links a:nth-child(-n + 3) {
        /*grid-column: span 2;*/
    }

    /* 2 nút sau: mỗi nút chiếm 3/6 cột */
    .koi-schedule-infographic .campus-links a:nth-child(n + 4) {
        /*grid-column: span 3;*/
    }
    .hide-button .sched-flow, .hide-button .campus-links {
    display: none !important;
}
}
/* =========================================================
   KOI PROGRAM METHOD – SLIDER MOBILE
   Container Elementor: .sec-stem-slide
   ========================================================= */

@media (max-width: 767px) {

    /*
     * Container ngoài chỉ làm nhiệm vụ giới hạn vùng hiển thị.
     */
    .sec-stem-slide {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;

        /*
         * Ghi đè biến flex của Elementor.
         */
        --flex-direction: row !important;
        --flex-wrap: nowrap !important;
    }

    /*
     * Đây mới là phần thực sự kéo ngang.
     */
    .sec-stem-slide > .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 16px 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: none;
    }

    .sec-stem-slide > .e-con-inner::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /*
     * Ghi đè chiều rộng widget do Elementor tạo.
     * 82vw giúp lộ một phần thẻ kế tiếp.
     */
    .sec-stem-slide > .e-con-inner >
    .elementor-widget-koi-program-method {
        flex: 0 0 82vw !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 82vw !important;

        width: 82vw !important;
        max-width: 320px !important;
        min-width: 270px !important;

        align-self: stretch !important;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        /*
         * Ghi đè các biến Elementor.
         */
        --flex-grow: 0 !important;
        --flex-shrink: 0 !important;
        --flex-basis: 82vw !important;
        --width: 82vw !important;
    }

    /*
     * Wrapper của mỗi widget cao hết thẻ.
     */
    .sec-stem-slide
    > .e-con-inner
    > .elementor-widget-koi-program-method
    > .elementor-widget-container {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
    }

    /*
     * Thẻ phương pháp.
     */
    .sec-stem-slide .koi-program-method.method {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "media"
            "content" !important;

        overflow: hidden;
        border-radius: 14px;
    }

    /*
     * Mobile luôn đặt hình phía trên,
     * bất kể desktop chọn hình trái hay phải.
     */
    .sec-stem-slide
    .koi-program-method.method--image-left,
    .sec-stem-slide
    .koi-program-method.method--image-right {
        direction: ltr !important;

        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "media"
            "content" !important;
    }

    /*
     * Phần hình.
     */
    .sec-stem-slide .koi-program-method .method-m {
        grid-area: media !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 290px !important;
        height: 290px !important;
    }

    .sec-stem-slide .koi-program-method .method-m .mf {
        width: 100% !important;
        height: 290px !important;
        min-height: 290px !important;

        border-radius: 0 !important;
    }

    .sec-stem-slide
    .koi-program-method
    .koi-program-method__image {
        width: 100% !important;
        height: 290px !important;
        min-height: 290px !important;

        display: block;
        object-fit: cover;
    }

    /*
     * Phần nội dung.
     */
    .sec-stem-slide .koi-program-method .method-b {
        grid-area: content !important;

        width: 100% !important;
        min-width: 0 !important;
        padding: 28px 14px 16px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .sec-stem-slide .koi-program-method .method-b h3 {
        margin: 0 0 7px !important;

        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .sec-stem-slide .koi-program-method__subtitle {
        margin: 0 0 7px !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .sec-stem-slide .koi-program-method__description {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .sec-stem-slide .koi-program-method__description p {
        margin: 0 0 8px !important;
    }

    .sec-stem-slide
    .koi-program-method__description p:last-child {
        margin-bottom: 0 !important;
    }

    /*
     * Khung Con nhận được.
     */
    .sec-stem-slide .koi-program-method .benefit {
        width: 100%;
        margin-top: 10px !important;
        padding: 11px 10px !important;

        border-radius: 10px;
    }

    .sec-stem-slide .koi-program-method .benefit strong {
        margin-bottom: 6px !important;
        font-size: 11.5px !important;
    }

    .sec-stem-slide .koi-program-method .benefit ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    .sec-stem-slide .koi-program-method .benefit li {
        margin: 0 0 4px !important;
        padding-left: 16px !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .sec-stem-slide
    .koi-program-method
    .benefit li:last-child {
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   KOI COMPANION SPLIT
   ========================================================= */

.elementor-widget-koi-companion-split {
    width: 100%;
}

.koi-companion-split {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* Hình bên trái */
.koi-companion-split--image-left {
    grid-template-areas: "media content";
}

/* Hình bên phải */
.koi-companion-split--image-right {
    grid-template-areas: "content media";
}

.koi-companion-split__media {
    grid-area: media;
    min-width: 0;
    min-height: 400px;
}

.koi-companion-split__media .mf {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;

    overflow: hidden;
    background: var(--media-bg);
    border: 1.5px dashed var(--media-line);
    border-radius: var(--r);
}

.koi-companion-split__image {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: block;
    object-fit: cover;
}

.koi-companion-split__content {
    grid-area: content;
    min-width: 0;
}

.koi-companion-split__title {
    margin: 0 0 18px;

    color: var(--red);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.koi-companion-split__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.koi-companion-split__item {
    padding: 18px 18px;

    background: var(--blush-tint);
    border: 1px solid #f0dede;
    border-left: 4px solid var(--red);
    border-radius: 10px;
}

.koi-companion-split__item h3 {
    margin: 0 0 7px;

    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.koi-companion-split__item-text {
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.65;
}

/* Placeholder ảnh */
.koi-companion-split__media .mf-label {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 20px;

    color: var(--media-label);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.koi-companion-split__media .mf-label svg {
    width: 28px;
    height: 28px;
    opacity: 0.48;
}

/* Tablet */
@media (max-width: 1024px) {
    .koi-companion-split {
        gap: 30px;
    }

    .koi-companion-split__media,
    .koi-companion-split__media .mf,
    .koi-companion-split__image {
        min-height: 360px;
    }

    .koi-companion-split__title {
        font-size: 27px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .koi-companion-split,
    .koi-companion-split--image-left,
    .koi-companion-split--image-right {
        grid-template-columns: 1fr;
        grid-template-areas:
        "content"
        "media";
        gap: 24px;
    }
    .media-1 .koi-companion-split--image-left{
        grid-template-areas:
          "media"
        "content";
    }
    .elementor-widget-koi-companion-split{
      padding:15px;
    }
    .koi-companion-split__content {
        grid-area: content;
    }

    .koi-companion-split__media {
        grid-area: media;
    }
    .koi-companion-split__media,
    .koi-companion-split__media .mf,
    .koi-companion-split__image {
        min-height: 280px;
    }

    .koi-companion-split__title {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 1.3;
    }

    .koi-companion-split__items {
        gap: 10px;
    }

    .koi-companion-split__item {
        padding: 15px 14px;
        border-left-width: 3px;
    }

    .koi-companion-split__item h3 {
        font-size: 13.5px;
    }

    .koi-companion-split__item-text {
        font-size: 13px;
        line-height: 1.6;
    }
}
/* =========================================================
   KOI LOCATION CARDS
   ========================================================= */

.elementor-widget-koi-location-cards {
    width: 100%;
}

.koi-location-cards {
    width: 100%;
}

.koi-location-cards__grid {
    width: 100%;
    display: grid;
    align-items: stretch;
    gap: 22px;
}

.koi-location-cards__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koi-location-cards__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koi-location-cards__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.koi-location-card {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);

    transition:
        transform 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        border-color 0.3s var(--ease);
}

.koi-location-card:hover {
    transform: translateY(-3px);
    border-color: #e8d5d3;
    box-shadow: var(--sh);
}

/*
 * Hình ảnh.
 */
.koi-location-card__media {
    position: relative;
    width: 100%;
    /*min-height: 265px;*/

    overflow: hidden;
    display: grid;
    place-items: center;

    background: var(--media-bg);
    border-bottom: 1px dashed var(--media-line);
}

.koi-location-card__image {
    width: 100%;
    height: 265px;
    display: block;
    object-fit: cover;
}

.koi-location-card__placeholder {
    padding: 30px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: var(--media-label);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.koi-location-card__placeholder svg {
    width: 29px;
    height: 29px;
    opacity: 0.48;
}

/*
 * Nội dung.
 */
.koi-location-card__body {
    flex: 1;
    min-width: 0;
    padding: 22px 20px;

    display: flex;
    flex-direction: column;
}

.koi-location-card__title {
    margin: 0 0 10px;

    color: var(--red);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.koi-location-card__address {
    margin-bottom: 3px;

    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.koi-location-card__schedule {
    margin-bottom: 10px;

    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
}

.koi-location-card__description {
    margin-bottom: 16px;

    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
}

.koi-location-card__link {
    width: fit-content;
    margin-top: auto;

    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--red) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}

.koi-location-card__link:hover {
    gap: 8px;
    color: var(--red-deep);
}

.koi-location-card__link span {
    line-height: 1;
}

/*
 * Tablet.
 */
@media (max-width: 1024px) {
    .koi-location-cards__grid--3,
    .koi-location-cards__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Mobile.
 */
@media (max-width: 767px) {
    .koi-location-cards__grid,
    .koi-location-cards__grid--2,
    .koi-location-cards__grid--3,
    .koi-location-cards__grid--4 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .koi-location-card__media {
        min-height: 230px;
    }

    .koi-location-card__image {
        height: 230px;
    }

    .koi-location-card__body {
        padding: 19px 17px;
    }

    .koi-location-card__title {
        margin-bottom: 8px;
        font-size: 16px;
    }

    .koi-location-card__address {
        font-size: 12.5px;
    }

    .koi-location-card__schedule {
        font-size: 12px;
    }

    .koi-location-card__description {
        font-size: 13.5px;
    }

    .koi-location-card__link {
        font-size: 13.5px;
    }
}

/* =========================================================
   KOI REVIEW CARDS
   ========================================================= */

.elementor-widget-koi-review-cards {
    width: 100%;
}

.koi-review-cards {
    width: 100%;
}

.koi-review-cards__grid {
    width: 100%;
    display: grid;
    align-items: stretch;
    gap: 18px;
}

.koi-review-cards__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koi-review-cards__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koi-review-cards__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.koi-review-card {
    min-width: 0;
    min-height: 405px;
    height: 100%;
    padding: 20px 21px 24px;

    display: flex;
    flex-direction: column;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);

    transition:
        transform 0.3s var(--ease),
        border-color 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}

.koi-review-card:hover {
    transform: translateY(-3px);
    border-color: #e8d5d3;
    box-shadow: var(--sh);
}

/*
 * Số sao.
 */
.koi-review-card__stars {
    margin-bottom: 12px;

    display: flex;
    align-items: center;
    gap: 1px;

    font-size: 18px;
    line-height: 1;
}

.koi-review-card__stars span {
    color: #ddd2d2;
}

.koi-review-card__stars span.is-active {
    color: #ffa500;
}

/*
 * Nội dung đánh giá.
 */
.koi-review-card__text {
    margin-bottom: 22px;

    color: var(--ink-soft);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.65;
}

/*
 * Đẩy phần tác giả xuống đáy thẻ.
 */
.koi-review-card__author {
    margin-top: auto;

    display: flex;
    align-items: center;
    gap: 12px;
}

.koi-review-card__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    overflow: hidden;
    background: var(--media-bg);
    border: 1px solid var(--line);
    border-radius: 50%;
}

.koi-review-card__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.koi-review-card__author-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.koi-review-card__author-info strong {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.koi-review-card__author-info span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

/*
 * Tablet.
 */
@media (max-width: 1024px) {
    .koi-review-cards__grid--3,
    .koi-review-cards__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Mobile.
 */
@media (max-width: 767px) {
    .koi-review-cards__grid,
    .koi-review-cards__grid--2,
    .koi-review-cards__grid--3,
    .koi-review-cards__grid--4 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .koi-review-card {
        min-height: 0;
        padding: 18px 17px 20px;
    }

    .koi-review-card__stars {
        margin-bottom: 10px;
        font-size: 17px;
    }

    .koi-review-card__text {
        margin-bottom: 20px;
        font-size: 13.5px;
        line-height: 1.65;
    }

    .koi-review-card__avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}
/* =========================================================
   KOI ACTIVITY GRID
   ========================================================= */

.elementor-widget-koi-activity-grid {
    width: 100%;
}

.koi-activity-grid {
    width: 100%;
}

.koi-activity-grid__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.koi-activity-grid__item {
    position: relative;
    min-width: 0;
    min-height: 150px;

    overflow: hidden;

    display: grid;
    place-items: center;

    background: var(--media-bg);
    border-radius: var(--r);
}

/* Hình thật */
.koi-activity-grid__image {
    width: 100%;
    height: 100%;
    min-height: 150px;

    display: block;
    object-fit: cover;
}

/* Placeholder */
.koi-activity-grid__placeholder {
    width: 100%;
    height: 100%;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 20px;

    color: var(--media-label);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.koi-activity-grid__placeholder svg {
    width: 28px;
    height: 28px;
    opacity: .48;
}

/* Nhãn khi đã có ảnh */
.koi-activity-grid__label {
    position: absolute;
    left: 50%;
    bottom: 14px;

    transform: translateX(-50%);

    max-width: calc(100% - 24px);

    padding: 5px 10px;

    background: rgba(255,255,255,.9);
    border-radius: 6px;

    color: var(--ink-soft);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;

    text-align: center;
    white-space: nowrap;
}

/* Tablet */
@media (max-width: 1024px) {
    .koi-activity-grid__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile: 1 hàng 2 cột */
@media (max-width: 767px) {
    .koi-activity-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .koi-activity-grid__item,
    .koi-activity-grid__image,
    .koi-activity-grid__placeholder {
        min-height: 135px;
    }

    .koi-activity-grid__placeholder {
        padding: 14px 8px;

        font-size: 10.5px;
    }

    .koi-activity-grid__placeholder svg {
        width: 24px;
        height: 24px;
    }

    .koi-activity-grid .mf-tag {
        top: 8px;
        left: 8px;

        padding: 3px 7px;

        font-size: 9px;
    }

    .koi-activity-grid__label {
        bottom: 10px;
        font-size: 10px;
    }
}
/* =========================================================
   ACTIVITY GRID - FEATURED FIRST IMAGE
   ========================================================= */

/* Desktop */
.koi-activity-grid--featured .koi-activity-grid__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 150px;
    gap: 12px;
}

/* Ảnh đầu lớn 2 cột x 2 hàng */
.koi-activity-grid--featured
.koi-activity-grid__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Tất cả item theo chiều cao grid */
.koi-activity-grid--featured
.koi-activity-grid__item {
    min-height: 0;
    height: 100%;
}

.koi-activity-grid--featured
.koi-activity-grid__image,
.koi-activity-grid--featured
.koi-activity-grid__placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Ảnh đầu cao theo 2 hàng */
.koi-activity-grid--featured
.koi-activity-grid__item:first-child
.koi-activity-grid__image,
.koi-activity-grid--featured
.koi-activity-grid__item:first-child
.koi-activity-grid__placeholder {
    height: 100%;
}

@media (max-width: 767px) {

    .koi-activity-grid--featured
    .koi-activity-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
    }

    /* Ảnh đầu chiếm nguyên 2 cột */
    .koi-activity-grid--featured
    .koi-activity-grid__item:first-child {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;

        height: 225px !important;
        min-height: 225px !important;
    }

    /* Các ảnh còn lại chia 2 cột */
    .koi-activity-grid--featured
    .koi-activity-grid__item:not(:first-child) {
        grid-column: auto !important;
        grid-row: auto !important;

        height: 190px !important;
        min-height: 190px !important;
    }

    .koi-activity-grid--featured
    .koi-activity-grid__image,
    .koi-activity-grid--featured
    .koi-activity-grid__placeholder {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }
}
.hide-button .sched-flow, .hide-button .campus-links, .hide-campus .campus-links{
    display: none !important;
}
/* =========================================================
   KOI CAMPUS DETAIL + MAP
   ========================================================= */

.elementor-widget-koi-campus-detail-map {
    width: 100%;
}

.koi-campus-detail-map {
    width: 100%;
}

.koi-campus-detail-map__heading {
    margin: 0 0 34px;
    text-align: center;
    color: var(--ink);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.koi-campus-detail-map__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

/* Card trái */
.koi-campus-detail-map__card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.koi-campus-detail-map__media {
    position: relative;
    min-height: 275px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--media-bg);
    border-bottom: 1px dashed var(--media-line);
        aspect-ratio: 16/9;
}

.koi-campus-detail-map__media img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.koi-campus-detail-map__media .mf-label {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: var(--media-label);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.koi-campus-detail-map__body {
    padding: 20px 18px 18px;
}

.koi-campus-detail-map__body h3 {
    margin: 0 0 10px;
    color: var(--red);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.koi-campus-detail-map__meta {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.koi-campus-detail-map__meta strong {
    font-weight: 500;
}

.koi-campus-detail-map__description {
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.65;
}

.koi-campus-detail-map__consult {
    margin-top: 14px;
}

/* Map */
.koi-campus-detail-map__map {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background: var(--media-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.koi-campus-detail-map__map-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;

    padding: 5px 10px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 6px;

    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.koi-campus-detail-map__iframe,
.koi-campus-detail-map__iframe iframe {
    width: 100%;
    height: 100%;
    min-height: 360px;
}

.koi-campus-detail-map__iframe iframe {
    display: block;
    border: 0;
}

.koi-campus-detail-map__placeholder {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;
}

.koi-campus-detail-map__pin {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--sh);

    color: var(--red);
    font-size: 12px;
    font-weight: 600;
}

.koi-campus-detail-map__pin i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

/* Mobile */
@media (max-width: 767px) {
    .koi-campus-detail-map__heading {
        margin-bottom: 22px;
        font-size: 22px;
    }

    .koi-campus-detail-map__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .koi-campus-detail-map__media,
    .koi-campus-detail-map__media img {
       /* min-height: 220px;
        height: 220px;*/
    }

    .koi-campus-detail-map__body {
        padding: 18px 16px;
    }

    .koi-campus-detail-map__map,
    .koi-campus-detail-map__iframe,
    .koi-campus-detail-map__iframe iframe {
        min-height: 300px;
    }
}
/* =========================================================
   KOI CAMPUS INTRO CARDS
   ========================================================= */

.elementor-widget-koi-campus-intro-cards {
    width: 100%;
}

.koi-campus-intro-cards {
    width: 100%;
}

.koi-campus-intro-cards__grid {
    width: 100%;
    display: grid;
    align-items: stretch;
    gap: 20px;
}

.koi-campus-intro-cards__grid--1 {
    grid-template-columns: 1fr;
}

.koi-campus-intro-cards__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koi-campus-intro-cards__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Card */
.koi-campus-intro-card {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);

    transition:
        border-color .3s var(--ease),
        box-shadow .3s var(--ease),
        transform .3s var(--ease);
}

.koi-campus-intro-card:hover {
    border-color: #e8d5d3;
    box-shadow: var(--sh);
    transform: translateY(-2px);
}

/* =========================================================
   IMAGE
   ========================================================= */

.koi-campus-intro-card__media {
    position: relative;
    width: 100%;
    height: 278px;
    min-height: 278px;

    overflow: hidden;

    display: grid;
    place-items: center;

    background: var(--media-bg);
    border-bottom: 1px dashed var(--media-line);
}

.koi-campus-intro-card__image {
    width: 100%;
    height: 100% !important;
    display: block !important;
    object-fit: cover;
}

.koi-campus-intro-card__placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 20px;

    color: var(--media-label);

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

.koi-campus-intro-card__placeholder svg {
    width: 28px;
    height: 28px;
    opacity: .48;
}

/* =========================================================
   BODY
   ========================================================= */

.koi-campus-intro-card__body {
    flex: 1;
    min-width: 0;

    padding: 20px 18px 18px;

    display: flex;
    flex-direction: column;
}

.koi-campus-intro-card__title {
    margin: 0 0 10px;

    color: var(--red);

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.koi-campus-intro-card__description {
    color: var(--ink-soft);

    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.65;
}

.koi-campus-intro-card__description p {
    margin: 0 0 9px;
}

.koi-campus-intro-card__description p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   CONSULT SHORTCODE
   ========================================================= */

.koi-campus-intro-card__consult {
    margin-top: auto;
    padding-top: 14px;

    display: flex;
    align-items: flex-start;
}

/*
 * Chỉ style nút bên trong shortcode,
 * không ảnh hưởng popup/form ở nơi khác.
 */
.koi-campus-intro-card__consult > div {
    width: auto;
}

.koi-campus-intro-card__consult button,
.koi-campus-intro-card__consult > a,
.koi-campus-intro-card__consult .koi-consult-btn {
    width: auto;
    min-width: 98px;
    min-height: 36px;

    padding: 7px 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #fff !important;

    border: 1px solid var(--red);
    border-radius: 999px;

    color: var(--red);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    box-shadow: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.koi-campus-intro-card__consult button:hover,
.koi-campus-intro-card__consult > a:hover,
.koi-campus-intro-card__consult .koi-consult-btn:hover {
    transform: translateY(-1px);
        color: var(--red) !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .koi-campus-intro-cards__grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .koi-campus-intro-card__media {
        height: 250px;
        min-height: 250px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .koi-campus-intro-cards__grid,
    .koi-campus-intro-cards__grid--1,
    .koi-campus-intro-cards__grid--2,
    .koi-campus-intro-cards__grid--3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .koi-campus-intro-card__media {
        height: 220px;
        min-height: 220px;
    }

    .koi-campus-intro-card__body {
        padding: 17px 15px 16px;
    }

    .koi-campus-intro-card__title {
        margin-bottom: 8px;
        font-size: 15.5px;
    }

    .koi-campus-intro-card__description {
        font-size: 13px;
        line-height: 1.6;
    }

    .koi-campus-intro-card__consult {
        padding-top: 12px;
    }

    .koi-campus-intro-card__consult button,
    .koi-campus-intro-card__consult > a,
    .koi-campus-intro-card__consult .koi-consult-btn {
        min-height: 34px;
        padding: 7px 14px;
        font-size: 11.5px;
    }
}

/* =========================================================
   KOI ENROLLMENT STEPS
   ========================================================= */

.elementor-widget-koi-enrollment-steps {
    width: 100%;
}

.koi-enrollment-steps {
    width: 100%;
}

.koi-enrollment-steps__track {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}

/* =========================================================
   CARD
   ========================================================= */

.koi-enrollment-step {
    flex: 1 1 0;
    min-width: 0;
    min-height: 180px;

    padding: 28px 18px 22px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);

    text-align: center;
}

/* Number */
.koi-enrollment-step__number {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    margin-bottom: 16px;

    display: grid;
    place-items: center;

    background: var(--red);

    border-radius: 50%;

    color: #fff;

    font-size: 15px;
    font-weight: 700;

   /* box-shadow: 0 6px 15px rgba(212, 21, 31, .22);*/
}

/* Title */
.koi-enrollment-step__title {
    margin: 0 0 8px;

    color: var(--ink);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

    text-align: center;
}

/* Description */
.koi-enrollment-step__description {
    color: var(--muted);

    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;

    text-align: center;
}

.koi-enrollment-step__description p {
    margin: 0;
}

/*
 * Link #form
 */
.koi-enrollment-step__description a[href="#form"] {
    display: inline-block;

    font-weight: 700;
    color: var(--red);
    background: var(--blush-soft);
    padding: 1px 6px;
    border-radius: 4px;
    text-decoration: none;
    border-bottom: 1.5px solid var(--coral);
    cursor: pointer;
}

.koi-enrollment-step__description a[href="#form"]:hover {
       background: var(--blush);
}

/* =========================================================
   ARROW
   ========================================================= */

.koi-enrollment-step__arrow {
    flex: 0 0 16px;

    color: var(--red);

    font-size: 25px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
}

/* =========================================================
   HIDDEN SHORTCODE
   ========================================================= */

.koi-enrollment-steps__form-trigger {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

/* =========================================================
   MOBILE SLIDER
   ========================================================= */

@media (max-width: 767px) {

    .koi-enrollment-steps {
        width: 100%;

        overflow: hidden;
    }

    .koi-enrollment-steps__track {
        width: 100%;

        display: flex !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: 8px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px 12px !important;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: none;
    }

    .koi-enrollment-steps__track::-webkit-scrollbar {
        display: none;
    }

    /*
     * Card mobile nhỏ giống hình.
     */
    .koi-enrollment-step {
        flex: 0 0 132px !important;

        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;

        min-height: 185px !important;

        padding: 14px 10px 15px !important;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .koi-enrollment-step__number {
        width: 36px;
        height: 36px;
        flex-basis: 36px;

        margin-bottom: 12px;

        font-size: 14px;
    }

    .koi-enrollment-step__title {
        margin-bottom: 7px;

        font-size: 13.5px;
        line-height: 1.3;
    }

    .koi-enrollment-step__description {
        font-size: 11.5px;
        line-height: 1.4;
    }

    /*
     * Mũi tên vẫn nằm giữa card.
     */
    .koi-enrollment-step__arrow {
        flex: 0 0 14px !important;

        width: 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 20px;
    }
.koi-enrollment-step__arrow svg {
    width: 20px !important;
    height: 20px !important;

}
    .lead-c-76 .lead-c{    max-width: 760px !important;}
    .koi-campus-detail-map__consult .koi-consult-open:nth-of-type(2){
      margin-top:12px;
    }
}
/* =========================================================
   KOI CAMPUS MAP TABS
   ========================================================= */

.elementor-widget-koi-campus-map-tabs {
    width: 100%;
}

.koi-campus-map-tabs {
    width: 100%;
}

/* Tabs */
.koi-campus-map-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    margin-bottom: 18px;
}

.koi-campus-map-tabs__tab {
    min-height: 38px;
    padding: 8px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: #fff !important;

    border: 1px solid var(--line);
    border-radius: 999px;

    color: var(--ink-soft);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;

    cursor: pointer;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.koi-campus-map-tabs__dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;
    background: var(--red);
}

.koi-campus-map-tabs__tab:hover {
    border-color: var(--red) !important;
    color: var(--red);
}

.koi-campus-map-tabs__tab.is-active {
    background: var(--red) !important;
    border-color: var(--red);
    color: #fff;

    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.koi-campus-map-tabs__tab.is-active
.koi-campus-map-tabs__dot {
    background: #fff;
}

/* Map area */
.koi-campus-map-tabs__maps {
    position: relative;
    width: 100%;

    overflow: hidden;

    background: var(--media-bg);

    border: 1px solid var(--line);
    border-radius: 22px;
}

.koi-campus-map-tabs__panel {
    display: none;
    width: 100%;
}

.koi-campus-map-tabs__panel.is-active {
    display: block;
}

/* Google maps iframe */
.koi-campus-map-tabs__panel iframe {
    width: 100% !important;

    height: 550px !important;

    display: block;

    border: 0 !important;
}

/* Empty */
.koi-campus-map-tabs__empty {
    min-height: 550px;

    display: grid;
    place-items: center;

    color: var(--muted);

    font-size: 13px;
    font-weight: 500;
}

/* Tablet */
@media (max-width: 1024px) {
    .koi-campus-map-tabs__panel iframe,
    .koi-campus-map-tabs__empty {
        height: 460px !important;
        min-height: 460px;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .koi-campus-map-tabs__nav {
      /*  flex-wrap: nowrap;
        justify-content: flex-start;*/

        gap: 8px;

        overflow-x: auto;

        margin-bottom: 14px;
        padding: 0 2px 8px;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .koi-campus-map-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    .koi-campus-map-tabs__tab {
        flex: 0 0 auto;

        min-height: 34px;

        padding: 7px 13px;

        font-size: 12px;

        white-space: nowrap;
    }

    .koi-campus-map-tabs__maps {
        border-radius: 16px;
    }

    .koi-campus-map-tabs__panel iframe,
    .koi-campus-map-tabs__empty {
       /* height: 350px !important;
        min-height: 350px;*/
              aspect-ratio: 3 / 4;
        height: unset !important;
    }
    .koi-campus-map-tabs{
      padding:10px;
    }
}
/* =========================================================
   KOI CONTACT / THANK YOU
   ========================================================= */

.elementor-widget-koi-contact-thankyou {
    width: 100%;
}

.koi-contact-thankyou {
    width: 100%;
}

.koi-contact-thankyou__card {
    width: 100%;
    max-width: 1120px;
    min-height: 500px;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(360px, .88fr);

    overflow: hidden;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 30px;

    box-shadow:
        0 28px 80px
        rgba(16, 21, 54, .13);
}


/* =========================
   LEFT
   ========================= */

.koi-contact-thankyou__copy {
    padding: 58px 54px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: left;
}

.koi-contact-thankyou__success {
    width: 58px;
    height: 58px;

    margin-bottom: 18px;

    display: grid;
    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--red),
                #fff 10%
            ),
            var(--red)
        );

    border-radius: 50%;

    box-shadow:
        0 10px 24px
        color-mix(
            in srgb,
            var(--red) 24%,
            transparent
        );
}

.koi-contact-thankyou__success svg {
    width: 28px;
    height: 28px;
}

.koi-contact-thankyou__eyebrow {
    margin-bottom: 8px;

    color: var(--red);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.koi-contact-thankyou__title {
    max-width: 13ch;

    margin: 0 0 12px;

    color: var(--ink);

    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.16;

    letter-spacing: -.035em;
}

.koi-contact-thankyou__lead {
    max-width: 580px;

    color: var(--ink-soft);

    font-size: 16px;
    line-height: 1.65;
}


/* =========================
   REMINDER
   ========================= */

.koi-contact-thankyou__reminder {
    width: 100%;
    max-width: 580px;

    margin-top: 22px;
    padding: 15px 16px;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    background:
        color-mix(
            in srgb,
            var(--red) 7%,
            #fff
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--red) 14%,
            #fff
        );

    border-left:
        3px solid var(--red);

    border-radius: 14px;
}

.koi-contact-thankyou__reminder-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: grid;
    place-items: center;

    color: #fff;
    background: var(--red);

    border-radius: 50%;
}

.koi-contact-thankyou__reminder-icon svg {
    width: 18px;
    height: 18px;
}

.koi-contact-thankyou__reminder-copy {
    min-width: 0;

    padding-top: 1px;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.koi-contact-thankyou__reminder-copy strong {
    color: var(--ink);

    font-size: 14.5px;
    line-height: 1.35;
}

.koi-contact-thankyou__reminder-copy span {
    color: var(--ink-soft);

    font-size: 13px;
    line-height: 1.45;
}


/* =========================
   BUTTONS
   ========================= */

.koi-contact-thankyou__actions {
    margin-top: 20px;

    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.koi-contact-thankyou__button {
    width: auto;
    min-width: 170px;
    min-height: 48px;

    padding: 10px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease;
}

.koi-contact-thankyou__button:hover {
    transform: translateY(-1px);
}

.koi-contact-thankyou__button svg {
    width: 17px;
    height: 17px;
}

.koi-contact-thankyou__button--primary {
    color: #fff !important;

    background: var(--red);

    border: 1px solid var(--red);
}

.koi-contact-thankyou__button--primary:hover {
    color: #fff;

    background: var(--red-deep, var(--red));
}

.koi-contact-thankyou__button--phone {
    color: var(--red);

    background: #fff;

    border: 1px solid
        color-mix(
            in srgb,
            var(--red) 35%,
            #fff
        );
}


/* =========================
   RIGHT VISUAL
   ========================= */

.koi-contact-thankyou__visual {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--red) 88%,
                #fff
            ) 0%,
            var(--red) 58%,
            var(--red-deep, var(--red)) 100%
        );
}

.koi-contact-thankyou__visual::before {
    content: "";

    position: absolute;
    inset: 28px;

    border:
        1px solid
        rgba(255, 255, 255, .2);

    border-radius: 28px;
}

.koi-contact-thankyou__visual-mark {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 128px;
    height: 128px;

    z-index: 2;

    overflow: hidden;

    display: grid;
    place-items: center;

    color: var(--red);

    background: #fff;

    border-radius: 50%;

    box-shadow:
        0 22px 50px
        rgba(16, 21, 54, .25);
}

.koi-contact-thankyou__visual-mark svg {
    width: 58px;
    height: 58px;
}

.koi-contact-thankyou__visual-mark img {
    width: 100%;
    height: 100%;

    padding: 20px;

    display: block;

    object-fit: contain;
}


/* Orbits */

.koi-contact-thankyou__orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255, 255, 255, .22);

    border-radius: 50%;
}

.koi-contact-thankyou__orbit--1 {
    width: 250px;
    height: 250px;
}

.koi-contact-thankyou__orbit--2 {
    width: 360px;
    height: 360px;
}


/* Dots */

.koi-contact-thankyou__dot {
    position: absolute;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .65);

    box-shadow:
        0 0 0 8px
        rgba(255, 255, 255, .09);
}

.koi-contact-thankyou__dot--1 {
    left: 20%;
    top: 24%;

    width: 16px;
    height: 16px;
}

.koi-contact-thankyou__dot--2 {
    right: 19%;
    top: 31%;

    width: 11px;
    height: 11px;
}

.koi-contact-thankyou__dot--3 {
    right: 24%;
    bottom: 20%;

    width: 20px;
    height: 20px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .koi-contact-thankyou__card {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .8fr);
    }

    .koi-contact-thankyou__copy {
        padding: 44px 36px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .koi-contact-thankyou__card {
        grid-template-columns: 1fr;

        min-height: 0;

        border-radius: 20px;
    }

    .koi-contact-thankyou__copy {
        padding: 32px 22px;
    }

    .koi-contact-thankyou__success {
        width: 50px;
        height: 50px;

        margin-bottom: 15px;
    }

    .koi-contact-thankyou__success svg {
        width: 24px;
        height: 24px;
    }

    .koi-contact-thankyou__title {
        max-width: none;

        font-size: 30px;
    }

    .koi-contact-thankyou__lead {
        font-size: 14px;
    }

    .koi-contact-thankyou__reminder {
        margin-top: 18px;

        padding: 13px;
    }

    .koi-contact-thankyou__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .koi-contact-thankyou__button {
        width: 100%;
        min-width: 0;
    }

    .koi-contact-thankyou__visual {
        /*min-height: 300px;*/
        display: none;
    }
    .koi-contact-thankyou{
      padding:10px;
    }
    .koi-contact-thankyou__visual::before {
        inset: 18px;

        border-radius: 20px;
    }

    .koi-contact-thankyou__visual-mark {
        width: 96px;
        height: 96px;
    }

    .koi-contact-thankyou__visual-mark svg {
        width: 43px;
        height: 43px;
    }

    .koi-contact-thankyou__orbit--1 {
        width: 190px;
        height: 190px;
    }

    .koi-contact-thankyou__orbit--2 {
        width: 270px;
        height: 270px;
    }
}