:root{--blue:#0a3d91;--blue2:#0b63f6;--navy:#061a3c;--gold:#f8b400;--bg:#f6f9ff;--text:#10233f;--muted:#667085;--radius:20px;--shadow:0 18px 45px rgba(14,44,90,.12)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Kanit,sans-serif;color:var(--text)}
a{text-decoration:none;color:inherit}.container{max-width:1180px;margin:0 auto;padding:0 20px}
.edu-container{width:100%;max-width:100%;margin:0 auto;padding:0 17px}
.top-bar-area{background:#0b73d9;color:#fff;height:70px;display:flex;align-items:center;font-family:Kanit,sans-serif}
.top-row{display:flex;align-items:center;justify-content:space-between;width:100%}
.top-info ul,.top-social{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.top-info li{font-size:18px;font-weight:500;line-height:1;color:#fff;display:flex;align-items:center;height:26px;letter-spacing:.1px}
.top-info i{font-size:18px;margin-right:10px;color:#fff}.top-info a{color:#fff}.top-info .divider{width:1px;background:rgba(255,255,255,.48);height:26px;margin:0 28px 0 22px}
.top-social{gap:28px;margin-right:37px}.top-social a{color:#fff;font-size:18px;font-weight:700;line-height:1}
.edu-header{background:#fff;position:relative;z-index:100;box-shadow:none}.navbar{min-height:122px;background:#fff;margin:0;border:0;display:flex;align-items:center}
.nav-wrap{display:flex;align-items:center;min-height:122px;width:100%}.navbar-header{display:flex;align-items:center;flex:0 0 auto}.navbar-brand{display:block;padding:0;margin:0 90px 0 8px}.navbar-brand .logo{display:block;width:270px;height:auto;max-height:88px;object-fit:contain}.navbar-toggle{display:none;border:0;background:#fff;font-size:26px;color:#333;padding:8px;margin-right:12px}
.navbar-collapse{display:flex;align-items:center;justify-content:flex-start;flex:1}.navbar-nav{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;width:100%}.navbar-nav>li{position:relative;display:flex;align-items:center;min-height:122px}.navbar-nav>li>a{display:flex;align-items:center;height:122px;padding:0 26px;color:#2f2f2f;font-size:21px;font-weight:600;white-space:nowrap;line-height:1.1}.navbar-nav>li>a i{font-size:14px;margin-left:7px;font-weight:900}.navbar-nav>li>a:hover{color:#0b73d9}.dropdown-menu{position:absolute;left:0;top:100%;min-width:260px;background:#fff;list-style:none;margin:0;padding:10px 0;border-radius:0 0 6px 6px;box-shadow:0 12px 28px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:999}.dropdown:hover>.dropdown-menu{opacity:1;visibility:visible;transform:none}.dropdown-menu li a{display:block;padding:12px 18px;color:#333;font-size:16px;font-weight:500;white-space:nowrap}.dropdown-menu li a:hover{background:#f4f8ff;color:#0b73d9}
.tsqm-page{background:#f6f9ff;overflow:hidden}
.hero{height:448px;overflow:hidden;background:#dbeafe}.hero img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.stats-panel{max-width:1100px;margin:-42px auto 24px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-radius:12px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:5;padding:24px 18px}.stats-panel article{display:flex;align-items:center;justify-content:center;gap:16px;border-right:1px solid #e5e7eb}.stats-panel article:last-child{border:0}.icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:27px}.blue{background:#1064e8}.green{background:#27b899}.purple{background:#7367f0}.orange{background:#ff9f43}.label{display:block;font-size:15px}.stats-panel b{font:700 34px Kanit;color:#0857c3}.stats-panel small{margin-left:7px}.network-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:28px;margin-top:10px}.section-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.section-title h2,.section-heading h2{font:700 24px Kanit;margin:0;color:#092d6f}.section-title p{margin:4px 0 12px;color:var(--muted)}.map-card img{width:100%;border-radius:16px;display:block}.filters{display:grid;grid-template-columns:1fr 130px 130px 110px;gap:12px;margin:12px 0 18px}.filters input,.filters select{height:42px;border:1px solid #d8e1ef;border-radius:10px;padding:0 12px;background:#fff;color:#475467}.school-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.school-cards article,.activity-row article,.resource-grid article,.knowledge-grid article,.mini-videos article{background:#fff;border:1px solid #e8eef7;border-radius:14px;overflow:hidden;box-shadow:0 8px 25px rgba(31,63,110,.08);transition:.25s}.school-cards article:hover,.activity-row article:hover,.resource-grid article:hover,.knowledge-grid article:hover,.mini-videos article:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(31,63,110,.13)}.school-cards img{height:130px;width:100%;object-fit:cover}.school-cards div{padding:14px}.school-cards h3,.activity-row h3,.resource-grid h3,.knowledge-grid h3,.mini-videos h3{font:600 17px Kanit;margin:0 0 5px}.school-cards p,.activity-row p,.resource-grid p,.knowledge-grid p,.mini-videos p{color:var(--muted);margin:0;font-size:13px}.school-cards a{display:inline-block;margin-top:10px;color:var(--blue2);font-weight:600}.center{text-align:center}.primary-btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0066ff,#003fb7);color:#fff;padding:11px 28px;border-radius:999px;font-weight:700;margin-top:14px;box-shadow:0 10px 25px rgba(0,79,200,.23)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0 14px}.section-heading a{color:var(--blue2);font-weight:700;border:1px solid #d8e8ff;border-radius:999px;padding:6px 14px;background:#fff}.activity-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.activity-row img{width:100%;height:120px;object-fit:cover}.activity-row article{position:relative}.activity-row span{position:absolute;top:96px;left:8px;background:#075bca;color:#fff;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:700}.activity-row h3,.activity-row p{padding:0 12px}.activity-row h3{margin-top:14px}.activity-row p{padding-bottom:12px}.resource-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.resource-grid img{height:150px;width:100%;object-fit:cover}.resource-grid article{text-align:center;padding-bottom:18px}.resource-grid h3{margin-top:12px}.pill{display:inline-block;color:#fff;border-radius:999px;padding:7px 18px;margin-top:12px;font-size:13px;font-weight:700}.pill.green{background:#00a66c}.pill.blue{background:#0b63f6}.pill.pink{background:#ec4899}.pill.orange{background:#f97316}.pill.purple{background:#7c3aed}.two-col{display:grid;grid-template-columns:1fr 1.45fr;gap:30px}.research-list{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.research-list article{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid #edf2f7}.research-list article:last-child{border:0}.doc{width:44px;height:54px;background:#eef6ff;color:#0b63f6;border:1px solid #cfe3ff;border-radius:7px;display:grid;place-items:center;font:700 12px Kanit}.research-list h3{font:600 15px Kanit;margin:0}.research-list p{font-size:12px;color:var(--muted);margin:4px 0 0}.research-list a{background:#0b63f6;color:#fff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700}.tabs,.video-tabs{display:flex;gap:8px;margin-bottom:12px;overflow:auto}.tabs button,.video-tabs button{border:0;background:#fff;border-radius:999px;padding:8px 16px;color:#475467;font-weight:600;box-shadow:0 3px 12px rgba(0,0,0,.05)}.tabs .active,.video-tabs .active{background:#0b63f6;color:#fff}.knowledge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.knowledge-grid img,.mini-videos img{width:100%;height:100px;object-fit:cover}.knowledge-grid h3,.knowledge-grid p,.mini-videos h3,.mini-videos p{padding:0 10px}.knowledge-grid h3,.mini-videos h3{font-size:14px;margin-top:9px}.knowledge-grid p,.mini-videos p{padding-bottom:10px}.media-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:24px}.main-video{position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:var(--shadow)}.main-video img{width:100%;height:260px;object-fit:cover;display:block;opacity:.72}.main-video button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.16);color:#fff;font-size:30px}.main-video h3{position:absolute;left:20px;top:18px;color:#fff;margin:0;font:600 18px Kanit}.mini-videos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.footer{margin-top:44px;background:linear-gradient(135deg,#061a3c,#083f8d);color:#fff;padding:32px 0 14px}.footer-grid{display:grid;grid-template-columns:1.2fr 1.3fr .8fr 1fr;gap:30px;align-items:start}.footer-brand strong{font:800 42px Kanit;display:block}.footer-brand span{display:block;font-weight:700}.footer p{color:#dbeafe}.social{display:flex;gap:10px}.social a{width:38px;height:38px;border-radius:50%;background:#0b63f6;display:grid;place-items:center;font-weight:700}.footer-map{width:100%;height:120px;object-fit:cover;border-radius:12px;background:#fff}.copyright{text-align:center;font-size:12px;margin:20px 0 0}.to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;border:0;background:#0b63f6;color:#fff;font-size:22px;box-shadow:0 10px 25px rgba(0,0,0,.25)}.reveal{opacity:0;transform:translateY(18px);transition:.6s}.reveal.show{opacity:1;transform:none}@media(max-width:1100px){.faculty-top{flex-wrap:wrap}.faculty-nav{gap:18px;font-size:16px}.network-grid,.two-col,.media-grid{grid-template-columns:1fr}.resource-grid{grid-template-columns:repeat(3,1fr)}.activity-row{grid-template-columns:repeat(3,1fr)}.stats-panel{grid-template-columns:repeat(2,1fr);gap:14px}.stats-panel article{border:0}.hero{height:360px}}@media(max-width:760px){.faculty-nav{display:none;flex-direction:column;align-items:flex-start;width:100%}.faculty-nav.open{display:flex}.mobile-toggle{display:block;margin-left:auto}.faculty-logo{min-width:0}.faculty-logo strong{font-size:22px}.faculty-logo span{font-size:18px}.hero{height:280px}.stats-panel{margin:0 12px 20px;grid-template-columns:1fr;padding:16px}.school-cards,.resource-grid,.activity-row,.knowledge-grid,.mini-videos{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.container{padding:0 14px}.section-heading{margin-top:22px}.media-grid{gap:14px}}
@media(max-width:1360px){.navbar-brand{margin-right:42px}.navbar-nav>li>a{font-size:18px;padding:0 16px}.navbar-brand .logo{width:250px}}
@media(max-width:1100px){.top-bar-area{height:auto;padding:14px 0}.top-row{gap:12px}.top-info ul{flex-wrap:wrap;row-gap:8px}.top-info li{font-size:15px}.top-social{margin-right:0}.navbar{min-height:auto}.nav-wrap{min-height:auto;flex-wrap:wrap;padding:14px 18px}.navbar-brand{margin-right:0}.navbar-toggle{display:block;margin-left:auto;order:2}.navbar-collapse{flex-basis:100%;display:none;order:3}.navbar-collapse.open{display:block}.navbar-nav{display:block}.navbar-nav>li{min-height:auto;display:block}.navbar-nav>li>a{height:auto;padding:14px 4px;font-size:18px}.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;background:#f8fafc}.dropdown:hover>.dropdown-menu{display:block}}
@media(max-width:760px){.top-social{display:none}.top-info .divider{display:none}.top-info ul{display:block}.top-info li{margin:6px 0}.navbar-brand .logo{width:220px}.edu-container{padding:0 12px}}


/* =========================================================
   RESPONSIVE REBUILD OVERRIDES
   ใช้ส่วนนี้เพื่อให้หน้าเว็บยืด-หดตามหน้าจอจริง และไม่ล้นขอบ
   ========================================================= */
html{width:100%;overflow-x:hidden;scroll-behavior:smooth}
body{width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
.edu-container,.container{width:min(100% - 32px, 1180px);max-width:1180px;margin-inline:auto;padding-inline:0}
.top-bar-area .edu-container,.edu-header .edu-container{width:100%;max-width:none;padding-inline:18px}

/* Header ให้เหมือนเว็บคณะ แต่ responsive */
.top-bar-area{min-height:70px;height:auto;padding-block:0}
.top-row{min-height:70px}
.top-info ul{flex-wrap:wrap;row-gap:8px}
.edu-header{width:100%;background:#fff}
.nav-wrap{gap:24px}
.navbar-brand{margin:0 68px 0 8px;flex:0 0 auto}
.navbar-brand .logo{width:clamp(220px,14.2vw,270px);max-height:88px}
.navbar-collapse{min-width:0}
.navbar-nav{min-width:0;justify-content:flex-start}
.navbar-nav>li>a{font-size:clamp(16px,1.08vw,21px);padding-inline:clamp(10px,1.35vw,26px)}

/* Hero banner: สูงตามอัตราส่วนของภาพ 1860 x 448 แต่ไม่สูงเกิน 448 */
.hero{width:100%;height:clamp(238px,24.086vw,448px);max-height:448px;overflow:hidden;background:#eaf4ff}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}

/* เนื้อหา responsive แบบ fluid */
.stats-panel{width:min(100% - 32px,1100px);grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.network-grid,.two-col,.media-grid{grid-template-columns:minmax(320px,1fr) minmax(0,1.45fr)}
.filters{grid-template-columns:minmax(220px,1fr) minmax(110px,130px) minmax(110px,130px) minmax(100px,110px)}
.school-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.activity-row{grid-template-columns:repeat(5,minmax(0,1fr))}
.resource-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.knowledge-grid,.mini-videos{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width: 1500px){
  .navbar-brand{margin-right:36px}
  .navbar-nav>li>a{font-size:17px;padding-inline:12px}
}

@media (max-width: 1280px){
  .top-bar-area{padding-block:12px}
  .top-row{min-height:auto;gap:12px}
  .top-info li{font-size:15px}
  .top-info .divider{margin-inline:16px}
  .navbar{min-height:auto}
  .nav-wrap{min-height:auto;flex-wrap:wrap;padding-block:14px;gap:10px}
  .navbar-header{width:100%;justify-content:space-between}
  .navbar-brand{margin:0}
  .navbar-toggle{display:inline-grid;place-items:center;margin-left:auto;width:44px;height:44px;border:1px solid #e6eef8;border-radius:8px;background:#fff}
  .navbar-collapse{display:none;flex-basis:100%;width:100%;padding-top:10px}
  .navbar-collapse.open{display:block}
  .navbar-nav{display:block;width:100%;border-top:1px solid #eef2f7;padding-top:8px}
  .navbar-nav>li{display:block;min-height:0;border-bottom:1px solid #eef2f7}
  .navbar-nav>li>a{height:auto;justify-content:space-between;padding:14px 6px;font-size:17px}
  .dropdown-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;min-width:0;width:100%;box-shadow:none;border-radius:0;background:#f7fbff;padding:4px 0;margin-bottom:8px}
  .dropdown.open-sub>.dropdown-menu{display:block}
  .dropdown:hover>.dropdown-menu{transform:none}
  .network-grid,.two-col,.media-grid{grid-template-columns:1fr}
  .activity-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .resource-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats-panel{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .stats-panel article:nth-child(2){border-right:0}
}

@media (max-width: 900px){
  .edu-container,.container{width:min(100% - 24px,1180px)}
  .top-row{align-items:flex-start}
  .top-social{margin-right:0;gap:18px}
  .hero{height:clamp(210px,32vw,310px)}
  .stats-panel{margin-top:16px}
  .filters{grid-template-columns:1fr 1fr}
  .school-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .activity-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .knowledge-grid,.mini-videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .top-bar-area{display:none}
  .nav-wrap{padding-block:12px}
  .navbar-brand .logo{width:210px}
  .hero{height:220px}
  .stats-panel{grid-template-columns:1fr;padding:16px;margin-inline:12px;width:auto}
  .stats-panel article{border-right:0;justify-content:flex-start;padding-left:8px}
  .filters,.school-cards,.activity-row,.resource-grid,.knowledge-grid,.mini-videos,.footer-grid{grid-template-columns:1fr}
  .section-card{padding:14px;border-radius:16px}
  .section-heading{align-items:flex-start;gap:8px;flex-direction:column}
  .main-video img{height:220px}
  .to-top{right:14px;bottom:14px;width:42px;height:42px}
}

@media (max-width: 420px){
  .navbar-brand .logo{width:185px}
  .navbar-toggle{width:40px;height:40px}
  .hero{height:190px}
}