/* "Vở ô ly số" — visual layer loaded last.
   Mực xanh cho nội dung, bút đỏ cho ghi chú lề, giấy ô ly chỉ ở hero và CTA. */
:root{
  --pen:#d7263d;        /* bút đỏ: ghi chú lề, đánh dấu */
  --marker:#ffe27a;     /* bút dạ quang: chỉ dùng ở câu định vị */
  --rule-fine:#e4e9f6;  /* dòng kẻ phụ ô ly */
  --hand:"Patrick Hand","Comic Sans MS",cursive;
  --r-sm:4px;
  --r-md:8px;
}
body{background:var(--bg)}

/* Headings: Be Vietnam Pro như trang chủ hệ thống MOOC, không bóng, không gradient */
h1,h2,h3,h4,.vm-core-title,.num,.yr,.manifesto p{font-family:var(--font-display)}
h2.title{font-weight:700;letter-spacing:-.025em;color:var(--navy);line-height:1.1}
.lead{color:var(--muted)}

/* Eyebrow → ghi chú bút đỏ bên lề, viết thường */
.eyebrow{font-family:var(--hand);font-size:24px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--pen);transform:rotate(-1.2deg);transform-origin:left center}
.eyebrow::before{display:none}
.hero .eyebrow{color:var(--pen)}
.journey .eyebrow{color:#ffd3d8}
.dialog-head .eyebrow,.member-heading .eyebrow{font-size:21px}

/* Ghi chú lề không cần hiệu ứng xuất hiện theo từng mục */
.js-ready .reveal{opacity:1;transform:none;transition:none}
.vm-rise,.vm-rise-late,.vm-rise-15,.vm-rise-25,.vm-rise-35,.vm-conn{animation:none}

/* Buttons: khối mực phẳng, góc nhỏ */
.btn{border-radius:var(--r-sm);padding:14px 24px;font-weight:600;box-shadow:none;transition:background .2s,color .2s,border-color .2s}
.btn:hover{transform:none}
.btn-primary{background:var(--blue);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--navy)}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-ghost:hover{background:var(--sky)}

/* NAV: thanh giấy trắng */
.nav{background:rgba(250,251,253,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(250,251,253,.96);box-shadow:none;border-bottom-color:var(--line)}
.logo{background:transparent;padding:0;border-radius:0}
.nav .logo{background:transparent;padding:0}
.nav-links,.nav.scrolled .nav-links{color:var(--muted)}
.nav-links a:hover,.nav.scrolled .nav-links a:hover{color:var(--blue)}
.nav-links a[aria-current="location"],.nav.scrolled .nav-links a[aria-current="location"]{color:var(--navy);border-color:var(--pen)}
.menu-toggle,.nav.scrolled .menu-toggle{color:var(--navy);border-radius:var(--r-sm)}
.nav.menu-open{background:var(--bg)}
.nav.menu-open .menu-toggle{color:var(--navy)}
.nav-links.is-open{border-radius:var(--r-md);box-shadow:0 18px 40px -20px rgba(20,33,61,.35)}

/* HERO: trang vở ô ly, đường kẻ lề đỏ */
.hero{color:var(--ink);background:var(--bg)}
.hero::after{
  mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,.55));-webkit-mask-image:linear-gradient(90deg,#000 45%,rgba(0,0,0,.55));
  background-image:
    linear-gradient(90deg,var(--rule) 1px,transparent 1px),
    linear-gradient(var(--rule) 1px,transparent 1px),
    repeating-linear-gradient(180deg,transparent 0 9px,var(--rule-fine) 9px 10px);
  background-size:40px 40px,40px 40px,auto;
  background-position:-1px 0,0 0,0 0}
.hero::before{content:"";position:absolute;top:0;bottom:0;z-index:1;width:0;border-left:2px solid var(--pen);opacity:.7;
  left:max(10px,calc((100% - var(--max))/2 - 8px));transform-origin:top;animation:nbMargin 1.1s cubic-bezier(.3,.7,.2,1) both}
.hero-grid{z-index:2}
.hero h1{color:var(--blue);font-weight:800;letter-spacing:-.015em;margin:20px 0 26px}
.hero h1 span{animation:nbWrite .9s cubic-bezier(.3,.7,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.25s}
.hero h1 span:nth-child(3){animation-delay:.5s}
.hero h1 .hl{background:none;color:inherit;-webkit-text-fill-color:currentColor}
.hero p{color:var(--ink)}
@keyframes nbMargin{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes nbWrite{from{clip-path:inset(-.3em 100% -.3em -.1em)}to{clip-path:inset(-.3em -.1em -.3em -.1em)}}
.hero .scroll-hint{color:var(--muted);letter-spacing:.04em;text-transform:none;font-size:13px}
.scroll-hint i{background:linear-gradient(var(--muted),transparent)}

/* Carousel: màn hình thật, viền mực, không kính mờ */
.stage{border-radius:var(--r-md);box-shadow:none}
.scene{border-radius:var(--r-md);background:#fff;border:1.5px solid var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none;padding:18px}
.scene-tag{color:var(--navy);text-transform:none;letter-spacing:0;font-size:15px;font-weight:700}
.scene-body{border-radius:var(--r-sm);padding:0;background:transparent}
.scene-body img{border-radius:var(--r-sm);background:var(--bg-soft)}
.hero .scene-body p{color:var(--muted);padding:0}
.scene-dot span{background:var(--rule);border-radius:1px;height:4px}
.scene-dot.on span{background:var(--blue)}

/* Overview: sơ đồ phác bằng mực trên giấy */
.overview-copy .title{color:var(--navy)}
.overview-copy .lead{color:var(--ink)}
.overview-note{border-left:2px solid var(--pen);color:var(--navy)}
.vm-stage{background:#fff;color:var(--ink);border:1.5px solid var(--navy);border-radius:var(--r-md);box-shadow:none}
.vm-grid,.vm-orb,.vm-card-glow,.vm-core-spin,.vm-pulse{display:none}
.vm-step-label{color:var(--muted);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;height:auto}
.vm-step-label span{color:var(--pen);font-family:var(--hand);font-size:19px;font-weight:400}
.vm-card,.vm-card-learner{background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-md);backdrop-filter:none;-webkit-backdrop-filter:none}
.vm-card:hover,.vm-card-learner:hover{transform:none;background:var(--bg);border-color:var(--line);box-shadow:none}
.vm-card-learner{border-color:var(--navy)}
.vm-card-learner:hover{border-color:var(--navy)}
.vm-icon-box,.vm-icon-box-learner{background:var(--sky);border:0;border-radius:var(--r-sm)}
.vm-icon-box svg{stroke:var(--blue)}
.vm-card-title{color:var(--navy)}
.vm-card-desc,.vm-card-learner .vm-card-desc{color:var(--muted)}
.vm-core-frame{padding:0;border-radius:var(--r-md)}
.vm-core-inner{background:var(--blue);border-radius:var(--r-md);color:#fff}
.vm-core-title{background:none;color:#fff;-webkit-text-fill-color:currentColor;animation:none;font-weight:800;font-size:clamp(30px,3.2vw,46px);white-space:nowrap}
.vm-core-sub{color:rgba(255,255,255,.82)}
.vm-chip{background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-sm)}
.vm-chip:hover{transform:none;background:transparent;border-color:rgba(255,255,255,.4)}
.vm-chip svg{stroke:#fff}
.vm-conn-h{background:repeating-linear-gradient(90deg,var(--navy) 0 5px,transparent 5px 10px);height:1.5px}
.vm-conn-v{background:repeating-linear-gradient(180deg,var(--navy) 0 5px,transparent 5px 10px);width:1.5px}
.vm-arrow,.vm-arrow-v{border-color:var(--navy)}
.vm-dot{background:var(--pen);box-shadow:0 0 0 4px rgba(215,38,61,.15)}
.vm-dot-blue{background:var(--blue);box-shadow:0 0 0 4px rgba(29,63,175,.15)}

/* Manifesto: một câu, căn trái, dạ quang ở phần nhấn sẵn có */
.manifesto{background:var(--bg);text-align:left;border-block:1px solid var(--line)}
.manifesto p{margin:0;max-width:980px;font-weight:700;color:var(--navy);line-height:1.3}
.manifesto p em{color:var(--muted);font-weight:500}
.manifesto p strong,.manifesto strong{color:var(--navy);padding:0 .14em;margin:0 -.06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 4.5C45 2.2 92 4.6 141 2.8S188 3.4 197 5L196 15.8C158 17.6 109 15.7 61 17.4S14 16.2 3 16.8Z' fill='%23ffe27a' fill-opacity='.85'/%3E%3C/svg%3E") 0 72%/100% 58% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Con số: trình bày như bảng điểm */
.data-context{font-family:var(--hand);font-size:20px;color:var(--pen)}
.stats{display:block;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.stat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px;padding:22px 0;border:0;border-radius:0;background:transparent}
.stat + .stat{border-top:1px solid var(--line)}
.stat::before{display:none}
.stat .num{order:2;text-align:right;color:var(--blue);font-weight:800;font-size:clamp(46px,6vw,84px);letter-spacing:-.03em}
.stat .num small{display:inline;margin:0 .35em 0 0;font-size:.3em;color:var(--muted);font-weight:500;vertical-align:.35em}
.stat p{order:1;margin:0;color:var(--ink);font-size:clamp(17px,1.6vw,21px);font-weight:500}
.development-story li{border-top:1.5px solid var(--navy)}
.development-story li::before{border-radius:0;width:9px;height:9px;top:-5px;background:var(--blue)}
.milestones{background:transparent;color:var(--ink);border:1.5px solid var(--navy);border-radius:var(--r-md)}
.milestone + .milestone{border-left:1.5px dashed var(--line)}
.milestone .yr{color:var(--blue)}
.milestone p{color:var(--ink)}
.milestone .arrow{background:var(--bg);color:var(--pen);border:1.5px solid var(--navy);width:34px;height:34px}

/* Đội ngũ: quy trình ba bước, số khoanh bút đỏ */
.community,.audience{background:var(--bg-soft)}
.step{background:transparent;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:0}
.step:not(:last-child)::after{display:none}
.step .n{width:38px;height:38px;border-radius:50%;background:transparent;border:1.5px solid var(--pen);color:var(--pen);font-family:var(--hand);font-weight:400;font-size:18px}
.step h3{color:var(--navy)}
.academic-gallery figure{border:0;border-radius:0;background:transparent}
.academic-gallery img{border-radius:var(--r-sm)}
.academic-gallery figcaption{padding:8px 0 0;color:var(--muted)}
.production-flow li{border-top:1.5px solid var(--navy);color:var(--navy)}
.production-flow li:not(:last-child)::after{color:var(--pen)}
.production-flow{scrollbar-color:var(--navy) transparent}
.production-flow::-webkit-scrollbar-thumb{background:var(--navy)}

/* Danh bạ đơn vị: các ô dùng chung đường kẻ, như ô vở */
.member-directory{border-top:1.5px solid var(--navy)}
.member-grid{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.member-grid>li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.member-card{border:0;border-radius:0;background:transparent;transition:background .2s}
.member-card:hover{border-color:transparent;box-shadow:none;background:var(--bg)}
.member-visit{color:var(--muted)}
.institute-category{font-family:var(--hand);font-size:18px;font-weight:400;letter-spacing:0;color:var(--pen)}

/* Trải nghiệm: danh sách tính năng, không thẻ */
.features{gap:28px 32px}
.feat{padding:18px 0 0;border:0;border-top:1.5px solid var(--navy);border-radius:0;background:transparent}
.feat:hover{border-color:var(--navy);box-shadow:none;transform:none}
.feat .ic{background:transparent;width:auto;height:auto;justify-content:start;margin-bottom:12px;color:var(--blue)}
.feat .ic svg{width:24px;height:24px}
.feat h3{color:var(--navy)}
.laptop,.phone{background:var(--navy)}
.laptop{box-shadow:none}
.phone{box-shadow:0 20px 40px -24px rgba(20,33,61,.6)}

/* Hành trình: trang mực xanh */
.journey{background:var(--blue)}
.journey h2.title{color:#fff}
.journey .lead{color:rgba(255,255,255,.85)}
.timeline::before{background:rgba(255,255,255,.3)}
.timeline .track{background:#fff}
.tdot{background:var(--blue);border:2px solid #fff;color:#fff}
.tcard{background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-md)}
.tthumb,.tthumb.s1,.tthumb.s2,.tthumb.s3,.tthumb.s4{background:#fff;color:var(--navy);border-radius:var(--r-sm)}
.tthumb .subj{background:var(--sky);border-radius:var(--r-sm)}
.tags em{background:var(--sky);color:var(--navy);border-radius:var(--r-sm)}
.tstep small{color:#ffd3d8;text-transform:none;letter-spacing:0;font-family:var(--hand);font-size:19px;font-weight:400}
.tstep p{color:rgba(255,255,255,.85)}
@media(min-width:601px) and (max-width:960px){.tstep::before{border-top-color:rgba(255,255,255,.3)}}

/* Đối tượng & giá trị */
.audience-card{border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:0 0 var(--r-md) var(--r-md)}
.audience-index{color:var(--pen);font-family:var(--hand);font-size:20px;font-weight:400;letter-spacing:0}
.audience-card h3{color:var(--navy)}
.pillars{gap:0;border-top:1.5px solid var(--navy)}
.pillar{color:var(--ink);min-height:0;justify-content:flex-start;padding:22px 22px 4px 0;border-radius:0;overflow:visible;isolation:auto}
.pillar + .pillar{padding-left:22px;border-left:1px solid var(--line)}
.pillar:hover{transform:none}
.pillar::before,.pillar::after,.pillar .idx{display:none}
.pillar .icon-lg{position:static;width:28px;height:28px;margin-bottom:16px;stroke:var(--blue);opacity:1}
.pillar h3{color:var(--blue);font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;font-weight:700}
.pillar p{color:var(--muted);font-size:14px}
.vision-note{border-top-color:var(--line)}
@media(max-width:1024px){.pillar:nth-child(3){padding-left:0;border-left:0}.pillar:nth-child(n+3){border-top:1px solid var(--line);margin-top:18px}}
@media(max-width:560px){.pillar,.pillar + .pillar{padding-left:0;border-left:0}.pillar + .pillar{border-top:1px solid var(--line);margin-top:10px}}

/* CTA: trang ô ly mực xanh, khép lại hero */
.cta-box{border-radius:var(--r-md);background-color:var(--blue);
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    repeating-linear-gradient(180deg,transparent 0 9px,rgba(255,255,255,.03) 9px 10px);
  background-size:40px 40px,40px 40px,auto}
.cta-box > p{color:rgba(255,255,255,.88)}
.cta-box .btn-primary{background:#fff;color:var(--blue)}
.cta-box .btn-primary:hover{background:var(--sky)}
.cta-box .btn-ghost{color:#fff;border-color:rgba(255,255,255,.75)}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.1)}
.shortcut{background:var(--blue);border:1px solid rgba(255,255,255,.45);border-radius:var(--r-sm)}
.shortcut:hover{background:#18359a}
.shortcut small{color:rgba(255,255,255,.78)}
.shortcut .go{color:#fff}

.to-top{border-radius:var(--r-sm);background:var(--navy);box-shadow:none}
.to-top:hover{transform:none;background:var(--blue);box-shadow:none}

dialog{border-radius:var(--r-md);border-color:var(--navy)}
.dialog-close{border-radius:var(--r-sm)}
.topic-list li{border-radius:var(--r-sm)}
.dialog-note{border-left-color:var(--pen);border-radius:0}

@media(max-width:600px){.eyebrow,.hero .eyebrow{font-size:21px;letter-spacing:0}.stat{grid-template-columns:1fr;gap:6px}.stat .num{order:0;text-align:left;font-size:58px}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero h1 span{animation:none}}