@charset "UTF-8";
/* ============================================================
   THAWIN THEME — ธีมเทวิน
   สำนักงานส่งเสริมการเรียนรู้ประจำจังหวัดเลย
   Modern Thai Government Website Theme
   ============================================================ */

/* === THAWIN COLOR PALETTE === */
:root {
    --tw-navy:       #0A2472;
    --tw-navy-mid:   #1E3A8A;
    --tw-navy-light: #2D55C1;
    --tw-navy-glow:  rgba(10, 36, 114, 0.18);
    --tw-gold:       #C9A84C;
    --tw-gold-light: #F0C040;
    --tw-gold-pale:  rgba(201, 168, 76, 0.18);
    --tw-bg:         #F8F9FC;
    --tw-bg-dark:    #0D1B4B;
    --tw-bg-card:    #FFFFFF;
    --tw-surface:    #EFF2FA;
    --tw-text-h:     #0A2472;
    --tw-text-body:  #2C3E60;
    --tw-text-mute:  #6B7A9A;
    --tw-radius:     14px;
    --tw-radius-sm:  8px;
    --tw-shadow:     0 4px 20px rgba(10,36,114,.10);
    --tw-shadow-lg:  0 10px 40px rgba(10,36,114,.18);
    --tw-transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

/* === BASE === */
body {
    font-family: 'Noto Sans Thai', 'Sarabun', 'Tahoma', 'Leelawadee UI', 'Leelawadee', Arial, sans-serif;
    background: var(--tw-bg);
    color: var(--tw-text-body);
    font-size: 16px;
    line-height: 1.7;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: 'Noto Sans Thai','Sarabun','Tahoma','Leelawadee UI',Arial,sans-serif;
    font-weight: 700;
    color: var(--tw-text-h);
    line-height: 1.35;
}

/* === TOP BAR === */
.top-bar {
    background: linear-gradient(90deg,var(--tw-navy) 0%,var(--tw-navy-mid) 100%);
    color: rgba(255,255,255,.9);
    font-size: .82rem;
    padding: .35rem 0;
    border-bottom: 2px solid var(--tw-gold);
    position: relative;
    z-index: 1030;
}
.top-bar a { color:rgba(255,255,255,.85); text-decoration:none; transition:var(--tw-transition); }
.top-bar a:hover { color:var(--tw-gold-light); }
.top-bar .live-clock { font-size:.8rem; color:var(--tw-gold-light); font-weight:500; letter-spacing:.5px; }

/* === NAVBAR === */
.navbar.navbar-thawin {
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 3px solid var(--tw-gold);
    box-shadow: 0 2px 24px rgba(10,36,114,.10);
    padding: .5rem 0;
    transition: var(--tw-transition);
}
.navbar.navbar-thawin.scrolled {
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 4px 32px rgba(10,36,114,.18);
}
.navbar.navbar-thawin .navbar-brand .brand-name { font-size:1rem; font-weight:700; color:var(--tw-navy); line-height:1.2; }
.navbar.navbar-thawin .navbar-brand .brand-sub  { font-size:.72rem; color:var(--tw-text-mute); font-weight:400; }
.navbar.navbar-thawin .navbar-brand img {
    width:52px; height:52px; object-fit:cover; border-radius:50%;
    border:2px solid var(--tw-gold);
    box-shadow:0 2px 12px var(--tw-navy-glow);
    transition:var(--tw-transition);
}
.navbar.navbar-thawin .navbar-brand:hover img { transform:scale(1.05); border-color:var(--tw-gold-light); }

.navbar.navbar-thawin .nav-link {
    color:var(--tw-text-body) !important;
    font-weight:500;
    font-size:.92rem;
    padding:.6rem .9rem !important;
    border-radius:var(--tw-radius-sm);
    transition:var(--tw-transition);
    position:relative;
}
.navbar.navbar-thawin .nav-link::after {
    content:''; position:absolute; bottom:4px; left:50%;
    width:0; height:2px;
    background:var(--tw-gold); border-radius:2px;
    transform:translateX(-50%); transition:var(--tw-transition);
}
.navbar.navbar-thawin .nav-link:hover::after,
.navbar.navbar-thawin .nav-link.active::after { width:60%; }
.navbar.navbar-thawin .nav-link:hover { color:var(--tw-navy) !important; background:var(--tw-surface); }
.navbar.navbar-thawin .nav-link.active { color:var(--tw-navy) !important; font-weight:700; }

.navbar.navbar-thawin .dropdown-menu {
    border:none; border-top:3px solid var(--tw-gold);
    border-radius:0 0 var(--tw-radius-sm) var(--tw-radius-sm);
    box-shadow:var(--tw-shadow-lg); padding:.5rem; margin-top:0 !important;
    animation:dropFade .2s ease;
}
@keyframes dropFade { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.navbar.navbar-thawin .dropdown-item {
    border-radius:var(--tw-radius-sm); padding:.5rem 1rem;
    font-size:.9rem; color:var(--tw-text-body); transition:var(--tw-transition);
}
.navbar.navbar-thawin .dropdown-item:hover { background:var(--tw-navy); color:white; padding-left:1.4rem; }
.navbar.navbar-thawin .dropdown-item.active { background:var(--tw-navy-mid); color:white; }

.btn-thawin-admin {
    background:linear-gradient(135deg,var(--tw-navy) 0%,var(--tw-navy-mid) 100%);
    color:white !important; border:none; border-radius:50px;
    padding:.45rem 1.2rem; font-size:.85rem; font-weight:600;
    box-shadow:0 3px 12px var(--tw-navy-glow); transition:var(--tw-transition);
}
.btn-thawin-admin:hover {
    background:linear-gradient(135deg,var(--tw-gold) 0%,var(--tw-gold-light) 100%);
    color:var(--tw-navy) !important;
    box-shadow:0 4px 16px var(--tw-gold-pale); transform:translateY(-1px);
}

/* === HERO === */
.hero-section { position:relative; overflow:hidden; }
.hero-banner-wrapper {
    position:relative;
    width:100%;
    overflow:hidden;
    background-color:#081540;
}
.hero-banner-img {
    width:100%;
    height:auto;
    display:block;
}
.hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(10,36,114,.60) 0%,rgba(13,27,75,.45) 100%);
    display:flex; align-items:center; justify-content:center;
}
.hero-overlay .text-shadow { text-shadow:0 2px 16px rgba(0,0,0,.5); }
.hero-title {
    font-size: calc(1.5rem + 1.5vw);
}
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    .hero-btn {
        padding: 0.4rem 1rem !important;
        font-size: 0.85rem !important;
    }
}
.carousel-indicators button {
    width:10px; height:10px; border-radius:50%; border:none !important;
    opacity:.5; transition:var(--tw-transition);
}
.carousel-indicators button.active {
    background-color:var(--tw-gold-light) !important;
    opacity:1; width:28px; border-radius:5px;
}

/* === SECTION TITLE === */
.section-title {
    font-size:1.5rem; font-weight:800; color:var(--tw-navy);
    position:relative; padding-left:1.1rem; margin-bottom:0;
}
.section-title::before {
    content:''; position:absolute; left:0; top:10%; bottom:10%;
    width:4px;
    background:linear-gradient(180deg,var(--tw-gold) 0%,var(--tw-gold-light) 100%);
    border-radius:4px;
}

/* === CARDS === */
.card {
    border:none; border-radius:var(--tw-radius);
    box-shadow:var(--tw-shadow); transition:var(--tw-transition);
    overflow:hidden; background:var(--tw-bg-card);
}
.card:hover { box-shadow:var(--tw-shadow-lg); transform:translateY(-4px); }
.card-thawin      { border-top:3px solid var(--tw-navy-mid); }
.card-thawin-gold { border-top:3px solid var(--tw-gold); }
.card .card-img-wrapper { overflow:hidden; }
.card .card-img-wrapper img { transition:transform .45s ease; }
.card:hover .card-img-wrapper img { transform:scale(1.06); }
.date-badge { display:inline-flex; align-items:center; gap:4px; font-size:.75rem; color:var(--tw-text-mute); font-weight:500; }

/* === QUICK LINKS === */
.quick-link-card {
    color:white; border-radius:var(--tw-radius); padding:1.6rem 1rem;
    text-align:center; text-decoration:none; transition:var(--tw-transition);
    display:block; position:relative; overflow:hidden;
}
.quick-link-card::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:var(--tw-transition); }
.quick-link-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 16px 40px rgba(0,0,0,.25); color:white; }
.quick-link-card:hover::before { background:rgba(255,255,255,.08); }
.quick-link-card i { font-size:2.2rem; margin-bottom:.6rem; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.quick-link-card span { font-weight:600; font-size:.88rem; line-height:1.3; }

/* === ANNOUNCEMENT ITEMS === */
.announcement-item {
    display:flex; gap:1rem; padding:.85rem 1rem;
    border-radius:var(--tw-radius-sm); transition:var(--tw-transition);
    border-left:3px solid transparent; text-decoration:none;
    color:var(--tw-text-body); background:white; margin-bottom:.5rem;
    box-shadow:0 1px 4px rgba(10,36,114,.06);
}
.announcement-item:hover { background:var(--tw-surface); border-left-color:var(--tw-gold); color:var(--tw-navy); transform:translateX(4px); }
.announcement-item .ann-icon {
    width:36px; height:36px; border-radius:50%; background:var(--tw-surface);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    color:var(--tw-navy-mid); font-size:.9rem;
}
.announcement-item:hover .ann-icon { background:var(--tw-navy); color:var(--tw-gold-light); }
.announcement-item .ann-title {
    font-size:.88rem; font-weight:500; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:2px;
}
.announcement-item .ann-date { font-size:.72rem; color:var(--tw-text-mute); }

/* === STATS BAR === */
.stats-bar {
    background:linear-gradient(135deg,var(--tw-navy) 0%,var(--tw-navy-mid) 100%);
    padding:1.5rem 0; position:relative; overflow:hidden;
}
.stat-item { text-align:center; color:white; position:relative; }
.stat-item .stat-number { font-size:2rem; font-weight:800; color:var(--tw-gold-light); line-height:1; }
.stat-item .stat-label { font-size:.82rem; color:rgba(255,255,255,.75); margin-top:4px; }

/* === SIDEBAR WIDGET === */
.sidebar-widget { background:white; border-radius:var(--tw-radius); box-shadow:var(--tw-shadow); overflow:hidden; margin-bottom:1.5rem; }
.sidebar-widget-header {
    background:linear-gradient(135deg,var(--tw-navy) 0%,var(--tw-navy-mid) 100%);
    color:white; padding:.75rem 1.1rem; font-weight:700; font-size:.9rem;
    display:flex; align-items:center; gap:.5rem;
}
.sidebar-widget-header i { color:var(--tw-gold-light); }
.sidebar-widget-body { padding:.75rem; }

/* === FOOTER === */
.footer-thawin {
    background:linear-gradient(180deg,var(--tw-bg-dark) 0%,#060E2E 100%);
    color:rgba(255,255,255,.8); position:relative; overflow:hidden;
}
.footer-thawin::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--tw-navy-mid),var(--tw-gold),var(--tw-navy-mid));
}
.footer-thawin h5,.footer-thawin h6 { color:var(--tw-gold-light); font-size:.95rem; font-weight:700; letter-spacing:.3px; }
.footer-thawin a { color:rgba(255,255,255,.65); text-decoration:none; transition:var(--tw-transition); font-size:.85rem; }
.footer-thawin a:hover { color:var(--tw-gold-light); padding-left:4px; }
.footer-thawin .footer-divider { border-color:rgba(255,255,255,.1); }
.footer-thawin .footer-bottom { font-size:.8rem; color:rgba(255,255,255,.45); }
.footer-thawin .footer-logo-badge { width:56px; height:56px; border-radius:50%; border:2px solid var(--tw-gold); object-fit:cover; }
.footer-stat-chip {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
    border-radius:50px; padding:4px 12px; font-size:.78rem; color:rgba(255,255,255,.75); margin:2px;
}
.footer-stat-chip strong { color:var(--tw-gold-light); }

/* === MOBILE OFFCANVAS === */
.thawin-offcanvas { border-right:3px solid var(--tw-gold) !important; }
.thawin-offcanvas .offcanvas-header {
    background:linear-gradient(135deg,var(--tw-navy) 0%,var(--tw-navy-mid) 100%);
    color:white; padding:1rem 1.25rem; border-bottom:2px solid var(--tw-gold);
}
.thawin-offcanvas .nav-link {
    color:var(--tw-text-body); border-radius:var(--tw-radius-sm);
    margin-bottom:2px; padding:.6rem .9rem; font-size:.9rem; transition:var(--tw-transition);
}
.thawin-offcanvas .nav-link:hover,.thawin-offcanvas .nav-link.active { background:var(--tw-surface); color:var(--tw-navy); font-weight:600; }
.thawin-offcanvas .nav-section-label {
    font-size:.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--tw-text-mute); padding:.75rem .9rem .25rem;
}

/* === UTILITIES === */
.bg-thawin-navy    { background-color:var(--tw-navy) !important; }
.bg-thawin-gold    { background-color:var(--tw-gold) !important; }
.bg-thawin-surface { background-color:var(--tw-surface) !important; }
.text-thawin-navy  { color:var(--tw-navy) !important; }
.text-thawin-gold  { color:var(--tw-gold) !important; }
.text-thawin-mute  { color:var(--tw-text-mute) !important; }
.border-thawin-gold { border-color:var(--tw-gold) !important; }

.btn-thawin-primary {
    background:linear-gradient(135deg,var(--tw-navy-mid) 0%,var(--tw-navy) 100%);
    color:white; border:none; border-radius:50px; font-weight:600;
    transition:var(--tw-transition); box-shadow:0 3px 12px var(--tw-navy-glow);
}
.btn-thawin-primary:hover { background:linear-gradient(135deg,var(--tw-navy) 0%,#061850 100%); color:white; transform:translateY(-1px); box-shadow:0 6px 20px var(--tw-navy-glow); }

.btn-thawin-gold {
    background:linear-gradient(135deg,var(--tw-gold) 0%,var(--tw-gold-light) 100%);
    color:var(--tw-navy); border:none; border-radius:50px; font-weight:700; transition:var(--tw-transition);
}
.btn-thawin-gold:hover { background:linear-gradient(135deg,var(--tw-gold-light) 0%,var(--tw-gold) 100%); color:var(--tw-navy); transform:translateY(-1px); box-shadow:0 6px 20px var(--tw-gold-pale); }

.btn-thawin-outline { color:var(--tw-navy); border:1.5px solid var(--tw-navy-mid); border-radius:50px; font-weight:600; background:transparent; transition:var(--tw-transition); }
.btn-thawin-outline:hover { background:var(--tw-navy); color:white; border-color:var(--tw-navy); }

.badge-new {
    background:linear-gradient(135deg,#e53e3e,#c53030);
    color:white; font-size:.6rem; font-weight:700; letter-spacing:.5px;
    padding:2px 6px; border-radius:50px; vertical-align:middle;
    animation:pulse-badge 2s infinite;
}
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.65} }

.new-badge-blink { animation:pulse-badge 1.5s infinite; font-size:.65rem; font-weight:700; }
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hidden { display:none !important; }

/* === TABLE === */
.table-royal thead { background-color:var(--tw-navy); color:white; }
.table-royal th { font-weight:600; padding:.75rem 1rem; }

/* === FORM === */
.form-control:focus,.form-select:focus { border-color:var(--tw-navy-mid); box-shadow:0 0 0 .25rem rgba(30,58,138,.2); }
.modal-header.bg-royal-blue { background-color:var(--tw-navy); color:white; }
.modal-header.bg-royal-blue .btn-close { filter:invert(1); }

/* === DROPDOWN === */
.dropdown-menu { border:none; box-shadow:0 10px 40px rgba(0,0,0,.15); border-radius:.5rem; }
.dropdown-item:hover { background-color:var(--tw-navy); color:white; }

/* === ANIMATIONS === */
@keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.animate-fadeup { animation:fadeInUp .55s ease both; }
.animate-fadeup-d1 { animation-delay:.1s; }
.animate-fadeup-d2 { animation-delay:.2s; }
.animate-fadeup-d3 { animation-delay:.3s; }

/* === RESPONSIVE === */
@media (max-width:992px) {
    .hero-section { min-height:380px; }
    .section-title { font-size:1.25rem; }
}
@media (max-width:576px) {
    .hero-section { min-height:280px; }
    body { font-size:15px; }
}