.result-pill {
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.result-pill--correct {
    background: rgba(16, 185, 129, 0.15);
    color: #0f766e;
}

.result-pill--incorrect {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.answer-pill {
    border-radius: 14px;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
}

.answer-pill.user-answer {
    background: rgba(191, 219, 254, 0.2);
}

.answer-pill.correct-answer {
    background: rgba(187, 247, 208, 0.2);
}

.explanation-box {
    border-left: 4px solid rgba(245, 158, 11, 0.6);
    padding-left: 0.75rem;
}
.score-shell {
    max-width: 900px;
    padding: 0 1rem 3rem;
}

.score-hero {
    border-radius: 28px;
    border: none;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(111, 66, 193, 0.08));
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
}

.score-metrics {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.metric-pill {
    border-radius: 999px;
    padding: 0.45rem 1rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.score-detail-list .score-detail {
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.07);
}
.quiz-shell {
    max-width: 960px;
    padding: 2rem 1rem 4rem;
}

.quiz-container {
    max-width: 760px;
    border-radius: 32px;
    border: none;
    box-shadow: 0 35px 70px rgba(15, 23, 42, 0.1);
    background: #fff;
}

.quiz-header__top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.timer-pill,
.counter-pill {
    background: rgba(13, 110, 253, 0.08);
    color: #0f172a;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.timer-pill {
    background: rgba(248, 113, 113, 0.15);
}

.difficulty-summary {
    border-radius: 24px;
    padding: 0.85rem 1.1rem;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.difficulty-summary__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
}

.difficulty-summary__metrics {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quiz-progress {
    height: 20px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.08);
}

.question-card {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.option-grid .list-group-item {
    border-radius: 1rem !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0.95rem 1.2rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-weight: 500;
}

.option-grid .list-group-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
}

.option-grid .list-group-item.active {
    background: #0d6efd;
    border-color: #0d6efd;
    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.35);
}

.navigation-buttons .btn {
    border-radius: 14px;
    padding-inline: 1.5rem;
    font-weight: 600;
}

@media (max-width: 576px) {
    .timer-pill,
    .counter-pill {
        width: 100%;
        justify-content: center;
    }
    .navigation-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    .navigation-buttons .btn {
        width: 100%;
    }
}
/*
    ส่วนการตั้งค่าพื้นฐานสำหรับ body
    - กำหนดฟอนต์หลัก: 'Arial' หรือฟอนต์ sans-serif อื่นๆ ที่มีอยู่ในระบบ
    - กำหนดสีพื้นหลัง: สีเทาอ่อน (#f0f2f5)
    - กำหนดสีข้อความหลัก: สีเทาเข้ม (#333)
*/
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #eef2ff, #fdf2f8);
    color: #333;
    /* การกำหนดขนาด */
    min-height: 100vh; /* กำหนดความสูงขั้นต่ำให้เต็มหน้าจอ (Viewport Height) */
    width: 100%;       /* กำหนดความกว้างเต็มพื้นที่ของหน้าจอ */
    max-width: 1200px; /* กำหนดความกว้างสูงสุดเพื่อป้องกันไม่ให้หน้าเว็บกว้างเกินไปบนจอใหญ่ */
    margin: 0 auto;    /* จัดหน้าเว็บให้อยู่ตรงกลาง เมื่อความกว้างไม่เต็ม 100% */
}

/*
    ส่วน Header (ส่วนหัวของหน้าเว็บ)
    - ใช้ Flexbox เพื่อจัดเรียงองค์ประกอบให้มีการเว้นระยะเท่าๆ กัน (space-between) และจัดกึ่งกลางตามแนวตั้ง
    - กำหนดระยะห่างภายใน (padding) และสีพื้นหลัง (background-color)
    - เพิ่มเงา (box-shadow) เพื่อให้ดูมีมิติ
*/
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2.5rem;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, color 0.3s ease;
}

.header--guest {
    background: linear-gradient(90deg, #ffffff, #e0f2fe);
}

.header--user {
    background: linear-gradient(90deg, #e0f2fe, #c7d2fe);
}

.header--admin {
    background: linear-gradient(90deg, #fde68a, #fca5a5);
    color: #1f2937;
}

.header--admin .logo h1,
.header--admin .nav a,
.header--admin .welcome-text {
    color: #1f2937;
}

/*
    ส่วนซ้ายของ Header
    - ใช้ Flexbox เพื่อจัดเรียงองค์ประกอบให้เรียงจากซ้ายไปขวา
    - กำหนดช่องว่างระหว่างองค์ประกอบ (gap)
*/
.header-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/*
    ส่วน Logo
    - กำหนดขนาดฟอนต์, ความหนาของฟอนต์, และสีข้อความ
    - ลบ margin ที่มาพร้อมกับ h1 ออก
*/
.logo h1 {
    font-size: 1.75rem;
    font-weight: bold;
    color: #007bff;
    margin: 0;
}

/*
    ส่วน Nav (การนำทาง)
    - ใช้ Flexbox เพื่อจัดเรียงลิงก์ให้เรียงกัน
    - กำหนดช่องว่างระหว่างลิงก์ (gap)
*/
.nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/*
    ข้อความต้อนรับสำหรับผู้ใช้
    - กำหนดขนาดฟอนต์, ความหนาของฟอนต์ และสีข้อความ
*/
.welcome-text {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

/*
    หัวข้อการ์ด (Card Title)
    - กำหนดความหนาของฟอนต์และสีข้อความให้เป็นสีหลักของแอปพลิเคชัน
*/
.card-title {
    font-weight: bold;
    color: #007bff;
}

/*
    ส่วนแสดงผลหมวดหมู่แบบ Grid
    - ใช้ CSS Grid เพื่อสร้างเลย์เอาต์แบบตาราง
    - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ทำให้การ์ดแสดงผลแบบ responsive โดยจะปรับจำนวนคอลัมน์อัตโนมัติให้พอดีกับหน้าจอ
    - กำหนดช่องว่างระหว่างการ์ด (gap)
*/
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.categories-section {
    margin-bottom: 4rem;
}

.category-card-front {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: 28px;
    padding: 1.75rem;
    border: 1px solid rgba(13, 110, 253, 0.08);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.category-card-front:hover {
    transform: translateY(-6px);
    box-shadow: 0 35px 70px rgba(15, 23, 42, 0.12);
}

.category-card-front__header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.category-card-front .icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.2), rgba(255, 193, 7, 0.25));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #0d6efd;
}

.category-card-front__leaderboard {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.leaderboard-condensed {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0.25rem 0;
}

.leaderboard-chip {
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.05);
}

.leaderboard-chip i {
    font-size: 0.8rem;
}

.rank-chip {
    background-color: #f1f5f9;
    border-color: transparent;
    color: #0f172a;
}

.rank-chip--gold {
    background: linear-gradient(135deg, #facc15, #f97316);
    color: #fff;
}

.rank-chip--silver {
    background: linear-gradient(135deg, #94a3b8, #cbd5f5);
    color: #fff;
}

.rank-chip--bronze {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
}

.name-chip {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-chip {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.time-chip {
    background-color: rgba(16, 185, 129, 0.12);
    color: #0f766e;
}

.category-card-front__cta .btn {
    border-radius: 16px;
    font-weight: 600;
    padding-block: 0.85rem;
    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.25);
}

.category-card-front__resources {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.resource-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 1rem;
    background-color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 25px rgba(15, 23, 42, 0.05);
}

.resource-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #0f172a;
}

.resource-card__header i {
    font-size: 1.2rem;
}

.resource-card--video .resource-card__header {
    color: #dc2626;
}

.resource-card--pdf .resource-card__header {
    color: #b91c1c;
}

.difficulty-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

.difficulty-option input {
    display: none;
}

.difficulty-option {
    flex: 1 1 220px;
    max-width: 260px;
}

.difficulty-option__content {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 0.95rem 1.2rem;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.difficulty-option__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
}

.difficulty-label-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    background-color: rgba(15, 23, 42, 0.55);
}

.difficulty-option__metrics {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.difficulty-total {
    font-weight: 600;
    color: #0f172a;
}

.difficulty-option input:checked + .difficulty-option__content {
    border-color: #0d6efd;
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.15);
}

.difficulty-option.level-1 .difficulty-option__content {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.2), rgba(125, 211, 252, 0.35));
}

.difficulty-option.level-2 .difficulty-option__content {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.24));
}

.difficulty-option.level-3 .difficulty-option__content {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(99, 102, 241, 0.2));
}

.difficulty-option.level-4 .difficulty-option__content {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(249, 115, 22, 0.22));
}

.difficulty-option.level-5 .difficulty-option__content {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(236, 72, 153, 0.25));
}

#difficulty-summary {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(111, 66, 193, 0.08));
}

.difficulty-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    background-color: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}

.difficulty-metric i {
    font-size: 0.85rem;
}

.metric-divider {
    width: 6px;
}

.category-list-container {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: none;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    border-radius: 24px;
}

.category-card {
    border-radius: 20px;
    border: 1px solid #eef2f7;
    background: #fff;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
}

.category-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15), rgba(111, 66, 193, 0.15));
}

.category-card__badge {
    font-size: 0.85rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.category-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-card__actions .btn {
    flex: 1 1 140px;
    border-width: 1.5px;
}

.category-card__resources {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.category-card__resources .btn {
    flex: 1 1 140px;
}

@media (max-width: 992px) {
    .category-card__actions .btn {
        flex: 1 1 100%;
    }
    .category-card__resources .btn {
        flex: 1 1 100%;
    }
}

/*
    ส่วน Leaderboard
    - ลบสัญลักษณ์หน้าข้อความ (list-style-type: none)
    - ลบ padding ที่ติดมากับ ul
*/
.leaderboard {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
}

/*
    รายการใน Leaderboard
    - กำหนดขนาดฟอนต์, padding, สีพื้นหลัง และระยะห่างด้านล่าง
*/
.leaderboard li {
    font-size: 0.9rem;
    padding: 5px 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    margin-bottom: 5px;
}

/*
    ปุ่มตัวเลือกในหน้าทำแบบทดสอบ
    - กำหนดความกว้างเต็ม, จัดข้อความชิดซ้าย, ปรับ padding และ margin
    - กำหนดเส้นขอบ (border) และรัศมีของขอบ (border-radius)
    - เพิ่ม transition เพื่อให้การเปลี่ยนสีดูนุ่มนวล
*/
.quiz-option-btn {
    width: 100%;
    text-align: left;
    white-space: normal;
    padding: 15px 20px;
    margin-bottom: 10px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}

/*
    Effect เมื่อนำเมาส์ไปชี้ที่ปุ่มตัวเลือก
    - เปลี่ยนสีพื้นหลังเป็นสีเทาอ่อน
*/
.quiz-option-btn:hover {
    background-color: #e9ecef;
}

/*
    Style สำหรับปุ่มที่ถูกเลือก
    - เปลี่ยนสีพื้นหลังและสีขอบเป็นสีน้ำเงินอ่อน
*/
.quiz-option-btn.selected {
    background-color: #cfe2ff;
    border-color: #0d6efd;
}

/*
    ส่วนสรุปคะแนน
    - กำหนดความหนาของฟอนต์สำหรับหัวข้อ
*/
.score-summary h3 {
    font-weight: bold;
}

/*
    รายละเอียดคะแนนแต่ละข้อ
    - กำหนดเส้นขอบ, รัศมีของขอบ, padding และ margin ด้านล่าง
*/
.score-detail {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

/*
    ข้อความสำหรับคำตอบที่ถูกต้อง
    - กำหนดสีเป็นสีเขียวและทำให้ข้อความหนาขึ้น
*/
.correct-answer {
    color: #198754;
    font-weight: bold;
}

/*
    ข้อความสำหรับคำตอบที่ผิด
    - กำหนดสีเป็นสีแดงและทำให้ข้อความหนาขึ้น
*/
.incorrect-answer {
    color: #dc3545;
    font-weight: bold;
}

/*
    ส่วนเสริมที่ทำให้ปุ่มที่ถูกเลือกในรายการดูโดดเด่น
    - เปลี่ยนสีพื้นหลังเป็นสีน้ำเงินและสีข้อความเป็นสีขาว
*/
.active-option {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/*
    ทำให้ cursor เป็น pointer เมื่อนำเมาส์ไปชี้ที่รายการที่สามารถคลิกได้
*/
.list-group-item-action {
    cursor: pointer;
}