/* PISA PBN unified public theme — blue sidebar workspace */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700;800&family=Sarabun:wght@400;500;600;700&display=swap');

:root {
    --primary: #2563eb; --primary-dark: #153f73; --primary-light: #4f8fe8; --primary-soft: #eaf3ff;
    --navy-950: #0b2038; --navy-900: #102e50; --navy-800: #17456f;
    --ink: #17243a; --muted: #64748b; --surface: #ffffff; --canvas: #f3f7fc; --line: #d8e3f0;
    --success: #14966d; --warning: #d78b14; --danger: #d64b5d;
    --shadow-sm: 0 2px 8px rgba(15,47,87,.07); --shadow-md: 0 10px 28px rgba(15,47,87,.10);
    --sidebar-width: 276px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { min-height:100vh; margin:0; padding-left:var(--sidebar-width); background:var(--canvas); color:var(--ink); font-family:'Sarabun',sans-serif; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
.prompt-font, h1, h2, h3, h4, button, .nav-link, .btn-auth { font-family:'Prompt',sans-serif; }
a { text-underline-offset:3px; }

.public-sidebar { position:fixed; inset:0 auto 0 0; z-index:1300; display:flex; width:var(--sidebar-width); flex-direction:column; overflow-y:auto; color:#fff; background:linear-gradient(180deg,var(--navy-950),var(--navy-900)); border-right:1px solid rgba(255,255,255,.08); box-shadow:8px 0 28px rgba(8,29,53,.14); }
.public-sidebar-brand { display:flex; align-items:center; min-height:98px; padding:20px 18px; gap:13px; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.10); }
.public-sidebar-brand img, .public-sidebar-brand .sidebar-brand-icon { display:grid; width:54px; height:54px; flex:0 0 54px; place-items:center; border:2px solid rgba(255,255,255,.78); border-radius:14px; background:rgba(255,255,255,.12); object-fit:contain; color:#fff; font-size:24px; }
.public-sidebar-brand strong { display:block; font:700 16px/1.35 'Prompt',sans-serif; }
.public-sidebar-brand span { display:block; margin-top:2px; color:#bdd5ef; font-size:12px; }
.public-sidebar-label { padding:21px 22px 8px; color:#84add7; font:700 11px/1 'Prompt',sans-serif; letter-spacing:.07em; }
.public-sidebar-menu { display:flex; flex-direction:column; padding:0 12px 18px; gap:4px; }
.public-sidebar-link { display:flex; min-height:46px; align-items:center; padding:10px 13px; gap:12px; color:#d8e8f8; border:1px solid transparent; border-radius:10px; text-decoration:none; font:500 14px/1.35 'Prompt',sans-serif; transition:.18s ease; }
.public-sidebar-link i { width:22px; color:#79aee5; text-align:center; font-size:16px; }
.public-sidebar-link:hover, .public-sidebar-link.active { color:#fff; background:#1e5d99; border-color:rgba(255,255,255,.11); transform:translateX(2px); }
.public-sidebar-link:hover i, .public-sidebar-link.active i { color:#fff; }
.public-sidebar-actions { margin-top:auto; padding:15px 12px 20px; border-top:1px solid rgba(255,255,255,.10); }
.public-sidebar-actions .public-sidebar-link { margin-top:5px; }
.public-sidebar-actions .is-primary { background:#2d74c8; color:#fff; }
.public-sidebar-overlay, .public-sidebar-toggle { display:none; }

body > nav { position:sticky; top:0; z-index:900; display:flex; min-height:70px; justify-content:space-between; align-items:center; padding:9px clamp(18px,3vw,42px); background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px); }
body > nav .nav-brand img { height:46px; }
body > nav .nav-brand-text { color:var(--ink); font-size:17px; }
body > nav .nav-brand-text span { color:var(--muted); font-size:11px; }
body > nav .nav-links, body > nav .hamburger { display:none !important; }
main { min-width:0; }
.container { width:min(1180px,calc(100% - 40px)); max-width:1180px; margin-inline:auto; }

.slider-container { isolation:isolate; height:min(570px,68vh); min-height:500px; border:0; background:var(--navy-950); }
.slider-container::before { position:absolute; inset:0; z-index:1; content:""; pointer-events:none; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,#000,transparent 74%); }
.slider-container::after { position:absolute; z-index:1; width:520px; height:520px; right:-170px; top:-220px; content:""; pointer-events:none; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,.42),rgba(59,130,246,0) 68%); }
.slider-container .slide img { transform:scale(1.035); filter:saturate(.82) contrast(1.05); }
.slider-overlay { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); align-items:center; padding:clamp(42px,6vw,76px); gap:clamp(36px,6vw,92px); text-align:left; background:linear-gradient(100deg,rgba(5,23,43,.98) 0%,rgba(8,37,68,.94) 42%,rgba(12,51,91,.70) 72%,rgba(9,38,69,.48) 100%); }
.hero-content { position:relative; z-index:3; max-width:820px; animation:heroReveal .65s ease both; }
.hero-eyebrow { display:inline-flex; align-items:center; min-height:34px; margin-bottom:20px; padding:7px 12px; gap:8px; border:1px solid rgba(147,197,253,.30); border-radius:999px; background:rgba(20,74,125,.38); color:#bfdbfe; font:700 11px/1 'Prompt',sans-serif; letter-spacing:.08em; backdrop-filter:blur(10px); }
.hero-eyebrow i { color:#7dd3fc; }
.hero-eyebrow span { padding-left:9px; border-left:1px solid rgba(255,255,255,.22); color:#fff; letter-spacing:0; }
.slider-overlay h1 { max-width:820px; margin:0 0 18px; color:#fff; font-size:clamp(38px,4.7vw,68px); line-height:1.14; letter-spacing:-.025em; text-shadow:0 7px 28px rgba(0,0,0,.28); }
.slider-overlay h1 span { color:#8ec5ff; }
.slider-overlay p { max-width:680px; margin:0 0 22px; color:#d5e8fa; font-size:clamp(16px,1.4vw,19px); line-height:1.75; }
.hero-competencies { display:flex; flex-wrap:wrap; margin-bottom:28px; gap:9px; }
.hero-competencies span { display:inline-flex; min-height:36px; align-items:center; padding:7px 12px; gap:8px; border:1px solid rgba(255,255,255,.16); border-radius:9px; background:rgba(255,255,255,.08); color:#eef7ff; font:500 13px/1 'Prompt',sans-serif; backdrop-filter:blur(8px); }
.hero-competencies i { color:#70b7ff; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.btn-hero, .btn-login, .btn-primary, .btn-course { border:1px solid #2d74c8 !important; border-radius:10px !important; background:#2d74c8 !important; color:#fff !important; box-shadow:0 8px 22px rgba(21,63,115,.24); }
.btn-hero { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:13px 22px; gap:9px; }
.btn-hero-secondary { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:13px 20px; gap:9px; border:1px solid rgba(255,255,255,.28); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font:600 14px/1 'Prompt',sans-serif; text-decoration:none; backdrop-filter:blur(10px); transition:.18s ease; }
.btn-hero:hover, .btn-login:hover, .btn-primary:hover, .btn-course:hover { background:#174f88 !important; transform:translateY(-2px); }
.btn-hero-secondary:hover { border-color:rgba(255,255,255,.52); background:rgba(255,255,255,.16); transform:translateY(-2px); }
.hero-owner { display:flex; align-items:center; margin-top:22px; gap:9px; color:#a9c9e8; font-size:12px; }
.hero-owner span { width:24px; height:2px; border-radius:2px; background:#60a5fa; }
.hero-focus-card { position:relative; z-index:3; width:min(100%,330px); justify-self:end; padding:24px; overflow:hidden; border:1px solid rgba(255,255,255,.20); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.07)); color:#fff; box-shadow:0 22px 60px rgba(0,16,39,.30); backdrop-filter:blur(18px); animation:heroReveal .65s .12s ease both; }
.hero-focus-card::after { position:absolute; width:150px; height:150px; right:-55px; bottom:-70px; content:""; border-radius:50%; background:rgba(96,165,250,.22); }
.hero-focus-top { display:flex; align-items:center; justify-content:space-between; color:#b9d9f5; font:600 10px/1 'Prompt',sans-serif; letter-spacing:.12em; }
.hero-focus-top strong { color:#fff; font-size:14px; letter-spacing:0; }
.hero-focus-score { display:flex; align-items:center; margin:27px 0 21px; gap:15px; }
.hero-focus-score strong { font:800 72px/.8 'Prompt',sans-serif; color:#8ec5ff; }
.hero-focus-score span { color:#edf6ff; font:600 16px/1.5 'Prompt',sans-serif; }
.hero-focus-progress { height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.14); }
.hero-focus-progress span { display:block; width:78%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#60a5fa,#7dd3fc); }
.hero-focus-footer { margin-top:18px; color:#cfe4f7; font-size:12px; }
.hero-focus-footer i { margin-right:6px; color:#7dd3fc; }
@keyframes heroReveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:min(1180px,calc(100% - 40px)); padding:0; margin:-42px auto 0; }
.stat-card { padding:22px; border:1px solid var(--line); border-top:4px solid var(--primary); border-radius:12px; background:#fff; box-shadow:var(--shadow-md); text-align:left; }
.stat-card:hover { transform:translateY(-2px); border-color:#9fc0e2; }
.stat-card h3 { color:var(--primary-dark) !important; font-size:34px; }

.section-white, .section-gray { padding:56px 0; border-bottom:1px solid var(--line); }
.section-white { background:#fff; } .section-gray { background:var(--canvas); }
.section-title { color:var(--navy-900); font-size:clamp(25px,3vw,36px); }
.section-subtitle { margin-bottom:34px; color:var(--muted); }
.news-grid, .course-grid { gap:20px; }
.news-card, .course-card, .activity-card, .login-card, .register-card, .form-card, .content-card, .resource-card, .link-card { border:1px solid var(--line) !important; border-radius:12px !important; background:#fff !important; box-shadow:var(--shadow-sm) !important; }
.news-card:hover, .course-card:hover, .activity-card:hover, .resource-card:hover, .link-card:hover { border-color:#92b8df !important; box-shadow:var(--shadow-md) !important; transform:translateY(-2px); }
.system-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.system-resource-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 26px rgba(15,47,87,.09); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.system-resource-card:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(15,47,87,.14); }
.system-card-blue { border-color:#b9d7fa; } .system-card-orange { border-color:#fed1a4; } .system-card-green { border-color:#9ee8ca; }
.system-card-media { position:relative; height:168px; overflow:hidden; background:#dce9f6; border-bottom:1px solid rgba(15,47,87,.10); }
.system-card-media::after { position:absolute; inset:auto 0 0; height:44%; content:""; pointer-events:none; background:linear-gradient(transparent,rgba(4,23,42,.56)); }
.system-card-media img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; transition:transform .35s ease; }
.system-resource-card:hover .system-card-media img { transform:scale(1.035); }
.system-card-media span { position:absolute; z-index:1; right:12px; bottom:11px; display:inline-flex; min-height:27px; align-items:center; padding:5px 9px; gap:6px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(4,23,42,.62); color:#fff; font:500 10px/1 'Prompt',sans-serif; backdrop-filter:blur(7px); }
.system-card-body { display:flex; flex:1; flex-direction:column; padding:20px; }
.system-card-body > .btn-course { margin-top:auto; }
.news-date, .activity-date { color:var(--primary-dark) !important; background:var(--primary-soft) !important; border-color:#bfdaef !important; }
.course-icon-float { border-radius:10px; }
.hl-slider-container { border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-md); }
.hl-dot.active { background:#5da0e1; }

input, select, textarea, .form-control { border:1px solid #cbd9e8 !important; border-radius:9px !important; background:#fff !important; }
input:focus, select:focus, textarea:focus, .form-control:focus { outline:none; border-color:#2d74c8 !important; box-shadow:0 0 0 3px rgba(45,116,200,.14) !important; }
table { border-color:var(--line); }
th { background:#eaf2fb !important; color:var(--navy-900) !important; }
tr:nth-child(even) td { background:#f8fbff; }
footer { border-top:1px solid var(--line); background:var(--navy-950) !important; color:#d8e8f8 !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #6aa7e2; outline-offset:3px; }

@media (max-width:980px) {
    body { padding-left:0; }
    .public-sidebar { width:276px; transform:translateX(-105%); transition:transform .25s ease; }
    .public-sidebar.show { transform:translateX(0); }
    .public-sidebar-overlay { position:fixed; inset:0; z-index:1250; background:rgba(3,18,34,.58); opacity:0; pointer-events:none; display:block; transition:opacity .2s; }
    .public-sidebar-overlay.show { opacity:1; pointer-events:auto; }
    .public-sidebar-toggle { position:fixed; right:16px; bottom:18px; z-index:1200; display:grid; width:52px; height:52px; place-items:center; border:0; border-radius:14px; background:var(--navy-900); color:#fff; box-shadow:0 10px 26px rgba(7,31,57,.28); font-size:20px; }
    .slider-container { min-height:570px; height:auto; }
    .slider-overlay { position:relative; min-height:570px; grid-template-columns:1fr; padding:48px 34px 90px; }
    .hero-focus-card { display:none; }
    .hero-content { max-width:760px; }
    .stats-grid { grid-template-columns:1fr; margin-top:18px; }
    .system-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sup-container { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    body > nav { min-height:62px; padding:7px 14px; }
    body > nav .nav-brand img { height:40px; }
    .nav-brand-text { font-size:15px !important; }
    .slider-container { min-height:630px; height:auto; }
    .slider-overlay { min-height:630px; align-items:center; padding:44px 20px 72px; text-align:center; }
    .hero-content { width:100%; }
    .hero-eyebrow { margin-bottom:18px; font-size:9px; }
    .slider-overlay h1 { font-size:clamp(33px,10vw,44px); }
    .slider-overlay p { font-size:16px; }
    .hero-competencies, .hero-actions { justify-content:center; }
    .hero-competencies span { font-size:12px; }
    .hero-actions > * { width:100%; }
    .hero-owner { justify-content:center; }
    .system-resource-grid { grid-template-columns:1fr; }
    .system-card-media { height:190px; }
    .section-white, .section-gray { padding:42px 0; }
    .container, .stats-grid { width:min(100% - 28px,1180px); }
    .news-grid, .course-grid { grid-template-columns:1fr; }
}