@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700;800&display=swap');

.kanit-regular {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.kanit-medium {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.kanit-semibold {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: normal;
}


.sarabun-regular {
    font-family: "Sarabun", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.sarabun-medium {
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.sarabun-semibold {
    font-family: "Sarabun", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.sarabun-bold {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.sarabun-extrabold {
    font-family: "Sarabun", sans-serif;
    font-weight: 800;
    font-style: normal;
}


body {
    font-family: "Kanit", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title {
    font-family: "Kanit", sans-serif !important;
}

p,
form,
div {
    font-family: "Sarabun", sans-serif !important;
}

a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}



:root {
    --primary-bg-color: #3366ff;
    --primary-bg-hover: #255bfb;
    --primary-bg-border: #255bfb;
    --transparent-body: #002aab;
    --primary-transparentcolor: #eaedf7;
    --darkprimary-transparentcolor: #2b356e;
    --transparentprimary-transparentcolor: rgba(255, 255, 255, 0.05);

    --indigo: #4763ff;
    --purple: #aa3bff;
    --pink: #ff41c0;
    --orange: #ff3a20;
    --green: #0abb33;
    --sky-main: #009dff;
    --yellow: #ffc400;
    --teal: #17d1dc;
    --cyan: #17a2b8;

    --white: #ffffff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --black: #000;
    --muted: #9ba5ca;

    --primary: #6c5ffc;
    --secondary: #fe7f00;
    --success: #0dcd94;
    --info: #128af9;
    --warning: #fbc518;
    --danger: #f7284a;
    --light: #f8f9fa;
    --dark: #070707;

    --blue: #083dc1;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --shadow-1: 0 8px 24px rgba(10, 25, 80, .08);
    --shadow-2: 0 12px 30px rgba(10, 25, 80, .12);
    --ring: 0 0 0 3px rgba(17, 101, 255, .25);

    --yellow-main: var(--yellow);
    --orange-main: var(--orange);
    --red-main: #e50010;
    --pink-main: var(--pink);
    --violet-main: var(--purple);
    --purple-main: var(--primary);
    --blue-main: #1165ff;
    --aqua-main: var(--teal);
    --green-main: var(--success);
    --leaf-main: var(--green);
    --ash-main: var(--gray-dark);
    --navy-main: #0f172a;
    --fuchsia-main: #f30b95;
    --grape-main: var(--primary);

    --yellow-soft: #fff7d6;
    --orange-soft: #ffe6de;
    --red-soft: #ffe0e3;
    --pink-soft: #ffe3f1;
    --violet-soft: #f3e8ff;
    --purple-soft: #ecebff;
    --blue-soft: #e8f0ff;
    --aqua-soft: #e6fbfd;
    --green-soft: #e3fff6;
    --leaf-soft: #e8ffe9;
    --ash-soft: #f0f1f3;
    --navy-soft: #e6e9f0;
    --fuchsia-soft: #ffe0f1;
    --sky-soft: #e6f5ff;
    --grape-soft: #ecebff;

    --color-bg: var(--grape-soft);
    --color-surface: #fff;
    --color-soft: var(--blue-soft);
    --color-text: #141414;
    --color-muted: var(--muted);
    --color-primary: var(--primary);
    --color-primary-2: var(--info);
    --color-accent: var(--purple);
    --color-success: var(--success);
}


/* ====== PHITHAN CENTER — Quick Actions (Bootstrap-friendly, Responsive) ====== */
/* ใช้คู่กับตัวแปร :root ที่คุณให้มาได้ทันที  */

.bg-color {
    background-color: var(--color-bg);
}

section {
    padding: 30px 0;
}

.section-gradient {
    background: linear-gradient(360deg, var(--color-bg) 0%, white 100%);
}

/* ---------- Section Head ---------- */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(10px, 1.6vw, 16px);
}

.section-title {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy-main);
    font-size: clamp(18px, 1.4vw + .5rem, 28px);
    font-family: "Kanit", sans-serif !important;
}

.section-title .fa-solid {
    inline-size: 1.15em;
    aspect-ratio: 1 / 1;
    display: inline-grid;
    place-items: center;
    color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Quick Cards Wrapper ---------- */
.quick {
    /* ใช้ CSS Grid เพื่อทำงานร่วมกับ Bootstrap ได้ลื่น */
    display: grid;
    gap: clamp(10px, 2vw, 16px);
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* >=576px (sm) */
@media (min-width: 576px) {
    .quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* >=992px (lg) */
@media (min-width: 992px) {
    .quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ---------- Quick Action Card ---------- */
.qa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.4vw, 16px);
    padding: clamp(12px, 2vw, 18px);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid rgba(8, 61, 193, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition:
        transform .3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color .3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color .3s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
}

/* ===== Responsive: Mobile (≤ 576px) ===== */
@media (max-width: 576px) {
    .qa {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        font-size: 0.92rem;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
        text-align: center;
    }
}

.qa:hover,
.qa:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--color-primary)
}

.qa:hover::after,
.qa:focus-visible::after {
    opacity: 1;
}

.qa:focus-visible {
    outline: none;
    box-shadow: var(--shadow-2), var(--ring);
}

/* ---------- Media (Icon/Illustration) ---------- */
.qa img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ---------- Texts ---------- */
.qa>div {
    /* กล่องข้อความ */
    min-width: 0;
    /* ป้องกัน overflow เมื่อข้อความยาว */
}

.qa .t1 {
    font-weight: 700;
    font-size: clamp(15px, 1vw + .55rem, 20px);
    color: var(--navy-main);
    letter-spacing: .2px;
    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    line-height: 1.5;
    font-family: "Kanit", sans-serif !important;
}

@media (max-width: 576px) {
    .qa .t1 {
        text-align: left;
    }
}

.qa:hover .t1,
.qa:focus-visible .t1 {
    color: var(--color-primary);
}

.qa .t2 {
    font-weight: 500;
    font-size: clamp(12px, .8vw + .5rem, 15px);
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-family: "Sarabun", sans-serif !important;
}

.qa:hover .t2,
.qa:focus-visible .t2 {
    color: var(--color-text);
}

/* เมื่อพื้นที่กว้างพอ ให้ขึ้นสองบรรทัด */
@media (min-width: 1200px) {

    .qa .t1,
    .qa .t2 {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* ---------- สภาวะระบบ/การเข้าถึง ---------- */
@media (prefers-reduced-motion: reduce) {

    .qa,
    .qa img,
    .qa .t1,
    .qa .t2 {
        transition: none;
    }
}

/* ---------- ทางเลือก Dark Surface บางหน้า (ถ้าต้องการ) ---------- */
.section.is-inverse {
    background: var(--primary-transparentcolor);
}

.section.is-inverse .section-title {
    color: var(--color-text);
}

.section.is-inverse .qa {
    background: rgba(255, 255, 255, .9);
}

/* ---------- ตัวช่วยผสานกับ Bootstrap utilities ---------- */
/* ปรับ spacing เมื่อถูกวางในคอลัมน์ Bootstrap ที่แคบมาก */
[class*="col-"]>.quick {
    margin-top: .25rem;
}



.megamenu {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    background: var(--white);
    border: 2px solid var(--grape-main);
    padding: 10px;
    font: normal 12px Verdana;
    z-index: 100;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}

.megamenu .column {
    float: left;
    width: 180px;
    /* width of each menu column */
    margin-right: 5px;
}

.megamenu .column ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.megamenu .column ul li {
    padding-bottom: 5px;
    text-align: left;
}

.megamenu .column h3 {
    color: var(--grape-main);
    font: bold 22px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
}

.megamenu .column ul li a {
    text-decoration: none;
    color: var(--color-text);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
    display: block;
}

.megamenu .column ul li a:hover {
    background: var(--purple-soft);
    color: var(--purple-main);
}





/* .card {
        background: #f8f8f8;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 20px;
        font-size: 14px;
    }

    .card-title {
        margin-bottom: 5px;
        margin-left: 5px;
    }

    .table-announce {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .table-announce-row {
        display: table-row;
    }

    .table-announce-header {
        font-weight: bold;
        background: #ddd;
    }

    .table-announce-cell {
        display: table-cell;
        padding: 10px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    .icon {
        cursor: pointer;
    } */

/* container ครอบทุก block */
.article-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* ระยะห่างระหว่าง block ทั้งแนวนอนและแนวตั้ง */
}

.article-container .article-block li {
    border-bottom: 1px solid var(--ash-soft);
    padding: 6px 0;
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--ash-soft);
    padding: 5px 20px;
}

/* เอาเส้นคั่นออกจาก li สุดท้าย */
.article-container .article-block li:last-child {
    border-bottom: none;
}

/* block ของแต่ละบทความ */
.article-block {
    flex: 1 1 calc(50% - 20px);
    /* กว้างครึ่งจอ โดยไม่นับรวมระยะห่างระหว่าง block (gap) */
    box-sizing: border-box;
}

.badge-danger {
    background: #e74c3c;
    color: white;
    font-size: 10px;
    /* ขยายขนาด font */
    padding: 2px 5px;
    /* เพิ่ม padding */
    border-radius: 3px;
    margin-left: 3px;
    display: inline-block;
    /* กันไม่ให้บีบ */
    vertical-align: middle;
    /* จัดให้ตรงกลางบรรทัดเดียวกับ link */
}

/* reset พื้นหลัง wrapper เดิม */
.dataTables_wrapper {
    background: #fff !important;
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    font-family: "Tahoma", sans-serif;
    font-size: 14px;
    color: #212529;
}

/* ตาราง */
#header-table-announce {
    margin-left: 0;
    font-size: clamp(18px, 1.75vw, 24px);
    font-weight: bold;
    color: #1434A4;
    font-family: "Kanit", sans-serif !important;
}

#table-announce {
    width: 100% !important;
    background-color: #fff;
}

#table-announce thead {
    background-color: #f8f9fa;
    /* header เทาอ่อนเหมือน bootstrap */
}

#table-announce thead th {
    font-weight: 600;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #dee2e6;
    color: #212529;
}

#table-announce tbody td {
    padding: 8px 10px;
    border-top: 1px solid #dee2e6;
    color: #212529;
}

/* ยกเลิกสี background ของ header ตอน sort */
#table-announce thead th.sorting,
#table-announce thead th.sorting_asc,
#table-announce thead th.sorting_desc {
    background-color: inherit !important;
    /* ใช้สีเดิมของ row */
}

/* ยกเลิกสี background ของ row/column ตอน sort (ถ้ามี) */
#table-announce tbody tr td.sorting_1,
#table-announce tbody tr td.sorting_2,
#table-announce tbody tr td.sorting_3 {
    background-color: inherit !important;
    /* ใช้สีเดิมของ row */
}

/* สลับสีแถวแบบ Bootstrap */
#table-announce tbody tr.odd td {
    background-color: #fff !important;
}

#table-announce tbody tr.even td {
    background-color: #f9f9f9 !important;
}

/* hover effect */
#table-announce tbody tr:hover td {
    background-color: #efefef !important;
}

/* selected row ป้องกันสีม่วง */
#table-announce tbody tr.selected td {
    background-color: inherit !important;
    /* ใช้สี row เดิม */
}

/* ---------------- DataTables controls ---------------- */
.dataTables_filter {
    float: right;
    margin-bottom: 10px;
}

.dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: .25rem .5rem;
    margin-right: 15px;
    width: 200px;
}

.dataTables_length {
    float: left;
    margin-bottom: 10px;
}

.dataTables_length select {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: .25rem .5rem;
}

/* paginate buttons */
.dataTables_paginate {
    text-align: right;
    margin-top: 10px;
}

.dataTables_paginate a {
    border: 1px solid #dee2e6;
    padding: 5px 10px;
    margin: 0 2px;
    border-radius: .25rem;
    background: #fff;
    color: #007bff;
    text-decoration: none;
    font-size: 13px;
    height: auto;
}

.dataTables_paginate a:hover {
    background: #ced4da;
    color: #fff;
}

.dataTables_info,
.dataTables_paginate {
    margin-top: 20px;
    margin-bottom: 15px;
}

.dataTables_paginate .paginate_disabled_previous,
.dataTables_paginate .paginate_disabled_next {
    color: #000 !important;
    cursor: default;
    background: #fff;
}




* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: 'Sarabun', system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Thai", sans-serif;
    color: var(--color-text);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(133, 129, 255, .18), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(101, 197, 255, .15), transparent 55%),
        linear-gradient(180deg, var(--grape-soft), var(--sky-soft));
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: var(--color-primary);
    text-decoration: none
}

a:hover {
    color: var(--color-primary-2)
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 56px 0 28px;
    transition: background-image 0.5s ease-in-out;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 10;
    position: relative;
}

.brandline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 4px;
}

.logo {
    letter-spacing: .3px;
    color: #1b2640;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    background: rgb(255 255 255 / 41%);
    padding: 8px 20px;
    border-radius: 25px;
}

.logo i {
    color: var(--color-primary)
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--blue-soft), #eef3ff);
    color: #24304a;
    font-weight: 600;
    font-size: 12.5px;
    border: 1px solid rgba(68, 123, 224, .25)
}

.title {
    font-weight: 800;
    font-size: 42px;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    text-align: center;
}

.subtitle {
    color: var(--color-muted);
    font-weight: 600;
    margin-top: -4px;
    text-align: center;
}

.slide-action {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
    justify-content: flex-start;
}

/* ---------- Buttons ---------- */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* ปุ่มหลัก */
.hero-actions a.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--white);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: all 0.25s ease;
}

.hero-actions a.btn-primary:hover {
    background: var(--primary-bg-hover);
    border-color: var(--primary-bg-hover);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

/* ปุ่มโปร่งใส */
.hero-actions a.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.25s ease;
}

.hero-actions a.btn-ghost:hover {
    background: var(--color-primary);
    color: var(--white);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}

/* จัดระยะห่างปุ่ม */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}


/* ---------- Searchbar ---------- */
.searchbar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(20, 30, 60, .08);
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: var(--shadow-1);
    border-radius: 50px;
}

.searchbar i {
    color: var(--color-primary)
}

.searchbar input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 350px;
    font-size: 15px;
    color: #1b26403d
}

/* ---------- Global Nav ---------- */
.global-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffffbd;
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid rgba(20, 30, 60, .06)
}

.nav-inner {
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.nav-menu a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #1d2742;
    border: 1px solid transparent;
    font-weight: 600
}

.nav-menu a:hover {
    border-color: transparent
}

.nav-menu .selected {
    background: var(--color-primary);
    color: #fff
}

/* ไล่สี hover ทีละแท็บ */
.nav-menu li:nth-child(1) a:hover {
    background: var(--yellow-soft);
    color: var(--yellow-main);
}

.nav-menu li:nth-child(2) a:hover {
    background: var(--orange-soft);
    color: var(--orange-main);
}

.nav-menu li:nth-child(3) a:hover {
    background: var(--pink-soft);
    color: var(--pink-main);
}

.nav-menu li:nth-child(4) a:hover {
    background: var(--violet-soft);
    color: var(--violet-main);
}

.nav-menu li:nth-child(5) a:hover {
    background: var(--aqua-soft);
    color: var(--aqua-main);
}

.nav-menu li:nth-child(6) a:hover {
    background: var(--green-soft);
    color: var(--green-main);
}

.nav-menu li:nth-child(7) a:hover {
    background: var(--leaf-soft);
    color: var(--leaf-main);
}

.nav-menu li:nth-child(8) a:hover {
    background: var(--fuchsia-soft);
    color: var(--fuchsia-main);
}

.nav-menu li:nth-child(9) a:hover {
    background: var(--sky-soft);
    color: var(--sky-main);
}

.nav-menu li:nth-child(10) a:hover {
    background: var(--grape-soft);
    color: var(--grape-main);
}

.signup {
    padding-left: 0;
    padding-top: 0px;
    color: #999;
}





/* =========================================================
   PHITHAN CENTER — Header & Nav (Responsive, Bootstrap-like)
   ไม่ต้องแก้ PHP/HTML เดิม ใช้คลาสเดิมได้เลย
   ต้องมี <meta name="viewport" ...> ใน <head>
========================================================= */



/* --- Legacy Grid Mapping: span-* ➜ responsive columns --- */
.span-24 {
    width: 100%;
    display: block;
}

.span-12 {
    width: 100%;
    display: block;
}

.span-12.last {
    margin-left: 0;
}



/* --- Header Logo --- */
#header .span-12 a img {
    display: block;
    height: auto;
    max-width: 220px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
}

@media (min-width: 576px) {
    #header .span-12 a img {
        max-width: 260px;
    }
}

@media (min-width: 992px) {
    #header .span-12 a img {
        max-width: 280px;
    }
}

/* --- Search form block (ใช้ฟอร์มเดิม) --- */
#form1.search {
    gap: 10px;
    background: var(--color-surface);
    border-radius: 50px;
    padding: 10px;
    box-shadow: var(--shadow-1);
    width: 600px;
    margin: 0 auto;
}

#form1 .signup input.search {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(8, 61, 193, .15);
    background: #fff;
    color: var(--color-text) !important;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

#form1 .signup input.search:focus {
    border-color: var(--color-primary);
    box-shadow: var(--ring);
}

/* ปุ่มรูปภาพเดิม ให้แสดงเป็นขนาดคงที่ และคลิกง่ายบนมือถือ */
#form1 .btn input[type="image"] {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    border: 1px solid rgba(8, 61, 193, .10);
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-2));
}

/* --- Action Icons (suggestion / tel / register) --- */
.suggestion,
.a_tel,
.a_register {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
    background: var(--color-soft);
    border: 1px solid rgba(8, 61, 193, .08);
    box-shadow: var(--shadow-1);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.suggestion:hover,
.a_tel:hover,
.a_register:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
    border-color: var(--color-primary);
}

/* --- เมนูหลัก --- */
/* #menu {
    margin-top: 14px;
    background: var(--color-surface);
    border: 1px solid rgba(8, 61, 193, .10);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: 6px 10px;
} */

/* โครงสร้างรายการเมนู */
#menu>ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* รายการและลิงก์ */
#menu ul li {
    position: relative;
}

#menu ul li a.nav,
#menu ul li a.selected {
    display: inline-block;
    padding: 15px 10px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.2;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* สถานะเลือก */
#menu ul li a.selected {
    background: linear-gradient(0deg, rgba(17, 138, 249, .06), rgba(17, 138, 249, .06)) var(--color-surface);
    /* box-shadow: var(--ring); */
}

/* Hover / Focus */
#menu ul li a.nav:hover,
#menu ul li a.nav:focus-visible {
    background: var(--color-soft);
}

/* Mega menu container (ของเดิม) */
.megamenu {
    display: none;
    /* เปิดด้วยสคริปต์เดิมถ้ามี */
    position: absolute;
    right: 1000px;
    top: 500px;
    width: max-content;
    background: var(--color-surface);
    border: 1px solid rgba(8, 61, 193, .12);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: 12px;
    z-index: 30;
}

/* เมื่อ hover ที่ anchor แล้วแสดง .megamenu (ถ้าไม่มี JS คุม) */
#megaanchor:hover+#megamenu1,
#megaanchor_logined:hover+#megamenu1_logined {
    display: block;
}

/* --- แถบข้อความ/ฟอร์มเข้าสู่ระบบด้านขวา --- */
.menu_text {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
}

/* ฟอร์มล็อกอิน (ของเดิม) */
#form2 input.loginUser,
#form2 input.loginPass {
    height: 40px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(8, 61, 193, .18);
    background: #fff;
    color: var(--color-text);
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

#form2 input.loginUser:focus,
#form2 input.loginPass:focus {
    border-color: var(--color-primary);
    box-shadow: var(--ring);
}

#form2 input.loginSubmit {
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    background: #383187;
    /* border: 1px solid var(--primary-bg-border);
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-2)); */
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
    width: max-content;
}

#form2 input.loginSubmit:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

/* --- Responsive Stacking --- */
@media (max-width: 991.98px) {

    /* < lg */
    /* โลโก้บน, ฟอร์มค้นหา/ปุ่มล่าง */
    #header .span-12,
    #header .span-12.last {
        width: 100%;
    }

    #menu {
        margin-top: 10px;
    }

    /* เมนูให้เลื่อนบรรทัดได้ */
    #menu>ul {
        gap: 6px 8px;
    }
}

/* --- สี/ตัวอักษรย่อย --- */
#menu ul li a {
    color: var(--color-text);
}

#menu ul li a:hover {
    color: var(--navy-main);
}

/* --- ป้องกัน element หลุดกรอบ --- */
#header,
#menu,
.menu_text {
    min-width: 0;
}




/* =========================================================
   PHITHAN CENTER — Bootstrap Bridge (Drop-in, No HTML/PHP/JS changes)
   ทำให้โครงเก่า (.span-24, .span-12, #menu ฯลฯ) ดูเป็น Bootstrap
   ---------------------------------------------------------
   วิธีใช้: ลิงก์ไฟล์นี้หลัง bootstrap.min.css
========================================================= */

/* ----- Root tokens & base ----- */
/* ----- Bridge token mapping → use values from your new Theme :root ----- */
:root {
    /* ใช้สีหลักจากชุดธีม */
    --ph-primary: var(--primary);
    /* เฉด hover เข้มขึ้นจาก primary (มี fallback) */
    --ph-primary-dark: var(--primary);

    /* พื้นหลัง/ตัวอักษร/ตัวหนอนตามธีมใหม่ */
    --ph-bg: var(--color-bg);
    --ph-text: var(--color-text);
    --ph-muted: var(--color-muted);

    /* เส้นขอบและเงาใช้โทเค็นธีม */
    --ph-border: #e7eaf3;
    /* fallback ถ้าเบราว์เซอร์ไม่รองรับ color-mix */
    --ph-shadow: var(--shadow-1);
}

/* ใช้ color-mix ถ้ารองรับ เพื่อให้สัมพันธ์กับธีมมากขึ้น */
@supports (color: color-mix(in srgb, red, black)) {
    :root {
        --ph-primary-dark: color-mix(in srgb, var(--primary) 85%, black 15%);
        --ph-border: color-mix(in srgb, var(--color-text) 12%, white 88%);
    }
}


html,
body {
    color: var(--ph-text);
    background: #fff;
}


/* ----- Grid legacy (.span-24 / .span-12) ให้ทำงานแบบ flex row/col) ----- */
#header.span-24,
.span-24 {
    width: 100%;
}

#header .span-12,
#header .span-12.last {
    width: 50%;
    box-sizing: border-box;
    padding: 12px;
}

@media (max-width: 992px) {

    #header .span-12,
    #header .span-12.last {
        width: 100%;
    }
}

/* ----- Header brand/logo ----- */
/* #header {
    padding-top: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ph-border);
} */

#header img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ----- Top action icons (suggestion / a_tel / a_register) ----- */
#header .span-12.last {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#header .span-12.last a {
    text-decoration: none;
}





/* ปุ่มวงกลมไอคอน (ใช้ div ภายในเดิม) */
.suggestion,
.a_tel,
.a_register {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #dde3ff;
    box-shadow: var(--ph-shadow);
    position: relative;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

/* ใส่ไอคอนด้วย pseudo (ถ้าไม่มีรูปพื้นหลัง) */
.suggestion::before,
.a_tel::before,
.a_register::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    mask-size: cover;
    -webkit-mask-size: cover;
    background: var(--ph-primary);
}

/* ไอคอน (SVG path แบบ mask) */
.suggestion::before {
    /* chat bubble */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'><path d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'><path d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/></svg>");
}

.a_tel::before {
    /* phone */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'><path d='M6.62 10.79a15.053 15.053 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.07 22 2 13.93 2 3a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'><path d='M6.62 10.79a15.053 15.053 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.07 22 2 13.93 2 3a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2z'/></svg>");
}

.a_register::before {
    /* user-plus */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'><path d='M15 14c-2.67 0-8 1.34-8 4v2h8v-2c0-1.3.84-2.4 2-3-.63-.6-1.5-1-2-1zM9 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0zm9 3V9h-2V7h2V5h2v2h2v2h-2v2h-2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24'><path d='M15 14c-2.67 0-8 1.34-8 4v2h8v-2c0-1.3.84-2.4 2-3-.63-.6-1.5-1-2-1zM9 8a4 4 0 1 0 8 0 4 4 0 0 0-8 0zm9 3V9h-2V7h2V5h2v2h2v2h-2v2h-2z'/></svg>");
}

.suggestion:hover,
.a_tel:hover,
.a_register:hover {
    transform: translateY(-2px);
    background: #e7efff;
    border-color: #cfe0ff;
}

/* ----- Menu (เดิม #menu > ul > li > a) ให้หน้าตาเหมือน navbar ----- */
/* #menu {
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--ph-border);
    border-radius: 14px;
    box-shadow: var(--ph-shadow);
    padding: 6px 10px;
} */

#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
}

#menu ul li {
    position: relative;
}

#menu ul li a {
    display: block;
    padding: .5rem .8rem;
    border-radius: 10px;
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

#menu ul li a:hover {
    background: #ffffff;
    color: var(--ph-primary);
}

#menu ul li a.selected,
#menu ul li a.nav.selected {
    background: #5545ff;
    color: #fff;
}

#menu .list[hidden] {
    display: none !important;
}

/* เมก้าเมนู placeholder ให้อยู่ใต้เมนูและสวยขึ้น */
.megamenu,
.megamenu1,
#megamenu1,
#megamenu1_logined {
    background: #fff;
    border: 1px solid var(--ph-border);
    border-radius: 14px;
    box-shadow: var(--ph-shadow);
    padding: 14px;
    margin-top: 8px;
    left: 0 !important;
    top: 0 !important;
}

.megamenu .column {
    min-width: 220px;
}

.megamenu h3 {
    font-size: 1rem;
    margin-bottom: .5rem;
    color: #dc3545;
}

/* ----- Login form (เดิม .menu_text > form#form2) ให้ออกแนว input-group/btn ของ BS ----- */
.menu_text {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.menu_text form#form2 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}

.menu_text .loginUser,
.menu_text .loginPass {
    appearance: none;
    border: 1px solid var(--ph-border);
    border-radius: 10px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: #334155;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.menu_text .loginUser:focus,
.menu_text .loginPass:focus {
    outline: none;
    border-color: #b9d3ff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .12);
}

.menu_text .loginSubmit {
    border: 1px solid var(--ph-primary);
    background: var(--ph-primary);
    color: #fff;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
}

.menu_text .loginSubmit:hover {
    background: var(--ph-primary-dark);
}

.menu_text .loginSubmit:active {
    transform: translateY(1px);
}

/* ----- Logged-in menu chip ----- */
.list_logined>a#megaanchor_logined {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5ff;
    color: #1d4ed8;
    padding: .5rem .8rem;
    border-radius: 999px;
    border: 1px solid #dbe7ff;
    text-decoration: none;
    font-weight: 600;
}

.list_logined>a#megaanchor1_logined {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #1d4ed8;
    padding: .5rem .8rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}

/* ----- Search popup (เดิม .hidden #search_pop) ----- */
.hidden {
    display: none;
}

/* คงพฤติกรรมเดิม */
#search_pop {
    max-width: 720px;
    background: #fff;
    border: 1px solid var(--ph-border);
    border-radius: 14px;
    box-shadow: var(--ph-shadow);
    padding: 20px;
}

#search_pop h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

#search_pop .grey {
    color: var(--ph-muted);
    font-weight: 600;
}

/* ----- Utilities ----- */
hr {
    border-color: var(--ph-border);
    opacity: 1;
}

hr.space {
    border-color: transparent;
    margin: 12px 0;
}

a {
    color: var(--ph-primary);
}

a:hover {
    color: var(--ph-primary-dark);
}

/* ----- Responsive tweaks ----- */
@media (max-width: 768px) {
    #menu {
        padding: 8px;
    }

    #menu ul {
        gap: 4px;
    }

    #menu ul li a {
        padding: .45rem .65rem;
        font-size: 14px;
    }

    .list_logined>a#megaanchor_logined {
        font-size: 14px;
    }

    .suggestion,
    .a_tel,
    .a_register {
        width: 38px;
        height: 38px;
    }
}

/* ============================
   MENU — Drop-in Modern Override
   (คง selector เดิม / ไม่แก้ HTML)
   ใช้ร่วมกับ Bridge tokens: --ph-*
   ============================ */

/* Login strip (เดิม .menu_text …) */
.menu_text {
    color: var(--ph-muted);
    padding: 10px 14px 9px 25px;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.menu_text .loginUser,
.menu_text .loginPass {
    color: #334155;
    font-size: 14px;
    border: 1px solid var(--ph-border);
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.menu_text .loginUser:focus,
.menu_text .loginPass:focus {
    outline: none;
    border-color: #b9d3ff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .12);
}

.menu_text .loginSubmit {
    background: var(--ph-primary);
    color: #fff;
    min-width: 56px;
    border: none;
    cursor: pointer;
    padding: 0 14px;
    height: 40px;
    border-radius: 10px;
    text-shadow: none;
    font-weight: 600;
    transition: background .15s ease, transform .08s ease;
}

.menu_text .loginSubmit:hover {
    background: var(--ph-primary-dark);
}

.menu_text .loginSubmit:active {
    transform: translateY(1px);
}

/* Container */
div#menu {
    float: none;
    /* ยกเลิก float เดิม */
    /* background: #fff; */
    border-radius: 14px;
    /* box-shadow: var(--ph-shadow); */
    margin-top: 0;
    width: 100%;
    /* รักษาขนาดเดิม */
    overflow: visible;
    /* ให้ dropdown แสดงได้ */
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
}

/* Root list → ใช้ Flex, เรียงขวา→ซ้ายเหมือน float:right เดิม */
div#menu ul,
div#menu ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Kanit", sans-serif !important;
}

div#menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    position: relative;
    flex-direction: row;
    /* แทน float:right เดิม */
}

/* Item & link */
div#menu ul li {
    float: none;
    /* ยกเลิก float */
    margin: 0;
    padding: 10px 0;
    position: relative;
}

div#menu ul li.list a {
    color: #86bf34;
    font-weight: bold;
}

div#menu ul li a {
    display: block;
    color: #334155;
    text-decoration: none;
    margin: 0;
    padding: .6rem .9rem;
    font-size: 16px;
    /* เดิม 22px → ลดให้พอดี */
    border-radius: 10px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

div#menu ul li a:hover {
    color: #3623ff;
    background: var(--primary-transparentcolor);
    border-right: 0;
}

/* Active */
#menu .selected,
#menu a.selected {
    background: var(--ph-primary);
    color: #fff;
    border-left-color: transparent;
}

/* Submenu (ul ul) — ทำงานแบบ dropdown */
div#menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--ph-shadow);
    padding: 6px;
    z-index: 1000;
    flex-direction: column;
}

div#menu ul li:hover>ul {
    display: flex;
    /* แทน display:block เดิม เพื่อ gap ได้ */
    margin: 8px 0 0 0;
}

div#menu ul ul li a {
    color: #333;
    width: 100%;
    margin: 0;
    padding: .55rem .8rem;
    background-color: #fff;
    border-radius: 6px;
    font-size: 16px;
}

div#menu ul ul li a:hover {
    background: #f8faff;
    color: var(--ph-primary);
}



/* ปิดสไตล์ที่ไม่ใช้แล้วให้ไม่รบกวน */
div#menu {
    background-image: none;
    display: flex;
}

/* ตัดภาพ bg เก่า */










/* ===== PHITHAN CENTER — Swiper Hero (Bootstrap + CSS Variables) ===== */


/* Swiper container */
.hero-swiper {
    --swiper-navigation-size: 22px;
    --swiper-theme-color: var(--color-primary);
    width: 100%;
}

/* Slide inner layout (ใช้ Bootstrap grid ภายในได้) */
.hero-slide {
    padding: 30px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
}

.hero-slide .badge-top {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: var(--grape-soft);
    color: var(--color-primary);
    font-weight: 700;
    font-size: .85rem;
}

.hero-title {
    margin: .5rem 0 .25rem;
    font-weight: 800;
    color: var(--navy-main);
    font-size: clamp(22px, 1.4vw + .9rem, 36px);
    line-height: 1.2;
}

.hero-desc {
    color: var(--color-text);
    font-size: clamp(14px, .9vw + .55rem, 18px);
    opacity: .9;
}

.hero-strong {
    font-weight: 700;
    color: var(--color-primary);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
    justify-content: center;
}

/* ปุ่ม Gradient โทนม่วง */
.btn-gradient {
    --b1: var(--color-primary);
    /* ม่วงหลัก */
    --b2: var(--color-accent);
    /* ม่วงรอง */
    border: 0;
    color: #fff !important;
    background: linear-gradient(135deg, var(--b1), var(--b2));
    padding: .6rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    transition: all 0.25s ease;
    text-decoration: none;
}

.btn-gradient:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

/* ปุ่ม Ghost โทนม่วง */
.btn-ghost {
    color: var(--color-primary);
    background: var(--purple-soft);
    border: 1px solid rgba(108, 95, 252, .25);
    /* อิง primary */
    padding: .6rem 1rem;
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}

.btn-ghost:hover {
    background: var(--violet-soft);
    /* โทนม่วงอ่อน */
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}


/* Media block */
/* .hero-media {
    display: flex;
    justify-content: center;
    align-items: center;
} */

.hero-media img {
    border-radius: clamp(10px, 1.4vw, 16px);
}

/* Swiper nav/pagination */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    color: var(--color-primary);
    background: rgba(255, 255, 255, .9);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: var(--shadow-1);
}

.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
    box-shadow: var(--shadow-2);
}

.hero-swiper .swiper-pagination-bullet {
    background: var(--color-primary);
    opacity: .3;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.15);
}

/* Responsive helpers */
@media (max-width: 991.98px) {
    .hero-slide {
        padding: clamp(16px, 3.2vw, 22px);
    }
}

@media (max-width: 575.98px) {
    .hero-media {
        margin-top: .75rem;
    }
}





/* ===== ข่าวด่วน (Bootstrap cards) — color-tokened from :root ===== */

/* Card shell */
.card {
    border: 1px solid rgba(10, 25, 80, .06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    background: var(--color-surface);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--color-primary);
}

/* Card body spacing (keeps Bootstrap defaults tidy) */
.card-body {
    padding: 1rem 1rem 1.1rem;
}

/* Title link */
.card-title a {
    color: var(--navy-main);
    font-weight: 700;
    line-height: 1.35;
}

.card-title a:hover,
.card-title a:focus {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
}

/* Meta text */
.card-text.small.text-muted {
    color: var(--color-muted) !important;
}

/* Leading bolt icon tint */
h5 .fa-bolt {
    color: var(--danger) !important;
}








/* ===== Subtle card accent on hover (soft fill) ===== */
.card:hover .card-body {
    background: linear-gradient(180deg, transparent, var(--color-soft));
    border-radius: calc(var(--radius-lg) - 1px);
}





/* 🎨 Trends Section Styles */
#trends {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-1);
}

#trends h5 {
    font-weight: 700;
    color: var(--navy-main);
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
}

#trends h5 i {
    font-size: 1rem;
    color: var(--danger);
}

/* 🎴 Card */
#trends .card {
    border: 1px solid var(--primary-transparentcolor);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#trends .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
    border-color: var(--color-primary);
}

/* 📰 Card Title */
#trends .card-title a {
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.2s ease;
}

#trends .card-title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* 📝 Card Text */
#trends .card-text {
    margin: 0;
}

#trends .card-text i {
    color: var(--color-muted);
}

/* 📱 Responsive tweak */
@media (max-width: 576px) {
    #trends {
        padding: 1rem;
    }

    section {
        padding: 30px 0;
    }

    #megamenu1_logined {
        left: 130px !important;
        top: 480px !important;
    }

    #form1.search {
        width: max-content;
    }
}



/* ===== ข่าวด่วน — Card Grid ===== */

.breaking-news {
    background: color-mix(in srgb, var(--main-color) 8%, white);
    /* พื้นหลังโปร่งใสม่วงอ่อน */
    padding: 20px;
    border-radius: 12px;
    color: var(--text-main);
}

/* Header */
.breaking-news h5.mb-3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    color: var(--dark);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: .5rem;
    margin-bottom: 1.25rem !important;
}

.breaking-news h5.mb-3 i {
    font-size: 1rem;
    color: var(--orange);
}

/* Card base */
.breaking-news .card.h-100 {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    position: relative;
    overflow: hidden;
}

.breaking-news .card.h-100:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--main-color);
}

.breaking-news .card:hover .card-body {
    background: transparent;
    border-radius: calc(var(--radius-lg) - 1px);
}

/* Title link */
.breaking-news .card-title a {
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.breaking-news .card-title a:hover {
    color: var(--hover-color);
    text-decoration: underline;
}

/* Meta text */
.breaking-news .card-text {
    margin: 0;
    color: var(--text-muted) !important;
    font-size: .875rem;
}

.breaking-news .card-text i {
    color: var(--text-muted);
}

/* Focus ring (stretched-link) */
.breaking-news .stretched-link:focus-visible {
    outline: none;
}

.breaking-news .card.h-100:has(.stretched-link:focus-visible),
.breaking-news .card.h-100:focus-within {
    box-shadow: var(--shadow-hover);
    border-color: var(--main-color);
}

/* Inner padding */
.breaking-news .card-body {
    padding: 1rem 1rem 1.1rem 1rem;
}

/* Icon spacing */
.breaking-news .card-text .fa,
.breaking-news h5.mb-3 .fa {
    margin-right: .35rem;
}

/* Small screens */
@media (max-width: 576px) {
    .breaking-news .card-body {
        padding: .875rem;
    }

    .breaking-news h5.mb-3 {
        padding-bottom: .4rem;
        margin-bottom: 1rem !important;
    }
}



/* ค่าเริ่มต้น (บล็อกที่ 1) */
.article-container .article-block {
    --card-accent: var(--leaf-main);
    --card-soft: var(--leaf-soft);
}

/* บล็อกที่ 2 */
.article-container .article-block:nth-child(2) {
    --card-accent: var(--orange-main);
    --card-soft: var(--orange-soft);
}

/* บล็อกที่ 3 */
.article-container .article-block:nth-child(3) {
    --card-accent: var(--grape-main);
    --card-soft: var(--grape-soft);
}

/* บล็อกที่ 4 */
.article-container .article-block:nth-child(4) {
    --card-accent: var(--pink-main);
    --card-soft: var(--pink-soft);
}

/* (ทางเลือก) วนลูปทุก 4 บล็อก */
.article-container .article-block:nth-child(4n+1) {
    --card-accent: var(--leaf-main);
    --card-soft: var(--leaf-soft);
}

.article-container .article-block:nth-child(4n+2) {
    --card-accent: var(--orange-main);
    --card-soft: var(--orange-soft);
}

.article-container .article-block:nth-child(4n+3) {
    --card-accent: var(--grape-main);
    --card-soft: var(--grape-soft);
}

.article-container .article-block:nth-child(4n+4) {
    --card-accent: var(--pink-main);
    --card-soft: var(--pink-soft);
}

/* ตัวอย่างการใช้ตัวแปรในองค์ประกอบภายในบล็อก */
.article-block .boxed_small h3 {
    background: var(--card-soft);
}

.article-block .boxed_small a:hover {
    background: var(--card-accent);
    color: #fff;
}



/* =========================================================
   ตาราง "ข่าวด่วน" (ul.trendscontent > li)
   ไม่แก้ PHP/JS — แค่เปลี่ยนการวาง layout เป็นตารางด้วย CSS
========================================================= */

#trends {
    position: relative;
}

#trends .inner {
    overflow: hidden;
}

/* ลบ bullet/ระยะห่างเดิม แล้วให้ทั้ง ul เป็น block เต็มกว้าง */
ul.trendscontent {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

/* สร้าง "หัวคอลัมน์" ด้วย pseudo-element แทนการแก้ HTML */
ul.trendscontent::before {
    content: "หัวข้อข่าว|ผู้โพสต์|แผนก";
    display: grid;
    grid-template-columns: 1fr 240px 220px;
    gap: 12px;
    padding: 12px 16px;
    font-weight: 600;
    background: #f8fafc;
    color: #0f172a;
    border-bottom: 1px solid #e5e7eb;
    /* แยกข้อความที่คั่นด้วย | ให้อยู่คนละคอลัมน์ */
    white-space: pre;
}

@supports (content: "a" / "b" / "c") {

    /* ถ้าเบราว์เซอร์รองรับ content-slash แยกคอลัมน์จะเป๊ะขึ้น */
    ul.trendscontent::before {
        content: "หัวข้อข่าว" / "ผู้โพสต์" / "แผนก";
    }
}

/* แถวข้อมูล */
ul.trendscontent>li {
    display: grid;
    grid-template-columns: 1fr 240px 220px;
    /* หัวข้อ | ผู้โพสต์ | แผนก */
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}

/* แถวสลับสี + hover */
ul.trendscontent>li:nth-child(2n) {
    background: #fcfdff;
}

ul.trendscontent>li:hover {
    background: #f5f8ff;
}

/* คอลัมน์: หัวข้อ (คือ <a> ตัวแรกใน li) */
ul.trendscontent>li>a {
    grid-column: 1;
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
}

ul.trendscontent>li>a:hover {
    text-decoration: none;
}

/* แถว label เดิม "ข่าวด่วน" — ซ่อนไว้เพราะเรามีหัวคอลัมน์แล้ว */
ul.trendscontent .trend-label {
    display: none !important;
}

/* คอลัมน์: ผู้โพสต์ (อยู่ใน <em class="description"> … ) */
ul.trendscontent em.description {
    grid-column: 2 / span 1;
    margin: 0;
    font-style: normal;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* คอลัมน์: แผนก (คือ span.trendtip-desc ข้างใน em) */
ul.trendscontent em.description .trendtip-desc {
    grid-column: 3 / span 1;
    color: #475569;
    white-space: nowrap;
}

/* กลยุทธ์วางตำแหน่งให้ span เทไปคอลัมน์ที่ 3
   โดยทำให้ em ไม่เป็นกล่องครอบ (ปล่อยลูกหลานลงกริดได้) */
ul.trendscontent em.description {
    display: contents;
}

ul.trendscontent .trendtip-desc {
    justify-self: start;
}

/* ปรับรูปแบบข้อความภายในให้สั้น/อ่านง่ายขึ้นบนจอแคบ */
@media (max-width: 992px) {

    ul.trendscontent::before,
    ul.trendscontent>li {
        grid-template-columns: 1fr 180px 160px;
    }
}

@media (max-width: 768px) {

    /* โหมด mobile: แปลงเป็น 2 แถว (หัวข้อเต็มบรรทัด, meta ใต้หัวข้อ) */
    ul.trendscontent::before {
        content: "หัวข้อข่าว";
        grid-template-columns: 1fr;
    }

    ul.trendscontent>li {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px;
    }

    ul.trendscontent em.description,
    ul.trendscontent .trendtip-desc {
        grid-column: 1 / -1;
        white-space: normal;
    }

    ul.trendscontent em.description {
        color: #475569;
    }

    ul.trendscontent .trendtip-desc {
        opacity: .85;
    }
}

/* ซ่อนเส้น fade ซ้าย/ขวา ของ marquee เดิม เพื่อไม่ให้ทับหัวตาราง */
#trends .fade {
    display: none !important;
}

/* ให้คอลัมน์ยืดตัวรับความสูงสูงสุดของแถว */
.row.g-4>[class*="col-"] {
    display: flex;
}

/* การ์ดสูงเต็มคอลัมน์ และจัดเลย์เอาต์เป็นคอลัมน์ */
.article-block.h-100 {
    display: block;
    flex: 1 1 auto;
    /* ยืดเต็มสูงเท่าที่คอลัมน์มี */
    width: 100%;
}

/* กล่องด้านในยืดเต็ม และแบ่งพื้นที่แบบคอลัมน์ */
.article-block.h-100 .boxed_small {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* พื้นที่รายการให้กินพื้นที่ที่เหลือ (เลื่อนสกรอลได้ถ้ายาว) */
.article-block.h-100 .boxed_small ul {
    flex: 1 1 auto;
    margin: 0;
    overflow: auto;
    /* เอาออกได้ถ้าไม่อยากให้มีสกรอล */
}

/* ปุ่ม “ดูทั้งหมด..” อยู่ชิดล่างเสมอ */
.article-block.h-100 .boxed_small .more {
    margin-top: auto;
}

/* เผื่อมี padding/border ทำให้ 100% เพี้ยน */
.article-block.h-100,
.article-block.h-100 .boxed_small {
    box-sizing: border-box;
}


/* ระบุสีทีละใบ (มีแค่ 4 ใบ) */
/* ระบุสีทีละใบ (มีแค่ 4 ใบ) */
.row.g-4>[class*="col-"]:nth-child(1) .article-block {
    --card-accent: var(--orange);
    --card-soft: var(--orange-bg);
    --hover-fg: var(--orange);
    --hover-bg: var(--orange-bg);
}

.row.g-4>[class*="col-"]:nth-child(2) .article-block {
    --card-accent: var(--sky-main);
    --card-soft: var(--sky-bg);
    --hover-fg: var(--sky-main);
    --hover-bg: var(--sky-bg);
}

.row.g-4>[class*="col-"]:nth-child(3) .article-block {
    --card-accent: var(--green);
    --card-soft: var(--green-bg);
    --hover-fg: var(--green);
    --hover-bg: var(--green-bg);
}

.row.g-4>[class*="col-"]:nth-child(4) .article-block {
    --card-accent: var(--pink);
    --card-soft: var(--pink-bg);
    --hover-fg: var(--pink);
    --hover-bg: var(--pink-bg);
}


/* กล่องข่าว */
.article-block .boxed_small {
    background: #ffffff;
    border: 1px solid var(--card-soft);
    border-radius: 12px;
    padding: 12px;
}

/* หัวข้อซ้าย */
.article-block .boxed_small h3 {
    margin: 0 0 20px;
    color: var(--card-accent);
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--radius-md);
}

/* รายการข่าว + bullet */
.article-block .boxed_small ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.article-block .boxed_small li {
    position: relative;
    padding-left: 1.2rem;
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 50%, transparent);
    padding: 5px 20px;
}

.article-block .boxed_small li:last-child {
    border-bottom: none;
}


.article-block .boxed_small li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 15px;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--card-accent);
    box-shadow: 0 0 0 4px var(--card-soft);
}

/* ลิงก์ + โฮเวอร์ (ต่างสีกันตามใบ) */
.article-block .boxed_small a {
    text-decoration: none;
    color: #1d2742;
    border-radius: 6px;
    padding: 2px 4px;
    transition: all 0.25s ease;
    margin-left: 10px;
    ;
}

.article-block .boxed_small a:hover {
    background: var(--hover-bg);
    color: var(--hover-fg);
    padding: 2px 10px;
}

/* ปุ่ม "ดูทั้งหมด.." ใช้สีประจำการ์ด */
.article-block .more a {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--card-accent);
}

.article-block .more a:hover {
    text-decoration: none;
}


/* ===== NEW Badge (ฟ้า-ขาว + แอนิเมชันเข้ากับธีมใหม่) ===== */
.new-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--main-color);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--main-color) 40%, transparent);
    animation: badgePulse 1.2s ease-in-out infinite;
    height: 20px;
    width: max-content;
    line-height: 1;
}

/* จุดกระพริบเล็ก ๆ ด้านหน้า */
.new-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color) 30%, transparent);
}

/* แอนิเมชัน pulse */
@keyframes badgePulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 10px color-mix(in srgb, var(--main-color) 30%, transparent);
    }

    50% {
        transform: translateY(-1px) scale(1.06);
        box-shadow: 0 4px 14px color-mix(in srgb, var(--hover-color) 45%, transparent);
    }
}

/* Hover: สว่างขึ้นเล็กน้อย */
.new-badge:hover {
    background: var(--hover-color);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--hover-color) 45%, transparent);
}



img {
    max-width: 100%;
    height: auto;
}

.content-body img {
    height: auto !important;
    width: 100% !important;
}

.content-body,
.content-body * {
    font-family: "Sarabun", sans-serif !important;
}

#section-id {
    scroll-margin-top: 140px;
}



/* ===== Author Box ===== */
.author-box {
    background-color: var(--soft-purple);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: clamp(14px, 2vw, 16px);
}

.author-box img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 10px;
    object-fit: cover;
    filter: brightness(0.7) grayscale(100%);
}

.author-box .author-name {
    color: var(--main-color);
    font-weight: 600;
}

:root {
    /* ปรับได้ตามแบรนด์ */
    --footer-bg: #0f1530;
    --footer-fg: #e9eefc;
    --footer-muted: #9aa6d1;
    --footer-border: rgba(255, 255, 255, .08);
    --footer-link: #c9d6ff;
    --footer-link-hover: #ffffff;
}

#footer {
    background: #0d122b;
    color: var(--footer-fg);
    font-size: 0.9375rem;
    /* ~15px อ่านง่าย */
    line-height: 1.6;
}

#footer a {
    color: var(--footer-link);
    text-decoration: none;
}

#footer a:hover,
#footer a:focus {
    color: var(--footer-link-hover);
    text-decoration: none;
}

/* กล่องครอบให้ทำงานเหมือน container ของ Bootstrap */
#footer .footer-wrap {
    /* เข้ากับ .container-lg  */
    margin-inline: auto;
    padding: 24px 16px;
    /* ระยะห่างตัวอักษร */
}

/* พื้นที่คอนเทนต์หลักของฟุตเตอร์ (รองรับวิดเจ็ต/คอลัมน์ในอนาคต) */
#footer .footer-content {
    display: grid;
    gap: 16px;
}

/* ถ้ามีหลายคอลัมน์ภายใน ให้ตั้งชื่อ .footer-cols แล้วใช้ grid */
#footer .footer-cols {
    display: grid;
    gap: 24px;
}

@media (min-width: 576px) {
    #footer .footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    #footer .footer-cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* หัวข้อคอลัมน์ */
#footer .widget h3,
#footer .footer-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
}

/* ลิสต์ลิงก์ในคอลัมน์ */
#footer .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .widget li {
    display: block;
    padding: 6px 0;
    border-bottom: 1px dashed var(--footer-border);
}

#footer .widget li:last-child {
    border-bottom: 0;
}

/* เส้นคั่นล่างสุด + บรรทัดลิขสิทธิ์ */
#copyright {
    border-top: 1px solid var(--footer-border);
    margin-top: 8px;
    font-size: 0.875rem;
    /* เล็กลงนิดให้ต่างลำดับชั้น */
}

#copyright .footer-wrap {
    padding-top: 16px;
    padding-bottom: 20px;
    color: var(--footer-muted);
    text-align: center;
}

#copyright a {
    color: var(--footer-link);
}

#copyright a:hover {
    color: var(--footer-link-hover);
}


/* รองรับโหมดมืดอัตโนมัติ (ถ้าอยากให้ต่างในระบบที่บังคับ dark) */
@media (prefers-color-scheme: dark) {
    :root {
        --footer-bg: #0b1026;
        --footer-fg: #e8ecff;
        --footer-muted: #a8b2db;
        --footer-border: rgba(255, 255, 255, .06);
        --footer-link: #cfe0ff;
        --footer-link-hover: #ffffff;
    }
}