/* ============================================================ มหาวิทยาลัยทักษิณ (Thaksin University) — Web Template Design system : tokens, header, footer, reusable components Font : Prompt (display) + Noto Sans Thai (body) ============================================================ */ /* ---------- Design tokens ---------- */ :root{ /* brand navy (header / footer) */ --navy-900:#0a2a4e; --navy-800:#0e3a6b; --navy-700:#134a87; --navy-600:#1a5aa0; /* apply button */ --orange:#F58220; --orange-dk:#D96512; /* neutrals */ --ink:#1f2a3a; --ink-soft:#3c4a5e; --muted:#6b7888; --line:#e6ebf2; --line-2:#eef2f7; --bg:#f3f6fa; --card:#ffffff; --shadow-sm:0 4px 16px rgba(20,50,90,.07); --shadow:0 18px 46px rgba(18,46,86,.11); --shadow-lg:0 30px 72px rgba(18,46,86,.16); --radius:18px; --radius-sm:12px; --radius-lg:26px; /* default theme = blue (home) */ --theme:#2474C6; --theme-dk:#0F4C81; --theme-soft:#EAF3FF; --theme-tint:#F7FBFF; --theme-rgb:36,116,198; --maxw:1180px; } /* per-page accent themes (set class on ) */ .t-blue {--theme:#2474C6;--theme-dk:#0F4C81;--theme-soft:#EAF3FF;--theme-tint:#F7FBFF;--theme-rgb:36,116,198;} .t-green {--theme:#0F4C81;--theme-dk:#082B50;--theme-soft:#EAF3FF;--theme-tint:#F7FBFF;--theme-rgb:15,76,129;} .t-purple{--theme:#0F4C81;--theme-dk:#082B50;--theme-soft:#EAF3FF;--theme-tint:#F7FBFF;--theme-rgb:15,76,129;} .t-orange{--theme:#F58220;--theme-dk:#D96512;--theme-soft:#FFF0E0;--theme-tint:#FFF9F2;--theme-rgb:245,130,32;} .t-teal {--theme:#2474C6;--theme-dk:#0F4C81;--theme-soft:#EAF3FF;--theme-tint:#F7FBFF;--theme-rgb:36,116,198;} .t-gold {--theme:#F58220;--theme-dk:#D96512;--theme-soft:#FFF0E0;--theme-tint:#FFF9F2;--theme-rgb:245,130,32;} .t-pink {--theme:#F58220;--theme-dk:#D96512;--theme-soft:#FFF0E0;--theme-tint:#FFF9F2;--theme-rgb:245,130,32;} /* ---------- reset / base ---------- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0; font-family:"Noto Sans Thai","Prompt",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:radial-gradient(1100px 520px at 50% -160px,#fff 0%,var(--bg) 68%,#edf2f8 100%); line-height:1.65; font-size:15.5px; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4,h5{font-family:"Prompt","Noto Sans Thai",sans-serif;margin:0;line-height:1.25;color:var(--ink);font-weight:600;} input,select,textarea{font-family:inherit;font-size:inherit;} :focus-visible{outline:3px solid rgba(var(--theme-rgb),.45);outline-offset:2px;border-radius:6px;} .container{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .section{position:relative;padding:60px 0;} .section.tight{padding:36px 0;} /* ---------- helpers ---------- */ .en{font-family:"Prompt",sans-serif;font-style:italic;color:var(--theme);font-weight:500;} .text-theme{color:var(--theme);} .center{text-align:center;} /* eyebrow section heading (Thai + English) */ .head{margin-bottom:26px;} .head h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;display:flex;align-items:center;gap:10px;} .head h2 .ic{color:var(--theme);} .head .sub{font-family:"Prompt",sans-serif;font-style:italic;color:var(--theme);font-weight:500;font-size:1rem;margin-top:4px;letter-spacing:.15px;} .head.c{align-items:center;text-align:center;} .head.c h2{justify-content:center;} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:12px 24px;border-radius:40px;font-family:"Prompt",sans-serif;font-weight:500; font-size:.95rem;line-height:1;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;white-space:nowrap; } .btn i{font-size:.9em;} .btn-primary{background:linear-gradient(135deg,color-mix(in srgb,var(--theme) 88%,#fff),var(--theme-dk));color:#fff;box-shadow:0 11px 24px rgba(var(--theme-rgb),.28);} .btn-primary:hover{background:linear-gradient(135deg,var(--theme),var(--theme-dk));transform:translateY(-2px);box-shadow:0 16px 32px rgba(var(--theme-rgb),.38);} .btn-ghost{background:#fff;color:var(--theme);border:1.6px solid color-mix(in srgb,var(--theme) 35%,#fff);} .btn-ghost:hover{background:var(--theme-soft);border-color:var(--theme);transform:translateY(-2px);} .btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(239,124,27,.34);} .btn-orange:hover{background:var(--orange-dk);transform:translateY(-2px);} .btn-sm{padding:9px 16px;font-size:.85rem;} .btn-block{width:100%;} .link-more{display:inline-flex;align-items:center;gap:7px;color:var(--theme);font-family:"Prompt",sans-serif;font-weight:500;font-size:.92rem;transition:.2s;} .link-more:hover{gap:11px;} /* pills / badges */ .pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:30px;font-size:.82rem;font-weight:500;background:var(--theme-soft);color:var(--theme-dk);font-family:"Prompt",sans-serif;} .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:.74rem;font-weight:600;font-family:"Prompt",sans-serif;} /* ===================================================== HEADER (announcement topbar + clean white navbar + dropdowns) ===================================================== */ .site-header{position:sticky;top:0;z-index:60;box-shadow:0 5px 24px rgba(18,46,86,.10);} /* ---- announcement / topbar ---- */ .topbar{background:linear-gradient(90deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-600) 100%);color:#fff;} .topbar .container{display:flex;align-items:center;gap:14px;padding:9px 22px;} .topbar .tb-msg{margin:0;font-family:"Prompt",sans-serif;font-weight:400;font-size:.82rem;color:#e7ecf7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .topbar .tb-msg b,.topbar .tb-msg .tb-highlight{color:var(--orange);font-weight:600;} .topbar .tb-link{margin-left:auto;flex-shrink:0;font-family:"Prompt",sans-serif;font-weight:600;font-size:.82rem;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:.18s;} .topbar .tb-link:hover{color:var(--orange);} .topbar .tb-link i{font-size:.78em;} .topbar .tb-links{margin-left:auto;display:flex;align-items:center;gap:11px;flex-shrink:0;} .topbar .tb-links a{font-family:"Prompt",sans-serif;font-weight:500;font-size:.82rem;color:#eaeefb;white-space:nowrap;transition:.18s;display:inline-flex;align-items:center;gap:6px;} .topbar .tb-links a:hover{color:#fff;} .topbar .tb-sep{color:rgba(255,255,255,.32);font-size:.8rem;user-select:none;} .topbar .tb-cta{background:rgba(255,255,255,.16);padding:5px 14px;border-radius:20px;font-weight:600!important;color:#fff!important;} .topbar .tb-cta:hover{background:var(--orange);} .topbar .tb-cta i{font-size:.78em;} .topbar .tb-search-trigger{width:34px;height:30px;padding:0;border:1px solid rgba(255,255,255,.36);border-radius:16px;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s;} .topbar .tb-search-trigger:hover,.topbar .tb-search-trigger[aria-expanded="true"]{background:#fff;color:var(--theme);border-color:#fff;} .global-search-panel{position:absolute;top:100%;left:0;right:0;z-index:80;padding:16px 0 20px;background:rgba(5,34,64,.96);box-shadow:0 14px 26px rgba(3,24,48,.22);}.global-search-panel[hidden]{display:none} .global-search-shell{position:relative;max-width:780px;margin:0 auto}.global-search-form{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 16px;border-radius:15px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.16)}.global-search-form>.fa-magnifying-glass{color:var(--theme);font-size:.95rem}.global-search-form input{min-width:0;flex:1;border:0;outline:0;color:var(--ink);font:400 .92rem "Noto Sans Thai",sans-serif;padding:8px 0}.global-search-form button[type="submit"]{border:0;border-radius:10px;padding:9px 14px;background:var(--theme);color:#fff;font:600 .8rem "Prompt",sans-serif;cursor:pointer}.global-search-form button[type="submit"]:hover{background:var(--navy-800)} .global-search-loader{display:none;width:26px;height:26px;position:relative;flex:0 0 26px}.global-search-loader span{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);animation:search-ai-pulse 1s infinite ease-in-out}.global-search-loader span:nth-child(1){left:1px;top:10px;animation-delay:0s}.global-search-loader span:nth-child(2){left:10px;top:3px;animation-delay:.16s}.global-search-loader span:nth-child(3){right:1px;top:10px;animation-delay:.32s}.global-search-loader span:nth-child(4){left:10px;bottom:3px;animation-delay:.48s}.global-search-shell.is-loading .global-search-loader{display:block}.global-search-shell.is-loading .global-search-form>.fa-magnifying-glass{display:none}@keyframes search-ai-pulse{0%,100%{transform:scale(.55);opacity:.4}50%{transform:scale(1.25);opacity:1}} .global-search-suggestions{display:none;margin-top:8px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.22)}.global-search-suggestions.has-results{display:block}.global-search-suggestion{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 13px;border-bottom:1px solid #edf1f5;color:var(--ink);transition:.16s}.global-search-suggestion:last-child{border-bottom:0}.global-search-suggestion:hover{background:var(--theme-soft)}.global-search-suggestion i{color:var(--theme);text-align:center}.global-search-suggestion strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}.global-search-suggestion small{display:block;color:var(--muted);font-size:.69rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.global-search-suggestion em{font-style:normal;color:var(--theme);font-size:.68rem;font-weight:600}.global-search-empty{padding:13px 16px;color:var(--muted);font-size:.8rem} @media(max-width:860px){ .topbar .tb-msg{display:none;} .topbar .tb-links{margin-left:0;width:100%;justify-content:center;gap:9px;font-size:.76rem;} } @media(max-width:480px){ .topbar .tb-links .tb-hide-sm{display:none;} .topbar .tb-links .tb-sep.s1{display:none;} .topbar .tb-search-trigger{width:31px;height:28px;} .global-search-panel{padding:12px 0 16px}.global-search-form button[type="submit"]{padding:9px 11px}.global-search-form button[type="submit"] span{display:none} } /* ---- navbar ---- */ .navbar{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(230,235,242,.8);} .navbar .container{display:flex;align-items:center;gap:16px;padding:11px 22px;} /* brand */ .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;} .brand-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#0F4C81,#2474C6 55%,#7FB3F0);color:#fff;font-size:1.35rem;box-shadow:0 6px 16px rgba(36,116,198,.35);} .brand-logo{height:46px;width:auto;display:block;object-fit:contain;} .brand .brand-txt small{margin-top:2px;} .brand-txt strong{display:block;font-family:"Prompt",sans-serif;font-weight:700;font-size:1.3rem;line-height:1;letter-spacing:-.5px;color:var(--navy-800);} .brand-txt small{display:block;font-family:"Prompt",sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.3px;color:#2474C6;} /* main nav */ .main-nav{display:flex;align-items:center;gap:2px;margin-left:auto;} .nav-item{position:relative;} .main-nav>a,.nav-item>a{ display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:11px; font-family:"Prompt",sans-serif;font-weight:500;font-size:.92rem;color:var(--ink-soft); white-space:nowrap;transition:.18s;cursor:pointer; } .main-nav>a:hover,.nav-item>a:hover{background:var(--theme-soft);color:var(--theme-dk);} .main-nav .dd-caret{font-size:.62rem;opacity:.55;transition:transform .2s,opacity .2s;} .nav-item:hover .dd-caret{transform:rotate(180deg);opacity:1;} .main-nav>a.active,.nav-item>a.active{background:var(--theme-soft);color:var(--theme-dk);font-weight:600;} /* dropdown */ .dropdown{ position:absolute;top:calc(100% + 9px);left:0;min-width:236px;background:#fff; border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); padding:8px;display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:5; } .dropdown::before{content:"";position:absolute;top:-13px;left:0;right:0;height:13px;} .nav-item:hover .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;transform:none;} .dropdown a{ display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:9px; font-family:"Prompt",sans-serif;font-weight:500;font-size:.86rem;color:var(--ink-soft);transition:.15s; } .dropdown a i{width:18px;text-align:center;color:var(--theme);font-size:.9em;} .dropdown a:hover{background:var(--theme-soft);color:var(--theme-dk);transform:translateX(3px);} /* mobile toggle */ .nav-toggle{display:none;color:var(--theme);font-size:1.35rem;width:42px;height:42px;border-radius:11px;background:var(--theme-soft);align-items:center;justify-content:center;margin-left:auto;} /* ---- mobile drawer ---- */ @media(max-width:1100px){ .main-nav{display:none;} .nav-toggle{display:flex;} .topbar .tb-msg{font-size:.74rem;} .main-nav.open{ display:flex;flex-direction:column;align-items:stretch;gap:2px; position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line); padding:10px;box-shadow:var(--shadow-lg);max-height:80vh;overflow:auto; } .main-nav.open .nav-item{width:100%;} .main-nav.open>a,.main-nav.open .nav-item>a{width:100%;justify-content:flex-start;padding:13px 16px;border-radius:10px;} .main-nav.open .dd-caret{margin-left:auto;} .main-nav.open .dropdown{ position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none; border-radius:0;padding:2px 0 8px 16px;min-width:0;display:none; } .main-nav.open .nav-item.open .dropdown{display:flex;} .main-nav.open .nav-item.open .dd-caret{transform:rotate(180deg);opacity:1;} .main-nav.open .dropdown::before{display:none;} } @media(max-width:560px){ .topbar .container{padding:8px 16px;} .navbar .container{padding:9px 16px;gap:10px;} .brand-ic{width:40px;height:40px;font-size:1.15rem;} .brand-logo{height:40px;} .brand-txt strong{font-size:1.12rem;} } /* ===================================================== PAGE HERO ===================================================== */ .hero{ position:relative;min-height:400px;display:flex;align-items:center;overflow:hidden;color:var(--ink); background: radial-gradient(100% 130% at 88% -10%,rgba(var(--theme-rgb),.30) 0%,transparent 58%), linear-gradient(105deg,#061d37 0%,#0a315d 52%,#12466f 100%); border-bottom:1px solid rgba(255,255,255,.12); } /* ทุกหน้าใช้ความสูง hero เท่ากับหน้าวิทยาเขต (.hero = 400px) ใช้ body นำหน้าเพื่อให้ชนะ