/* ============================================================
   หน้าแรก (index.php) — เลเอ้าต์ใหม่ โทนสีเดิม (ทอง #D6B172 / ครีม / ขาว)
   ทุกคลาสอยู่ใต้ .home จึงไม่กระทบหน้าอื่นที่ใช้ report.css
   ============================================================ */

.home {
    --gold: #D6B172;
    --gold-dark: #a8844a;
    --gold-soft: rgba(214, 177, 114, 0.14);
    --cream: #faf4eb;
    --ink: #1f1f1f;
    --muted: #8d8d8d;
    --line: #eee4d3;
    --red: #e05b5b;
    --radius: 22px;

    color: var(--ink);
    text-align: left;
    padding-top: 65px;
    background: linear-gradient(180deg, var(--cream) 0, #fff 620px);
    min-height: 100vh;
}

.home * {
    box-sizing: border-box;
}

.home .wrap {
    width: min(1200px, 100% - 32px);
    margin: 0 auto;
}

/* ---------- Hero ---------- */

.home .hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 24px;
    padding: 48px 0 24px;
}

.home .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--gold);
    color: var(--gold-dark);
    font-size: 15px;
    font-weight: 500;
}

.home .hero h1 {
    margin: 18px 0 4px;
    font-size: 44px;
    font-weight: 500;
    line-height: 1.25;
}

.home .hero-total {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 4px 0 8px;
}

.home .hero-total .num {
    font-size: 120px;
    font-weight: 600;
    line-height: 1;
    color: var(--gold);
    letter-spacing: -2px;
    /* ตัวเลขกว้างเท่ากันทุกตัว คำว่า "ตำแหน่ง" จะได้ไม่ขยับไปมาระหว่างตัวเลขวิ่ง */
    font-variant-numeric: tabular-nums;
}

.home .hero-total .unit {
    font-size: 26px;
    font-weight: 300;
}

.home .hero-date {
    color: var(--muted);
    font-weight: 300;
    font-size: 16px;
}

.home .progress-card {
    margin-top: 22px;
    max-width: 520px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(214, 177, 114, 0.18);
}

.home .progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    margin-bottom: 10px;
}

.home .progress-head b {
    color: var(--gold-dark);
    font-weight: 600;
}

/* ตัวเลขที่วิ่ง ชิดขวาในช่องที่จองไว้ ระยะห่างกับข้อความข้าง ๆ จะคงที่ */
.home .progress-head [data-count] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.home .progress {
    display: flex;
    height: 10px;
    border-radius: 999px;
    background: var(--gold-soft);
    overflow: hidden;
}

/* แถบย่อย : ทอง = เปิดสอบ  แดง = ไม่เปิดสอบ  (มีอย่างน้อยเป็นจุดกลม ให้เห็นแม้มีแค่ 1 เขต) */
.home .progress > span {
    position: relative;
    display: block;
    flex: none;
    min-width: 10px;
    height: 100%;
    border-radius: 999px;
    background: var(--gold);
    overflow: hidden;
}

.home .progress > span + span {
    margin-left: 3px;
}

.home .progress > .s-closed {
    background: var(--red);
}

/* สรุปใต้แถบ : เปิดสอบ / ไม่เปิดสอบ / รอประกาศ */
.home .progress-lg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

.home .progress-lg > * {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.home .progress-lg a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.home .progress-lg b {
    font-weight: 600;
    color: var(--ink);
}

.home .progress-lg .closed b {
    color: var(--red);
}

.home .progress-lg .dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.home .progress-lg .s-open   { background: var(--gold); }
.home .progress-lg .s-closed { background: var(--red); }
.home .progress-lg .s-wait   { background: #e3ddd1; }

/* แสงวิ่งผ่านแถบทอง */
.home .progress > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: home-shine 2.4s ease-in-out 2.2s infinite;
}

@keyframes home-shine {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .home .progress > span::after {
        animation: none;
    }
}

.home .hero-note {
    margin-top: 16px;
    max-width: 560px;
    font-size: 14px;
    font-weight: 300;
    color: var(--muted);
}

.home .hero-img {
    display: flex;
    justify-content: center;
}

/* กรอบรูป : บนมือถือตัดส่วนล่างของรูปออก (ดูที่ max-width: 700px) */
.home .board-crop {
    width: 100%;
    max-width: 520px;
}

.home .board-wrap {
    position: relative;
    width: 100%;
    /* ขนาดตัวอักษรบนกระดานคิดตามความกว้างรูป (cqw) */
    container-type: inline-size;
}

.home .hero-img img {
    display: block;
    width: 100%;
    height: auto;
    /* รูปพื้นขาว ให้กลืนกับพื้นครีมของ hero */
    mix-blend-mode: multiply;
}

/* ---------- ข้อความบนกระดานดำ (สาขาที่เพิ่มล่าสุด) ----------
   ตำแหน่งเป็น % ของรูป img_header.png : ช่องว่างสีเขียวทางขวาของปลายไม้ชี้ */

.home .board {
    position: absolute;
    left: 55%;
    width: 31.5%;
    top: 16%;
    height: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqw;
    text-align: center;
    color: #fff;
}

.home .board-label {
    display: inline-flex;
    align-items: center;
    gap: 1.2cqw;
    font-size: max(10px, 2.5cqw);
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #f3e3c4;
}

.home .board-label .dot {
    width: max(6px, 1.3cqw);
    height: max(6px, 1.3cqw);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(214, 177, 114, 0.7);
    animation: home-pulse 1.8s ease-out infinite;
}

@keyframes home-pulse {
    0% { box-shadow: 0 0 0 0 rgba(214, 177, 114, 0.7); }
    100% { box-shadow: 0 0 0 max(6px, 1.6cqw) rgba(214, 177, 114, 0); }
}

/* ทุกข้อซ้อนกันในช่องเดียว แล้วสลับกันจางเข้า-ออก */
.home .board-list {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home .board-list li {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(1.6cqw);
    filter: blur(3px);
    transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}

.home .board-list li.on {
    opacity: 1;
    transform: none;
    filter: none;
}

.home .board-list li.out {
    opacity: 0;
    transform: translateY(-1.6cqw);
    filter: blur(3px);
}

.home .board-list .bm {
    font-size: max(13px, 4.2cqw);
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.35);
}

.home .board-list .plus {
    display: inline-block;
    margin-left: 0.6cqw;
    padding: 0 1.6cqw;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}

.home .board-list .be {
    margin-top: 1cqw;
    font-size: max(10px, 2.6cqw);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .home .board-list li {
        transition: none;
        transform: none;
        filter: none;
    }
    .home .board-label .dot {
        animation: none;
    }
}

/* ---------- Search ---------- */

.home .search-card {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 8px 0 56px;
    padding: 14px 18px 14px 14px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--line);
}

.home .search-card img {
    width: 110px;
    height: auto;
    flex: none;
    mix-blend-mode: multiply;
}

.home .search-text {
    flex: 0 0 auto;
}

.home .search-text .t {
    font-size: 22px;
    font-weight: 500;
    color: var(--gold-dark);
}

.home .search-text .s {
    font-size: 14px;
    font-weight: 300;
    color: var(--muted);
}

.home .search-form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 6px 6px 20px;
    border: 2px solid var(--gold);
    border-radius: 999px;
}

.home .search-form input[type=text] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    color: var(--ink);
}

.home .search-form button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    transition: background .2s;
}

.home .search-form button:hover {
    background: var(--gold-dark);
}

/* ---------- นับถอยหลังสู่วันสอบ (ใต้กล่องค้นหา) ---------- */

/* มีกล่องนับถอยหลังต่อท้าย : ระยะห่างใต้กล่องค้นหาย้ายไปอยู่ใต้กล่องนับถอยหลังแทน */
.home .has-cd .search-card {
    margin-bottom: 18px;
}

.home .cd {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 32px;
    margin: 0 0 56px;
    padding: 22px 26px;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 8% 0%, rgba(214, 177, 114, 0.32), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(214, 177, 114, 0.16), transparent 40%),
        linear-gradient(135deg, #2c231a, #1b1712);
    color: #fff;
    box-shadow: 0 16px 36px rgba(60, 42, 16, 0.25);
    overflow: hidden;
}

.home .cd-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.home .cd-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(145deg, #ecd29c, #c49a55);
    color: var(--ink);
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(214, 177, 114, 0.35);
}

/* นาฬิกาทรายพลิกทุก ๆ ไม่กี่วินาที */
.home .cd-ic i {
    animation: cd-flip 4s ease-in-out infinite;
}

@keyframes cd-flip {
    0%, 42% { transform: rotate(0); }
    50%, 92% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

.home .cd-t {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: #f6e7c8;
}

.home .cd-s {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
}

.home .cd-units {
    display: flex;
    gap: 10px;
}

.home .cd-u {
    min-width: 88px;
    padding: 10px 10px 8px;
    border: 1px solid rgba(214, 177, 114, 0.35);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
}

.home .cd-u b {
    display: block;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    /* ตัวเลขกว้างเท่ากันทุกตัว วินาทีเปลี่ยนแล้วกล่องไม่ขยับ */
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #f8e6bd, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home .cd-u span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
}

/* ถึงเวลาสอบแล้ว : ซ่อนตัวเลข เปลี่ยนหัวข้อเป็นข้อความวันสอบ */
.home .cd-t2,
.home .cd.done .cd-t1,
.home .cd.done .cd-units {
    display: none;
}

.home .cd.done .cd-t2 {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .home .cd-ic i {
        animation: none;
    }
}

/* ---------- Section heading ---------- */

.home .sec-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.home .sec-head h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
}

.home .sec-head p {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 300;
    color: var(--muted);
}

/* ---------- Stat cards ---------- */

.home .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.home .stat {
    position: relative;
    padding: 22px 22px 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.home .stat .label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
}

.home .stat .label i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 16px;
}

.home .stat .value {
    margin-top: 14px;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.1;
}

.home .stat .sub {
    font-size: 14px;
    font-weight: 300;
    color: var(--muted);
}

.home .stat .bar {
    margin-top: 14px;
    height: 6px;
    border-radius: 999px;
    background: var(--gold-soft);
    overflow: hidden;
}

.home .stat .bar > span {
    display: block;
    height: 100%;
    background: var(--gold);
    border-radius: 999px;
}

/* การ์ดรวมทั่วประเทศ ใช้พื้นทองเหมือนกล่องเดิม */
.home .stat.main {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 10px 26px rgba(214, 177, 114, 0.45);
}

.home .stat.main .label i {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.home .stat.main .sub {
    color: rgba(255, 255, 255, 0.9);
}

.home .stat.main .bar {
    background: rgba(255, 255, 255, 0.3);
}

.home .stat.main .bar > span {
    background: #fff;
}

.home .disclaimer {
    margin: 16px 0 0;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

/* ---------- Ranking ---------- */

.home .rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 64px auto 40px;
}

.home .panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.home .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.home .panel-head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
}

.home .panel-head h3 small {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

.home .panel-head .tag {
    flex: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 13px;
    font-weight: 500;
}

.home .rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home .rank-list a {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: 14px;
    color: var(--ink);
    transition: background .15s;
}

.home .rank-list li + li a {
    border-top: 1px solid #f4efe6;
}

.home .rank-list a:hover {
    background: var(--cream);
}

.home .rank-no {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f5f1ea;
    color: var(--gold-dark);
    font-weight: 600;
    font-size: 16px;
}

.home .rank-name {
    min-width: 0;
}

.home .rank-name .n {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
}

.home .rank-name .d {
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home .rank-name .meter {
    margin-top: 6px;
    height: 4px;
    border-radius: 999px;
    background: #f3ede2;
    overflow: hidden;
}

.home .rank-name .meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gold);
}

.home .rank-num {
    text-align: right;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
}

.home .rank-num small {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
}

/* อันดับ 1 เด่นด้วยพื้นครีม + ขอบทอง */
.home .rank-list li:first-child a {
    background: var(--cream);
    border: 1px solid var(--gold);
    padding: 16px 12px;
    margin-bottom: 4px;
}

.home .rank-list li:first-child .rank-no {
    width: 40px;
    height: 40px;
    background: var(--gold);
    color: #fff;
    font-size: 18px;
}

.home .rank-list li:first-child .rank-name .n {
    font-size: 19px;
    font-weight: 500;
}

.home .rank-list li:first-child .rank-num {
    font-size: 24px;
    color: var(--gold-dark);
}

.home .rank-list li:nth-child(2) a {
    border-top: 0;
}

.home .panel-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid var(--gold);
    color: var(--gold-dark);
    font-size: 15px;
    transition: all .2s;
}

.home .panel-more:hover {
    background: var(--gold);
    color: #fff;
}

.home .empty {
    padding: 24px 0;
    text-align: center;
    color: var(--muted);
    font-weight: 300;
}

/* ---------- แผนที่สาขาวิชาเอกที่เปิดสอบ (หน้าตาอยู่ใน esa_map.css) ---------- */

.home .em-sec {
    margin: 0 auto 40px;
}

/* แผนที่ลอยตามการเลื่อนหน้า : เว้นใต้แถบเมนูที่ลอยอยู่ด้านบน (สูง 65px) */
.home .em-card {
    --em-top: 77px;
}

.home .footer-space {
    height: 120px;
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 1050px) {
    .home .hero h1 {
        font-size: 36px;
    }
    .home .hero-total .num {
        font-size: 92px;
    }
    .home .stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .home .rank-grid {
        grid-template-columns: 1fr;
    }
    .home .search-card img {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .home .hero {
        grid-template-columns: 1fr;
        gap: 6px;
        padding-top: 14px;
    }
    .home .hero-img {
        order: -1;
    }
    /* รูปเดิมเป็นจัตุรัส ครึ่งล่างเป็นขาของครู : ตัดให้เหลือกระดาน + ครึ่งตัวบน
       ข้อความบนกระดานยังอยู่ตำแหน่งเดิม เพราะ board-wrap ข้างในยังเต็มขนาดรูป */
    .home .board-crop {
        max-width: 400px;
        aspect-ratio: 100 / 62;
        overflow: hidden;
    }
    .home .search-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }
    .home .search-form button span {
        display: none;
    }
    /* นับถอยหลัง : หัวข้ออยู่บน ช่องตัวเลข 4 ช่องเต็มความกว้างอยู่ล่าง */
    .home .cd {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
    }
    .home .cd-units {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
    .home .cd-u {
        min-width: 0;
        padding: 8px 4px 6px;
    }
    .home .cd-u b {
        font-size: 32px;
    }
}

@media screen and (max-width: 480px) {
    .home {
        padding-top: 50px;
    }
    .home .hero h1 {
        font-size: 28px;
        margin-top: 10px;
    }
    .home .hero-total {
        gap: 8px;
    }
    .home .hero-total .num {
        font-size: 72px;
        letter-spacing: -1px;
    }
    .home .progress-card {
        margin-top: 14px;
        padding: 14px 16px;
    }
    .home .search-card {
        margin-bottom: 36px;
    }
    .home .has-cd .search-card {
        margin-bottom: 14px;
    }
    .home .cd {
        margin-bottom: 36px;
        border-radius: 18px;
    }
    .home .cd-ic {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 19px;
    }
    .home .cd-t {
        font-size: 18px;
    }
    .home .cd-s {
        font-size: 13px;
    }
    .home .cd-u b {
        font-size: 26px;
    }
    .home .cd-u span {
        font-size: 12px;
    }
    /* คำอธิบายใต้หัวข้อยาวมาก : แสดง 2 บรรทัด (เอาเมาส์ชี้/แตะค้างดูข้อความเต็ม) */
    .home .sec-head p {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .home .stat .sub {
        font-size: 12px;
    }
    .home .hero-total .unit {
        font-size: 20px;
    }
    .home .hero-date,
    .home .progress-head {
        font-size: 13px;
    }
    .home .progress-lg {
        gap: 4px 12px;
        font-size: 12px;
    }
    /* hid1 เดิมใช้ visibility:hidden ซึ่งยังกินพื้นที่ */
    .home .hero-note.hid1 {
        display: none;
    }
    .home .sec-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .home .sec-head h2 {
        font-size: 24px;
    }
    .home .stats {
        gap: 12px;
    }
    .home .stat {
        padding: 16px;
    }
    .home .stat .label {
        font-size: 15px;
    }
    .home .stat .label i {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    .home .stat .value {
        font-size: 30px;
    }
    .home .rank-grid {
        margin-top: 40px;
    }
    .home .panel {
        padding: 16px 12px;
    }
    .home .panel-head h3 {
        font-size: 18px;
    }
    .home .rank-list a {
        grid-template-columns: 32px 1fr auto;
        gap: 10px;
        padding: 10px 6px;
    }
    .home .rank-no {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .home .rank-name .n {
        font-size: 15px;
    }
    .home .rank-num {
        font-size: 17px;
    }
    /* เว้นที่ให้เมนูล่างของมือถือ (menu_mobile สูง 65px) */
    .home .footer-space {
        height: 160px;
    }
}

/* หน้าแรกบนมือถือ (จอไม่เกิน 700px) : ไม่แสดงป้าย "ข้อมูลปี" เหนือหัวข้อ (ปีอยู่ที่ช่องเลือกปีบนเมนูแล้ว) (2026-09-29) */
@media screen and (max-width: 700px) {
    .home .hero .chip {
        display: none;
    }
}

/* มือถือ : กล่องค้นหา + นับถอยหลัง แบบกะทัดรัด ประหยัดพื้นที่ (2026-09-29)
   ค้นหา = หัวข้อ + คำอธิบายบรรทัดเดียว แล้วช่องค้นหาเตี้ย ๆ
   นับถอยหลัง = ไอคอนเล็ก + หัวข้อ/วันสอบ แล้ว 4 ช่องตัวเลขแบบ "46 วัน" บรรทัดเดียว */
@media screen and (max-width: 600px) {
    .home .search-card {
        gap: 8px;
        padding: 10px 12px;
        border-radius: 16px;
    }
    .home .has-cd .search-card {
        margin-bottom: 10px;
    }
    .home .search-text {
        display: flex;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
    }
    .home .search-text .t {
        flex: none;
        font-size: 16px;
    }
    .home .search-text .s {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }
    .home .search-form {
        padding: 3px 3px 3px 14px;
        border-width: 1.5px;
    }
    .home .search-form input[type=text] {
        font-size: 14px;
    }
    .home .search-form button {
        padding: 6px 14px;
        font-size: 14px;
    }
    .home .cd {
        gap: 8px;
        margin-bottom: 28px;
        padding: 10px 12px;
        border-radius: 16px;
    }
    .home .cd-head {
        gap: 10px;
    }
    .home .cd-ic {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 13px;
    }
    .home .cd-t {
        font-size: 14px;
        line-height: 1.25;
    }
    .home .cd-s {
        margin-top: 0;
        font-size: 11px;
    }
    .home .cd-units {
        gap: 6px;
    }
    .home .cd-u {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px 3px;
        border-radius: 10px;
    }
    .home .cd-u b {
        display: inline;
        font-size: 20px;
        line-height: 1.2;
    }
    .home .cd-u span {
        display: inline;
        margin-top: 0;
        font-size: 10.5px;
    }
}

/* มือถือ : รายงานสถิติการเปิดสอบ แบบใหม่ ประหยัดพื้นที่ (2026-09-29)
   ทั่วประเทศ = แถบทองเต็มความกว้าง (ชื่อซ้าย ตัวเลขใหญ่ขวา)
   สพม. / สพป. / สศศ. = รายการ 3 แถวในการ์ดขาวใบเดียว : ชื่อ + แถบสัดส่วน ซ้าย · จำนวน + % ขวา */
@media screen and (max-width: 600px) {
    .home .stats {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .home .stat {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "label value" "bar sub";
        align-items: center;
        column-gap: 14px;
        row-gap: 6px;
        padding: 10px 16px;
        border-radius: 0;
        border-width: 0 1px 1px;
        box-shadow: none;
    }
    .home .stat .label  { grid-area: label; gap: 10px; font-size: 15px; }
    .home .stat .value  { grid-area: value; margin: 0; font-size: 22px; line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; }
    .home .stat .sub    { grid-area: sub; font-size: 11px; text-align: right; white-space: nowrap; }
    /* report.css มี .bar ทั่วไป (กว้าง 40px บนมือถือ + padding-top 10px ทับแถบจนมองไม่เห็น) : ล้างออก */
    .home .stat .bar    { grid-area: bar; width: auto; margin: 0 0 0 40px; padding: 0; height: 5px; }
    .home .stat .bar > span { height: 5px; }
    .home .stat .label i {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 13px;
    }
    /* ทั่วประเทศ */
    .home .stat.main {
        grid-template-areas: "label value" "sub value";
        row-gap: 0;
        margin-bottom: 10px;
        padding: 12px 18px;
        border-width: 0;
        border-radius: 18px;
        background:
            radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
            linear-gradient(135deg, #dcbb80, #c49a55);
        box-shadow: 0 8px 20px rgba(214, 177, 114, 0.38);
    }
    .home .stat.main .label { font-size: 16px; }
    .home .stat.main .value { font-size: 38px; font-weight: 700; }
    .home .stat.main .sub   { margin-left: 40px; font-size: 12px; text-align: left; }
    .home .stat.main .bar   { display: none; }
    /* 3 แถวล่าง รวมเป็นการ์ดใบเดียว */
    .home .stat:nth-child(2) {
        border-top-width: 1px;
        border-radius: 16px 16px 0 0;
    }
    .home .stat:last-child {
        border-radius: 0 0 16px 16px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    }
}

/* ============================================================
   ลูกเล่นพื้นหลัง hero บนมือถือ (จอไม่เกิน 700px) : น่ารัก สดใส ธีมครู · นักเรียน · โรงเรียน (2026-09-29)
   พื้นครีมอุ่น + วงสีพาสเทลจาง ๆ (เหลือง / ชมพู / ฟ้า / เขียวมิ้นต์)
   ภาพวาดเส้นน้ำตาลแบบเดียวกับการ์ตูนครู (index.php $deco_top)
     เหนือกระดาน : เครื่องบินกระดาษลอย + เส้นประ · ก้อนเมฆลอยไปมา · พระอาทิตย์ยิ้ม (รัศมีหมุนช้า) · ดาวกะพริบ
   ของตกแต่งล้วน ไม่รับการแตะ · ผู้ที่ตั้งค่าลดการเคลื่อนไหวเห็นภาพนิ่ง · จอใหญ่ไม่แสดง (เหมือนเดิม)
   ============================================================ */
.home .deco-top {
    display: none;
}

@media screen and (max-width: 700px) {
    .home {
        position: relative;
        isolation: isolate;
        background:
            radial-gradient(circle at 18px 84px, rgba(255, 214, 107, 0.30), rgba(255, 214, 107, 0) 100px),
            radial-gradient(circle at calc(100% - 24px) 78px, rgba(255, 179, 193, 0.32), rgba(255, 179, 193, 0) 120px),
            radial-gradient(circle at calc(100% - 30px) 430px, rgba(159, 211, 255, 0.26), rgba(159, 211, 255, 0) 140px),
            radial-gradient(circle at 0 600px, rgba(158, 224, 184, 0.24), rgba(158, 224, 184, 0) 150px),
            linear-gradient(180deg, #fff5e3 0, #fffaf1 480px, #fff 760px);
    }
    .home .hero-img {
        position: relative;
    }
    .home .deco-top {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    .home .dc {
        position: absolute;
        display: block;
        height: auto;
        overflow: visible;
        pointer-events: none;
    }
    /* เหนือกระดาน */
    .home .d-plane {
        left: -6px;
        top: 0;
        width: 76px;
        animation: deco-float 5s ease-in-out infinite;
    }
    .home .d-cloud {
        right: 62px;
        top: 4px;
        width: 40px;
        animation: deco-drift 9s ease-in-out infinite;
    }
    .home .d-sun {
        right: -6px;
        top: -8px;
        width: 48px;
    }
    .home .d-sun .rays {
        transform-box: fill-box;
        transform-origin: center;
        animation: deco-spin 16s linear infinite;
    }
    .home .d-star.s1 {
        left: 47%;
        top: 8px;
        width: 16px;
        animation: deco-twinkle 2.6s ease-in-out infinite;
    }
    .home .d-spark.s2 {
        left: 30%;
        top: 10px;
        width: 11px;
        animation: deco-twinkle 2.2s ease-in-out .8s infinite;
    }
    .home .d-spark.s3 {
        right: 30%;
        top: 30px;
        width: 10px;
        animation: deco-twinkle 2.8s ease-in-out 1.4s infinite;
    }
}

@keyframes deco-spin    { to { transform: rotate(360deg); } }
@keyframes deco-float   { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(4px, -5px) rotate(3deg); } }
@keyframes deco-drift   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
@keyframes deco-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
    .home .dc,
    .home .dc * {
        animation: none !important;
    }
}

/* ============================================================
   การ์ด "ประกาศแล้ว" บนมือถือ (จอไม่เกิน 700px) : เตี้ยลง + กรอบไล่สีพาสเทลเลื่อนวนช้า ๆ (2026-09-29)
   ทอง → ชมพู → ฟ้า → เขียวมิ้นต์ ชุดเดียวกับพื้นหลัง hero · คำอธิบายใต้แถบอยู่บรรทัดเดียว
   ============================================================ */
@media screen and (max-width: 700px) {
    .home .progress-card {
        margin-top: 12px;
        padding: 9px 14px 8px;
        border: 2px solid transparent;
        border-radius: 16px;
        background:
            linear-gradient(#fff, #fff) padding-box,
            linear-gradient(90deg, #e9c98f, #ffb3c1, #9fd3ff, #9ee0b8, #e9c98f) 0 0 / 300% 100% border-box;
        box-shadow: 0 6px 18px rgba(214, 177, 114, 0.18);
        animation: pc-border 8s linear infinite;
    }
    .home .progress-head {
        margin-bottom: 6px;
        font-size: 12.5px;
    }
    .home .progress {
        height: 8px;
    }
    .home .progress > span {
        min-width: 8px;
    }
    .home .progress-lg {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
        margin-top: 6px;
        font-size: 11px;
        white-space: nowrap;
    }
    .home .progress-lg > * {
        gap: 4px;
    }
    .home .progress-lg .dot {
        width: 7px;
        height: 7px;
    }
}

@keyframes pc-border {
    to { background-position: 0 0, 150% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .home .progress-card {
        animation: none;
    }
}

/* หัว hero บนมือถือ : ข้อความเด่นขึ้น (2026-09-29) — ตัวหนา สีเข้ม · แฮชแท็กทองเข้ม · ตัวเลขทองเข้มมีเงานูน · "ตำแหน่ง" หนาขึ้น */
@media screen and (max-width: 700px) {
    .home .hero h1 {
        font-weight: 700;
        color: #2b2419;
        letter-spacing: -0.2px;
    }
    .home .hero h1 .h-tag {
        color: #a8762f;
    }
    .home .hero-total .num {
        font-weight: 700;
        color: #c99a55;
        text-shadow: 0 3px 0 #f1dfbd, 0 8px 18px rgba(201, 154, 85, 0.28);
    }
    .home .hero-total .unit {
        font-weight: 600;
        color: #2b2419;
    }
}

/* หัว hero บนมือถือ : จัดกึ่งกลางใต้รูปการ์ตูน (2026-09-29)
   ชื่อ + แฮชแท็ก กึ่งกลาง · ตัวเลขกับ "ตำแหน่ง" อยู่แถวเดียวกันกึ่งกลาง · วันที่อัปเดตเป็นป้ายเล็กกึ่งกลาง */
@media screen and (max-width: 700px) {
    .home .hero-text {
        text-align: center;
    }
    .home .hero h1 {
        margin: 6px 0 0;
        line-height: 1.2;
    }
    .home .hero-total {
        justify-content: center;
        align-items: baseline;
        gap: 10px;
        margin: 2px 0 6px;
    }
    .home .hero-date {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid var(--line);
        font-size: 12px;
    }
    .home .progress-card {
        text-align: left;
    }
}

/* ============================================================
   รายงานสถิติการเปิดสอบ บนมือถือ : เพิ่มลูกเล่น (2026-09-29)
   ทั่วประเทศ = การ์ดทองมีวงแหวนตกแต่ง + แสงวิ่งผ่านเป็นระยะ
   3 แถวสังกัด = สีพาสเทลประจำแถว (สพม. ฟ้า · สพป. เขียวมิ้นต์ · สศศ. ชมพู) ที่ไอคอน แถบข้าง และแถบสัดส่วน
   กรอบการ์ดรวม 3 แถว = ไล่สีพาสเทลเลื่อนช้า ๆ ชุดเดียวกับการ์ด "ประกาศแล้ว"
   ============================================================ */
@media screen and (max-width: 600px) {
    .home .stat.main {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 12% 120%, rgba(255, 255, 255, 0.35), transparent 45%),
            linear-gradient(135deg, #e6c68c 0%, #cfa25e 55%, #b98a47 100%);
    }
    .home .stat.main::before {
        content: "";
        position: absolute;
        right: 70px;
        top: -38px;
        width: 90px;
        height: 90px;
        border: 14px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        pointer-events: none;
    }
    .home .stat.main::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
        transform: translateX(-120%);
        animation: st-shine 5s ease-in-out 1.5s infinite;
        pointer-events: none;
    }
    .home .stat.main .value {
        text-shadow: 0 3px 10px rgba(120, 80, 20, 0.3);
    }
    /* กรอบการ์ด 3 แถว : ไล่สีพาสเทล */
    .home .stat:not(.main) {
        position: relative;
        border-color: transparent;
    }
    .home .stats {
        --st-b: linear-gradient(90deg, #e9c98f, #ffb3c1, #9fd3ff, #9ee0b8, #e9c98f);
    }
    .home .stat:nth-child(2) {
        border-top-width: 2px;
    }
    .home .stat:not(.main) {
        border-left: 2px solid transparent;
        border-right: 2px solid transparent;
        background:
            linear-gradient(#fff, #fff) padding-box,
            var(--st-b) 0 0 / 300% 100% border-box;
        animation: pc-border 8s linear infinite;
    }
    .home .stat:last-child {
        border-bottom: 2px solid transparent;
    }
    /* เส้นคั่นระหว่างแถว */
    .home .stat:nth-child(3),
    .home .stat:nth-child(4) {
        box-shadow: inset 0 1px 0 #f1e8da;
    }
    /* สีประจำแถว */
    .home .stat:nth-child(2) { --st-c: #5fa8e0; --st-s: #e3f1ff; }
    .home .stat:nth-child(3) { --st-c: #4fb985; --st-s: #e0f6ea; }
    .home .stat:nth-child(4) { --st-c: #e5809a; --st-s: #ffe6ed; }
    .home .stat:not(.main) .label i {
        background: var(--st-s);
        color: var(--st-c);
    }
    .home .stat:not(.main) .bar {
        background: var(--st-s);
    }
    .home .stat:not(.main) .bar > span {
        background: var(--st-c);
    }
    .home .stat:not(.main)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: var(--st-c);
    }
    .home .stat:not(.main) .sub span {
        color: var(--st-c);
        font-weight: 600;
    }
}

@keyframes st-shine {
    0% { transform: translateX(-120%); }
    40%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .home .stat.main::after,
    .home .stat:not(.main) {
        animation: none;
    }
}

/* คุมโทนสี (2026-09-29) : การ์ดสถิติ + การ์ด "ประกาศแล้ว" บนมือถือใช้โทนทอง/ครีมชุดเดียวกับเว็บ
   กรอบ = ทองไล่ครีมเลื่อนวน (แทนสีพาสเทลหลายสี) · 3 แถวสังกัดใช้ทองเฉดต่างกันเล็กน้อย */
@media screen and (max-width: 700px) {
    .home .progress-card {
        background:
            linear-gradient(#fff, #fff) padding-box,
            linear-gradient(90deg, #e9c98f, #f7e7c6, #c99a55, #f7e7c6, #e9c98f) 0 0 / 300% 100% border-box;
    }
}
@media screen and (max-width: 600px) {
    .home .stats {
        --st-b: linear-gradient(90deg, #e9c98f, #f7e7c6, #c99a55, #f7e7c6, #e9c98f);
    }
    .home .stat:nth-child(2) { --st-c: #d9b172; --st-s: #fbf1df; }
    .home .stat:nth-child(3) { --st-c: #b98a47; --st-s: #f5e8d2; }
    .home .stat:nth-child(4) { --st-c: #8a6a3a; --st-s: #efe3cf; }
}

/* หัวข้อส่วน (รายงานสถิติการเปิดสอบ ฯลฯ) บนมือถือ : คำอธิบายตัวเล็กลง แสดงครบทุกบรรทัด ไม่ตัดท้าย (2026-09-29) */
@media screen and (max-width: 480px) {
    .home .sec-head h2 {
        margin-bottom: 2px;
    }
    .home .sec-head p {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
        margin-top: 2px;
        font-size: 11.5px;
        line-height: 1.55;
    }
}

/* ข้อความแจ้งเตือนใต้การ์ดสถิติ บนมือถือ : กล่องแจ้งเตือนสีอำพันให้เด่นขึ้น ตัวเล็กพอให้จบใน 2 บรรทัด (2026-09-29) */
@media screen and (max-width: 480px) {
    .home .disclaimer {
        margin: 12px 0 0;
        padding: 7px 8px 7px 9px;
        border-left: 3px solid #d99a3a;
        border-radius: 10px;
        background: #fff4e0;
        color: #8a5a17;
        font-size: 9.3px;
        font-weight: 500;
        line-height: 1.55;
        letter-spacing: -0.2px;
    }
}
/* ข้อความแจ้งเตือนบนมือถือ : โทนแดง + ไอคอนแจ้งเตือนหน้าข้อความ (2026-09-29) */
@media screen and (max-width: 480px) {
    .home .disclaimer {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 8px;
        border-left-color: #d64545;
        background: #fdecec;
        color: #a52a2a;
        font-size: 9.1px;
    }
    .home .disclaimer::before {
        content: "\f071";
        flex: none;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 14px;
        color: #d64545;
    }
}
/* ข้อความแจ้งเตือนบนมือถือ : เล็กลงอีกนิดให้จบ 2 บรรทัดเมื่อมีไอคอน */
@media screen and (max-width: 480px) {
    .home .disclaimer { gap: 6px; font-size: 8.6px; letter-spacing: -0.15px; }
    .home .disclaimer::before { font-size: 13px; }
}

/* การ์ดทั่วประเทศบนมือถือ : แผนที่ประเทศไทยจาง ๆ (img/th_map_sil.png สร้างจากแผนที่หน้าแรก) แทนวงแหวน (2026-09-29) */
@media screen and (max-width: 600px) {
    .home .stat.main::before {
        right: 78px;
        top: -14px;
        width: 70px;
        height: 128px;
        border: 0;
        border-radius: 0;
        background: url('img/th_map_sil.png') center / contain no-repeat;
        opacity: 0.2;
        transform: rotate(-6deg);
    }
}

/* ที่มาเส้นขอบแผนที่ : ตัวเล็กมาก */
.home .em-credit { font-size: 10px; }
@media screen and (max-width: 600px) {
    .home .em-credit { font-size: 8.5px; line-height: 1.4; }
}
/* คำอธิบายใต้หัวข้อส่วนบนมือถือ : เล็กลงอีก */
@media screen and (max-width: 480px) {
    .home .sec-head p { font-size: 10px; line-height: 1.5; }
}

/* รายงานสถิติการเปิดสอบ บนมือถือ : สพม. / สพป. / สศศ. เป็น 3 คอลัมน์แถวเดียว ใต้การ์ดทั่วประเทศ (2026-09-29)
   การ์ดละใบ : ไอคอน + ชื่อ · จำนวนตัวใหญ่ · ตำแหน่ง · % · แถบสัดส่วน  แถบสีประจำสังกัดย้ายไปขอบบน */
@media screen and (max-width: 600px) {
    .home .stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .home .stat.main {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }
    .home .stat:not(.main),
    .home .stat:nth-child(2),
    .home .stat:last-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 12px 10px 10px;
        border: 2px solid transparent;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }
    .home .stat:not(.main) .label {
        gap: 6px;
        font-size: 14px;
    }
    .home .stat:not(.main) .label i {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 11px;
    }
    .home .stat:not(.main) .value {
        margin-top: 4px;
        font-size: 26px;
        text-align: left;
    }
    .home .stat:not(.main) .sub {
        font-size: 10px;
        text-align: left;
        white-space: normal;
    }
    .home .stat:not(.main) .bar {
        width: 100%;
        margin: 6px 0 0;
    }
    .home .stat:not(.main)::before {
        top: 0;
        bottom: auto;
        left: 12px;
        right: 12px;
        width: auto;
        height: 3px;
        border-radius: 0 0 3px 3px;
    }
}

/* มือถือ : ปุ่ม "รายงานทั้งหมด" ใต้ TOP 10 เล็กลง ชิดขวา · ช่องว่างระหว่างข้อความแจ้งเตือนกับ TOP 10 น้อยลง (2026-09-29) */
@media screen and (max-width: 480px) {
    .home .panel-more {
        display: flex;
        width: fit-content;
        margin: 10px 0 0 auto;
        padding: 4px 12px;
        gap: 6px;
        border-width: 1.5px;
        font-size: 12.5px;
    }
    .home .panel-more i {
        font-size: 11px;
    }
    .home .rank-grid {
        margin-top: 16px;
    }
}
/* การ์ด 3 คอลัมน์ (สพม. / สพป. / สศศ.) บนมือถือ : ชื่อ ตัวเลข และหน่วย อยู่กึ่งกลางการ์ด */
@media screen and (max-width: 600px) {
    .home .stat:not(.main),
    .home .stat:nth-child(2),
    .home .stat:last-child { align-items: center; text-align: center; }
    .home .stat:not(.main) .label { justify-content: center; }
    .home .stat:not(.main) .value,
    .home .stat:not(.main) .sub { width: 100%; text-align: center; }
}

/* หัวกล่อง TOP 10 บนมือถือ : แถบพื้นเข้มไล่ทองเต็มความกว้างกล่อง ไอคอนทองนำหน้า ป้าย TOP 10 สีทองมีมงกุฎ (2026-09-29) */
@media screen and (max-width: 600px) {
    .home .rank-grid .panel { overflow: hidden; }
    .home .rank-grid .panel-head {
        position: relative;
        margin: -16px -12px 12px;
        padding: 14px 14px 12px;
        background:
            radial-gradient(circle at 100% 0%, rgba(233, 201, 143, 0.35), transparent 55%),
            linear-gradient(150deg, #2b2419 0%, #4a3a22 60%, #6e5430 100%);
    }
    .home .rank-grid .panel-head h3 {
        position: relative;
        padding-left: 46px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
    }
    .home .rank-grid .panel-head h3 small {
        margin-top: 1px;
        font-size: 11.5px;
        color: rgba(255, 255, 255, 0.7);
    }
    .home .rank-grid .panel-head h3::before {
        content: "\f549";
        position: absolute;
        left: 0;
        top: 50%;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        background: linear-gradient(145deg, #f0d6a6, #c99a55);
        color: #2b2419;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .home .rank-grid .panel:nth-child(2) .panel-head h3::before { content: "\f51c"; }
    .home .rank-grid .panel-head .tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 11px;
        background: linear-gradient(135deg, #f0d6a6, #d6b172);
        color: #2b2419;
        font-weight: 700;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    }
    .home .rank-grid .panel-head .tag::before {
        content: "\f521";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 11px;
    }
}
/* หัวกล่อง TOP 10 บนมือถือ : ชื่อจบบรรทัดเดียว (ตัวเล็กลง ป้าย TOP 10 เล็กลง) */
@media screen and (max-width: 600px) {
    .home .rank-grid .panel-head h3 { padding-left: 42px; font-size: 15.5px; white-space: nowrap; }
    .home .rank-grid .panel-head h3::before { width: 32px; height: 32px; margin-top: -16px; border-radius: 10px; font-size: 13px; }
    .home .rank-grid .panel-head .tag { padding: 3px 9px; font-size: 11px; gap: 4px; }
    .home .rank-grid .panel-head .tag::before { font-size: 9.5px; }
}