@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');
/* Gỡ Rối Tuổi Teen | Giao diện cổng học liệu · giữ nguyên nội dung và logic nghiên cứu */
:root{--navy:#123454;--deep:#09294b;--blue:#1864b7;--blue-2:#2777bf;--ink:#213e58;--muted:#647990;--pink:#d93e83;--teal:#087f81;--line:#e0eaf2;--canvas:#f5f8fc;--light:#eef6fc}
html{scroll-padding-top:88px}
body{font-family:'Be Vietnam Pro',Nunito,Arial,sans-serif;font-size:14px;line-height:1.7;color:var(--ink);background:var(--canvas);overflow-x:hidden}
button,select{font:inherit}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #eea93c;outline-offset:3px}
.institution-bar{background:#0d315c;color:#edf6ff;border-bottom:1px solid #ffffff23;font-size:10px;font-weight:700;letter-spacing:.18px}
.institution-inner{max-width:1240px;padding:10px 20px;margin:0 auto;display:flex;align-items:center;gap:12px}
.institution-glyph{color:#71d8d2;font-size:13px}
.institution-separator{width:1px;height:13px;background:#ffffff58}
.institution-club{font-weight:500;color:#cbe7fa}
.topbar{max-width:none;width:100%;padding:13px max(25px,calc((100vw - 1210px)/2));min-height:74px;background:#fff;box-shadow:0 4px 25px #19486e0b;border-bottom:1px solid #e4edf5;z-index:100}
.topbar .brand{gap:11px;color:#0b3761;font-size:17px;font-weight:900;letter-spacing:-.65px}
.topbar .brand b{color:#da3f85}
.topbar .brand small{font-size:9px;font-weight:600;letter-spacing:.12px;color:#788da1;margin-top:5px}
.topbar .brandicon{background:linear-gradient(135deg,#dff7f4,#eef4ff);color:#168786;border-radius:13px;width:44px;height:44px;box-shadow:inset 0 0 0 1px #cee9e8}
.topbar nav{gap:clamp(8px,1.25vw,18px)}
.topbar nav a{font-size:11px;font-weight:700;color:#35546e;position:relative;transition:color .18s}
.topbar nav a:after{content:"";position:absolute;bottom:-10px;left:0;width:0;height:3px;background:#1980a2;border-radius:4px;transition:width .18s}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:#096a89}
.topbar nav a:hover:after,.topbar nav a[aria-current="page"]:after{width:100%}
.hero{max-width:none;padding:62px max(25px,calc((100vw - 1190px)/2)) 59px;gap:4%;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);background:radial-gradient(circle at 85% 22%,#d9eefc 0,transparent 39%),linear-gradient(124deg,#f6fbff 0%,#eff7fd 52%,#fdf7fb 100%);border-bottom:1px solid #e6edf4}
.hero-copy{max-width:650px}
.hero .pill{font-size:10px;color:#146b80;background:#e2f5f4;letter-spacing:.35px;padding:9px 14px;border:1px solid #c8e9e8}
.hero h1{font-size:clamp(48px,5vw,70px);letter-spacing:-2.9px;line-height:1.07;color:#164573;margin:21px 0 12px;text-shadow:none}
.hero h1 em{color:#d83d81}
.hero-sub{font-size:clamp(15px,1.35vw,19px);color:#157b8c;letter-spacing:-.3px;margin:0 0 18px}
.hero-copy>p:not(.hero-sub){color:#536980;font-size:14px;line-height:1.95;max-width:530px}
.hero .actions{margin:26px 0 19px}
.btn{border-radius:12px;font-size:12px;padding:13px 19px;min-height:45px;line-height:1.4;font-weight:800;box-shadow:none}
.btn.primary{background:linear-gradient(105deg,#0a7097,#137d9f);color:white;border-color:transparent}
.btn.outline{background:#fff;color:#175f8f;border-color:#c9dce9}
.btn:hover{box-shadow:0 10px 24px #09588320;transform:translateY(-2px)}
.hero-photo{height:390px;border:7px solid #fff;border-radius:25px;background:#d4e9f1;box-shadow:0 26px 55px #18466a25;overflow:hidden;margin:0}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-visual{min-height:390px}
.hero-visual:before{display:none!important}
.hero-mini-points{gap:8px;margin-top:18px}
.hero-mini-points span{background:#ffffffa5;color:#305d73;border:1px solid #d7e5ed;border-radius:9px;font-size:10px;font-weight:700;padding:7px 11px}
.micro{max-width:1230px;padding:20px 20px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.micro>div{background:#fff;border:1px solid #e3ebf3;border-radius:13px;padding:17px 12px;box-shadow:0 3px 12px #1c5a8007}
.micro strong{color:#0d6289;font-size:25px;line-height:1.2}
.micro span{color:#5c7085;font-size:10px;font-weight:700}
/* Main portal directory */
.portal-directory{max-width:1220px;margin:13px auto 66px;padding:0 20px}
.portal-directory-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:25px}
.portal-directory-heading .eyebrow{color:#078b8b;font-size:10px;letter-spacing:1.3px;font-weight:800}
.portal-directory-heading h2{color:#123a62;font-size:clamp(27px,2.7vw,36px);letter-spacing:-1.1px;line-height:1.25;margin:8px 0 6px;font-weight:900}
.portal-directory-heading p{margin:0;color:#6b7d90;font-size:13px}
.portal-all-link{color:#14789b;font-size:11px;font-weight:800;white-space:nowrap;margin-bottom:8px}
.portal-all-link:hover{text-decoration:underline}
.portal-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.portal-service{--service:#186a94;--service-bg:#e9f5fb;min-height:207px;background:#fff;border-radius:17px;padding:26px 25px 22px;position:relative;display:flex;flex-direction:column;align-items:flex-start;border:1px solid #e2eaf1;border-top:4px solid var(--service);box-shadow:0 4px 18px #153e690a;transition:transform .2s,box-shadow .2s,border-color .2s}
.portal-service:hover{transform:translateY(-5px);box-shadow:0 17px 30px #153d6b16;border-color:#bfd6e2}
.portal-service-cards{--service:#1681a6;--service-bg:#e6f6fb}
.portal-service-scr{--service:#e09e3c;--service-bg:#fff4e0}
.portal-service-practice{--service:#24a187;--service-bg:#e6f8f2}
.portal-service-chat{--service:#677bc6;--service-bg:#edf0ff}
.portal-service-connect{--service:#d76b8c;--service-bg:#fff0f5}
.portal-service-survey{--service:#4879b5;--service-bg:#eaf4ff}
.service-icon{display:grid;place-items:center;width:49px;height:49px;border-radius:14px;background:var(--service-bg);color:var(--service);margin-bottom:17px}
.service-index{color:var(--service);font-size:9px;font-weight:800;letter-spacing:.6px;white-space:normal}
.portal-service strong{color:#173c5e;font-size:16px;letter-spacing:-.35px;margin:5px 0 5px;line-height:1.45}
.service-desc{color:#667a8a;font-size:11px;line-height:1.65;max-width:91%;flex:1}
.service-arrow{position:absolute;right:22px;top:26px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #e2eaf0;border-radius:50%;font-size:16px;color:#39728f;background:#f8fbfe}
/* Content areas: portal pages with sober typography and cards */
.section{padding:67px max(26px,calc((100vw - 1160px)/2))}
.section.alt{background:#edf4fa}
.section.intro{background:#fff;border-top:1px solid #eaf0f4}
.section-head .eyebrow,.eyebrow{font-size:10px;letter-spacing:1.05px;color:#07888d}
.section-head h2{font-size:clamp(27px,3vw,37px);letter-spacing:-.85px;color:#163e64;line-height:1.35}
.section-head h2 span{color:#cd4181}
.section-head p{color:#62788c;font-size:13px;line-height:1.85}
.section-head{margin-bottom:31px}
.feature,.step{border:1px solid #e1eaf0;border-radius:17px;padding:25px;box-shadow:0 8px 25px #204c720a}
.feature h3,.step h3{font-size:17px;color:#164d6c}
.feature p,.step p{font-size:12px;color:#526c81;line-height:1.8}
.card-feature-section{background:#f6f9fc;padding-top:67px;padding-bottom:68px}
.card-feature{border-radius:22px;background:linear-gradient(113deg,#e9f6ff,#f5fbff 62%,#ffeff6);border:1px solid #d5e5ef;box-shadow:0 12px 40px #174a7110;padding:38px 43px}
.card-feature h2{font-size:clamp(27px,3vw,38px);color:#154d78}
.card-feature h2 span{color:#d63c7e}
.card-feature p{color:#536e82;font-size:13px}
.card-feature .tag-row span,.tag-row span{font-size:10px;border:1px solid #d8eaf1;background:#fff8;color:#176c86}
.card-feature-visual>img{border-radius:17px;transform:rotate(3deg)}
.preview-mini-card{border:1px solid #e0eaf2;box-shadow:0 8px 22px #174a710b}
.steps .step{background:#fff}
.checklist-showcase{border-radius:20px;background:#fff}
#practice .quiz-panel{background:white;box-shadow:0 12px 30px #1e527415;border:1px solid #d5e5ed}
#practice .topic-visual{border-radius:17px;overflow:hidden}
.chat-ready,.chat-copy,.survey-card,.article-card{border-radius:17px;box-shadow:0 9px 28px #1e527410}
.article-card{transition:transform .2s,box-shadow .2s}
.article-card:hover{transform:translateY(-3px);box-shadow:0 13px 26px #1e527417}
.parent-banner{border-radius:20px}
.resources{background:#f8fbfd}
/* Separate card library has the same design language */
.cards-page-head{background:linear-gradient(115deg,#e9f5fc,#f7fbff 57%,#fbecf4);min-height:315px;padding-top:50px;padding-bottom:50px}
.cards-page-head h1{font-size:clamp(31px,3.7vw,51px);color:#17456e}
.cards-page-head h1 span{color:#ce4182}
.cards-page-head p{font-size:13px;color:#597187}
.cards-page-cover{height:265px;border-radius:20px;border:5px solid #fff;box-shadow:0 18px 35px #153e5b1b}
.cards-page-head .back-link{font-size:12px;color:#13789b}
.cards-page-cta{background:linear-gradient(100deg,#e7f4fb,#faf0f6)}
/* Footer: exact requested institutional and student credits, no second navigation menu */
.site-footer{background:linear-gradient(130deg,#0e385f,#103455);border-top:4px solid #137f9d;color:#fff}
.footer-inner{max-width:1230px;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:50px;padding:45px 25px 36px}
.footer-identity p{font-size:11px;color:#cbddeb;line-height:1.8;margin-top:17px}
.footer-school-lockup strong{font-size:17px;color:white;line-height:1.45}
.footer-overline{color:#81cbd5;font-size:10px;letter-spacing:.6px}
.footer-school{font-size:12px;color:#e1edf7}
.club-logo{height:76px;width:76px;box-shadow:none;border:3px solid #fff4}
.footer-people{padding:5px 0 0 32px;border-left:1px solid #9dcae448}
.footer-people h3{font-size:11px;letter-spacing:1px;color:#93d5da;margin:0 0 16px}
.footer-people p{font-size:12px;color:#d8e9f5;margin:0 0 12px}
.footer-people b{color:#fff}
.footer-bottom{max-width:1230px;padding:17px 25px 22px;gap:13px;color:#b5d0e2;font-size:10px}
.footer-bottom a{font-size:11px;color:#efffff}
/* Responsive portal */
@media(max-width:1190px){
  .topbar{padding:13px 24px}
  .hero{padding-left:6%;padding-right:6%}
  .portal-directory{margin-bottom:55px}
  .footer-inner{grid-template-columns:1.4fr .9fr}
  .topbar nav a:after{display:none}
  .topbar nav.open{gap:3px}
  .topbar nav.open a{font-size:13px}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:52px 6% 35px;gap:25px}
  .hero-copy{max-width:730px}
  .hero h1{font-size:clamp(47px,7vw,65px)}
  .hero-visual{min-height:0;max-width:730px;width:100%;margin:auto}
  .hero-photo{height:315px}
  .portal-services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-directory{padding:0 6%}
  .footer-inner{padding:37px 6% 30px}
  .footer-bottom{padding:17px 6% 23px}
}
@media(max-width:740px){
  .institution-inner{padding:7px 15px;gap:6px;line-height:1.35;font-size:9px}
  .institution-separator,.institution-club{display:none}
  .topbar{padding:10px 4.5%;min-height:65px}
  .topbar .brand{font-size:14px;gap:9px;letter-spacing:-.55px}
  .topbar .brandicon{width:39px;height:39px;border-radius:11px}
  .topbar .brand small{font-size:8px}
  .nav-toggle{background:#ecf6fb;border:1px solid #d4e7f1;color:#12486b;border-radius:10px;min-width:45px;min-height:44px}
  .topbar nav{left:10px;right:10px;border-radius:0 0 15px 15px}
  .topbar nav a{font-size:13px!important}
  .hero{padding:39px 5% 34px;gap:22px}
  .hero .pill{font-size:9px;line-height:1.55;letter-spacing:0}
  .hero h1{font-size:clamp(42px,11.8vw,58px);letter-spacing:-2px;margin:17px 0 11px}
  .hero-sub{font-size:14px;margin-bottom:10px}
  .hero-copy>p:not(.hero-sub){font-size:12px;line-height:1.9}
  .hero .actions{margin:20px 0 15px}
  .hero .actions .btn{flex:1 1 145px;font-size:11px;border-radius:10px;padding:10px;min-height:44px}
  .hero-mini-points{gap:6px}
  .hero-mini-points span{font-size:9px;padding:6px 8px}
  .hero-photo{height:250px;border-width:4px;border-radius:16px}
  .hero-visual{min-height:0}
  .micro{margin:0;padding:16px 5%;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .micro>div{padding:12px 6px;border-radius:11px}
  .micro strong{font-size:22px}
  .micro span{font-size:9px;line-height:1.4;display:block}
  .portal-directory{padding:0 5%;margin:14px auto 45px}
  .portal-directory-heading{display:block;margin-bottom:17px}
  .portal-directory-heading h2{font-size:27px}
  .portal-directory-heading p{font-size:11px;line-height:1.8}
  .portal-all-link{display:inline-block;margin:9px 0 0;font-size:10px}
  .portal-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .portal-service{padding:17px 14px 15px;min-height:187px;border-radius:12px;border-top-width:3px}
  .service-icon{width:40px;height:40px;border-radius:11px;margin-bottom:12px}
  .service-icon svg{width:23px;height:23px}
  .service-index{font-size:8px;letter-spacing:0;line-height:1.6}
  .portal-service strong{font-size:12px;letter-spacing:-.35px;line-height:1.4;margin:5px 0}
  .service-desc{font-size:9.5px;line-height:1.6;max-width:100%}
  .service-arrow{right:12px;top:17px;width:25px;height:25px;font-size:12px}
  .section{padding:43px 5%}
  .section-head h2{font-size:27px}
  .section-head p{font-size:12px}
  .feature,.step{padding:21px;border-radius:13px}
  .card-feature-section{padding:27px 5% 46px}
  .card-feature{padding:23px;border-radius:18px;gap:15px}
  .card-feature h2{font-size:26px}
  .card-feature p{font-size:12px}
  .card-feature .btn{font-size:11px}
  .cards-page-head{padding:30px 5% 35px;gap:15px}
  .cards-page-head h1{font-size:31px}
  .cards-page-cover{height:195px;border-radius:14px}
  .footer-inner{grid-template-columns:1fr;gap:25px;padding:31px 5% 25px}
  .footer-school-lockup{gap:12px}
  .club-logo{width:62px;height:62px}
  .footer-school-lockup strong{font-size:14px}
  .footer-overline{font-size:9px}
  .footer-school{font-size:10px}
  .footer-identity p{font-size:10px;margin-top:10px}
  .footer-people{border-left:0;border-top:1px solid #a5cee443;padding:18px 0 0}
  .footer-people h3{margin-bottom:8px}
  .footer-people p{font-size:11px}
  .footer-bottom{padding:17px 5% 21px;font-size:10px;gap:8px}
}
@media(max-width:390px){
  .topbar .brand{font-size:13px}
  .hero h1{font-size:41px}
  .service-index{font-size:7.5px}
  .service-desc{font-size:9px}
  .portal-service{min-height:193px}
}
@media(prefers-reduced-motion:reduce){.portal-service{transition:none}}