@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@400;500;700&display=swap');

:root {
    --font-family: 'Noto Sans Lao', sans-serif;
    --bg-main: #000000;
    --bg-secondary: #0d0d0d;
    --bg-card: #101011;
    --border-color: #474a4d;
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --accent-color: #A855F7; /* ສີມ່ວງ */
    --accent-hover: #9333EA;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-main);
    color: var(--text-primary);
}

/* ===== 1. ໂຄງສ້າງ Layout ຫຼັກ ===== */
.app-layout {
    display: flex;
}

.sidebar {
    width: 250px;
    height: 100vh;
    background-color: var(--bg-secondary);
    padding: 1.5rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.main-container {
    margin-left: 250px; /* ຍູ້ເນື້ອຫາອອກໃຫ້ພົ້ນຂອບเขตຂອງ sidebar */
    width: calc(100% - 250px);
    padding: 1.5rem 2rem;
}


/* ===== 2. Sidebar Menu ===== */
.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    margin-bottom: 2rem;
    padding: 0 0.5rem;
}
.sidebar .logo-img { height: 35px; }
.sidebar .logo-text { font-size: 1.25rem; font-weight: 700; }
.sidebar .menu-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    padding: 0 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.sidebar .menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500;
}
.sidebar .menu-item:hover {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
.sidebar .menu-item.active {
    background-color: var(--accent-color);
    color: white;
}
.sidebar .menu-item i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}


/* ===== 3. Top Bar (ຢູ່ເທິງສຸດຂອງເນື້ອຫາ) ===== */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.search-bar {
    flex-grow: 1;
    max-width: 600px;
    position: relative;
}
.search-bar i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}
.search-bar input {
    width: 100%;
    padding: 10px 15px 10px 45px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 1rem;
}
.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.top-bar-actions .action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
}
.top-bar-actions .profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
/* Style ປຸ່ມທີ່ມີຂໍ້ຄວາມ (ເຊັ່ນ: ຈ້າງງານ) */


/* ===== 4. Content Grid & Course Cards ===== */
.content-grid {
    display: grid;
    /* ສ້າງ Grid ແບບ Responsive: ໃຫ້ມີ column ຂະໜາດຢ່າງໜ້ອຍ 320px */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.course-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s, box-shadow 0.2s;
}
.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.card-thumbnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.card-content {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.card-category {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent-color);
    margin-bottom: auto; /* ຍູ້ footer ລົງລຸ່ມສຸດ */
}
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.card-price {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}
.card-enroll-btn {
    background-color: var(--accent-color);
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s;
}
.card-enroll-btn:hover {
    background-color: var(--accent-hover);
}
/* ============================================= */
/* ===== 5. Admin Area & CRUD Page Styles  ===== */
/* ============================================= */

.admin-content-area {
    width: 100%;
}

.admin-content-area h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.admin-crud-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.form-container {
    flex: 1;
    min-width: 400px;
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    align-self: flex-start;
}

.list-container {
    flex: 2;
    min-width: 600px;
}

/* === Admin Form Styles === */
.admin-form .form-group {
    margin-bottom: 1.25rem;
}

.admin-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form input[type="password"], /* <-- ເພີ່ມແຖວນີ້ */
.admin-form textarea,
.admin-form select {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-family);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.admin-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* === Admin Button Styles === */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--font-family);
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
}
.btn-primary {
    background-color: var(--accent-color);
    color: white;
}
.btn-primary:hover {
    background-color: var(--accent-hover);
}
.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background-color: #4E4F50;
}


/* === Admin Table Styles === */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.admin-table th, 
.admin-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.admin-table th {
    background-color: #333435;
    color: var(--text-primary);
    font-weight: 700;
}
.admin-table tbody tr:hover {
    background-color: var(--bg-card);
}
.admin-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-table img {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}
.admin-table .action-buttons a {
    color: var(--text-secondary);
    margin: 0 8px;
    font-size: 1.1rem;
}
.admin-table .action-buttons a:hover {
    color: var(--accent-color);
}

/* ໃຊ້ CSS ເກົ່າທີ່ສະໄຕล์ input file ງາມໆ */
.file-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
.file-input-hidden { display: none; }
.file-input-label {
    display: inline-block;
    padding: 10px 15px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}
.file-input-label:hover { background-color: #4E4F50; }
#file-name-display { margin-left: 15px; font-style: italic; color: #aaa; }
/* ===== 6. Sidebar Footer & Profile ===== */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.profile-info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.profile-link-wrapper {
    text-decoration: none;
    flex-grow: 1; /* ໃຫ້ສ່ວນ profile ຂະຫຍາຍເຕັມພື້ນທີ່ທີ່ເຫຼືອ */
    border-radius: 6px;
    transition: background-color 0.2s;
}
.profile-link-wrapper:hover {
    background-color: var(--bg-card);
}
.profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
}
.profile-pic-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.profile-text {
    display: flex;
    flex-direction: column;
}
.profile-name {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.9rem;
}
.profile-subtext {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Style ຂອງປຸ່ມ Logout */
.logout-button {
    color: var(--text-secondary);
    font-size: 1.2rem;
    padding: 10px;
    margin-left: 10px; /* ໄລຍະຫ່າງຈາກໂປຣໄຟລ໌ */
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.logout-button:hover {
    background-color: rgba(239, 68, 68, 0.1); /* ສີແດງໂປ່ງໃສ */
    color: #EF4444; /* ສີແດງ */
}

/* Style ສຳລັບຕອນ Sidebar ຫຍໍ້ເຂົ້າ */
.app-layout.sidebar--collapsed .sidebar .profile-info-container {
    justify-content: center;
}
.app-layout.sidebar--collapsed .sidebar .profile-link-wrapper {
    display: none; /* ເຊື່ອງສ່ວນໂປຣໄຟລ໌ໄວ້ */
}
.app-layout.sidebar--collapsed .sidebar .logout-button {
    margin-left: 0; /* ເອົາໄລຍະຫ່າງອອກ */
}
/* ============================================= */
/* ===== 6. Admin Form Fieldset Styling    ===== */
/* ============================================= */

.admin-form fieldset {
    /* ປ່ຽນເສັ້ນຂອບເກົ່າມາເປັນແບບຂອງເຮົາ */
    border: 1px solid var(--border-color); 
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem; /* ໄລຍະຫ່າງລະຫວ່າງກຸ່ມ */
}

.admin-form legend {
    font-weight: 700;
    color: var(--accent-color);
    padding: 0 10px;
    margin-left: 10px;
    font-family: var(--font-family); /* <-- ເພີ່ມແຖວນີ້ */
}
/* ============================================= */
/* ===== 7. Homepage Section Styles        ===== */
/* ============================================= */

.content-section {
    margin-bottom: 3rem; /* ໄລຍະຫ່າງລະຫວ່າງສ່ວນຂອງຄອສ ແລະ ສິນຄ້າ */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header h2 {
    font-size: 1.75rem;
    color: var(--text-primary);
}

.section-header .view-all-btn {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
}

.section-header .view-all-btn:hover {
    text-decoration: underline;
}

/* ປັບປຸງ Card Footer ໃຫ້ໃຊ້ໄດ້ທັງຄອສ ແລະ ສິນຄ້າ */
.card-footer .price-tag {
    font-weight: 700;
    font-size: 0.9rem; /* ປັບຂະໜາດໃຫ້ພໍດີ */
    color: var(--text-primary);
    background-color: var(--bg-main); /* ໃຊ້ສີພື້ນຫຼັງທີ່ເຂັ້ມກວ່າ Card */
    padding: 5px 10px; /* ເພີ່ມຊ່ອງວ່າງພາຍໃນ */
    border-radius: 6px; /* ເຮັດໃຫ້ຂອບມົນ */
    border: 1px solid var(--border-color); /* ເພີ່ມເສັ້ນຂອບบางๆ */
}
.card-footer .action-button {
    background-color: var(--accent-color);
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s;
    font-size: 0.85rem;
}

.card-footer .action-button:hover {
    background-color: var(--accent-hover);
}
/* Style ສຳລັບສະຖິຕິໃນ Card */
.card-stats {
    display: flex;
    gap: 1rem; /* ໄລຍະຫ່າງລະຫວ່າງຍອດວິວ ແລະ ຍອດສະໝັກ */
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.75rem; /* ຍູ້ລົງมาจากชื่อคอร์ส */
    margin-bottom: auto; /* ຍູ້ footer ລົງລຸ່ມສຸດ */
}

.card-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* ============================================= */
/* ===== 8. Course Detail Page Styles      ===== */
/* ============================================= */
.course-detail-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 3rem 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}
.course-detail-header .category {
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}
.course-detail-header h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.course-detail-header .short-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 800px;
}
.instructor-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;
}
.instructor-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.course-detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px; /* Main content and sidebar */
    gap: 2rem;
    align-items: flex-start;
}

.course-main-content {
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
}
.course-main-content h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.course-sidebar {
    position: sticky; /* ເຮັດໃຫ້ມັນລອຍຕາມ */
    top: 2rem;
}
.sidebar-card {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.sidebar-card-body {
    padding: 1.5rem;
}
.sidebar-card-price {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.sidebar-card-price span {
    font-size: 1rem;
    font-weight: normal;
    color: var(--text-secondary);
}
.sidebar-card .btn-enroll {
    display: block;
    width: 100%;
    text-align: center;
}
.sidebar-card-features {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}
.sidebar-card-features li {
    display: flex;
    gap: 10px;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

/* Curriculum / Lesson List */
.curriculum-list {
    list-style: none;
    padding: 0;
}
.lesson-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.lesson-item:last-child {
    border-bottom: none;
}
.lesson-item.locked {
    color: var(--text-secondary);
    cursor: not-allowed;
}
.lesson-item a {
    color: var(--text-primary);
    text-decoration: none;
    flex-grow: 1;
}
.lesson-item a:hover {
    color: var(--accent-color);
}
.lesson-item .lesson-icon {
    width: 20px;
    text-align: center;
}
.lesson-item .lock-icon {
    color: #888;
}
/* ເພີ່ມ Style ນີ້ເພື່ອຄວບຄຸມຮູບໃນ Sidebar Card */
.sidebar-card img {
    width: 100%;      /* ໃຫ້ຮູບເຕັມຄວາມກວ້າງຂອງ Card ສະເໝີ */
    height: 200px;    /* ກຳນົດຄວາມສູງຄົງທີ່ (ປັບໄດ້ຕາມຄວາມເໝາະສົມ) */
    object-fit: cover; /* ໃຫ້ຮູບເຕັມພື້ນທີ່ໂດຍບໍ່ເສຍອັດຕາສ່ວນ (ຈະ crop ส่วนเกินออก) */
    display: block;   /* ສຳຄັນ! ເພື່ອບໍ່ໃຫ້ມີຊ່ອງວ່າງແປກໆລຸ່ມຮູບ */
}
/* ============================================= */
/* ===== 9. Lesson View Page Styles        ===== */
/* ============================================= */
.lesson-view-layout {
    display: grid;
    grid-template-columns: 1fr 320px; /* Main content and lesson playlist */
    gap: 2rem;
    align-items: flex-start;
}

.lesson-content-area {
    background-color: var(--bg-secondary);
    padding: 2rem;
    border-radius: 8px;
}
.lesson-content-area h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

/* Responsive YouTube Embed */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-content-area {
    line-height: 1.8;
    font-size: 1.1rem;
}

.file-download-area .btn {
    font-size: 1.1rem;
}

.lesson-playlist-sidebar {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    position: sticky;
    top: 2rem;
}
.lesson-playlist-sidebar h4 {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.playlist-items {
    list-style: none;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}
.playlist-item a {
    display: flex;
    gap: 1rem;
    padding: 0.8rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: background-color 0.2s;
}
.playlist-item a:hover {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
.playlist-item.active a {
    background-color: var(--accent-color);
    color: white;
}
/* ============================================= */
/* ===== 10. Admin Dashboard Styles        ===== */
/* ============================================= */
.stat-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid var(--border-color);
}
.stat-icon {
    font-size: 1.5rem;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-info {
    display: flex;
    flex-direction: column;
}
.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}
.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.quick-actions {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}
.quick-actions h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
.quick-actions .action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
/* ============================================= */
/* ===== 11. Admin Tabs & Badges Styles    ===== */
/* ============================================= */

.nav-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.nav-tabs .nav-link {
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 700;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    border-bottom: 4px solid transparent;
    font-family: var(--font-family); /* <-- ເພີ່ມແຖວນີ້ */
}
.nav-tabs .nav-link:hover {
    color: var(--text-primary);
}
.nav-tabs .nav-link.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.badge {
    padding: 4px 8px;
    border-radius: 12px; /* ทำให้ป้ายมนๆ */
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-pending {
    background-color: #F59E0B;
    color: #fff;
}
.badge-completed {
    background-color: #10B981;
    color: #fff;
}
.badge-cancelled {
    background-color: #6B7280;
    color: #fff;
}
/* ============================================= */
/* ===== 11. Admin Tabs & Badges Styles    ===== */
/* ============================================= */

.nav-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.nav-tabs .nav-link {
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 700;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    /* ເພີ່ມເສັ້ນລຸ່ມແບບໂປ່ງໃສໄວ້ກ່ອນ */
    border-bottom: 4px solid transparent; 
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
}

/* Style ของ Tab ที่กำลังถูกเลือก (Active) */
.nav-tabs .nav-link.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Style ของ Badge (ป้ายสถานะ) */
.badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
.badge-pending { background-color: #F59E0B; }
.badge-completed { background-color: #10B981; }
.badge-cancelled { background-color: #6B7280; }
/* ============================================= */
/* ===== 12. Product Detail Page Styles    ===== */
/* ============================================= */

.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* ສອງຄໍລัมน์ເທົ່າກັນ */
    gap: 2rem;
    align-items: flex-start;
}

/* Product Gallery (Left Column) */
.product-gallery .main-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}
.thumbnail-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
}
.thumbnail-list img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.thumbnail-list img:hover, .thumbnail-list img.active {
    border-color: var(--accent-color);
}

/* Product Info (Right Column) */
.product-info h1 {
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.product-info .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}
.product-cta-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Long Content Sections (Below) */
.product-long-content {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.product-long-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.product-long-content .content-box {
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    line-height: 1.7;
}

/* Reviews Section */
.reviews-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}
.stars-outer {
    position: relative;
    display: inline-block;
    color: #555;
}
.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0; /* จะถูกกำหนดค่าด้วย style inline */
    color: #f8ce0b; /* ສີดาว */
}
.review-list { margin-top: 2rem; }
.review-item {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.review-item:last-child { border-bottom: none; }
.review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 0.5rem; }
.review-header img { width: 40px; height: 40px; border-radius: 50%; }
.review-header strong { font-size: 1.1rem; }
/* Style for Profile Link Wrapper */
.profile-link-wrapper {
    text-decoration: none;
    display: block;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.profile-link-wrapper:hover {
    background-color: var(--bg-card);
}
.profile-info .logout-link {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
}
/* ============================================= */
/* ===== 12. Tab Content Styles            ===== */
/* ============================================= */

.tab-content {
    padding: 2rem 1.5rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none; /* ເອົາເສັ້ນເທິງອອກເພາະມີເສັ້ນຂອງ Tab ຢູ່ແລ້ວ */
    border-radius: 0 0 8px 8px;
    
}

.tab-pane {
    display: none; /* ເຊື່ອງເນື້ອหาທຸກ Tab ໄວ້ກ່ອນ */
}

.tab-pane.active {
    display: block; /* ສະແດງສະເພາະ Tab ທີ່ຖືກເລືອກ */
    
}
/* ============================================= */
/* ===== 13. Hero Banner Styles            ===== */
/* ============================================= */

.hero-banner {
    width: 100%;
    height: 250px; /* ຄວາມສູງຕາມທີ່ຕ້ອງການ */
    background-color: #a81d02; /* ສີພື້ນຫຼັງ */
    border-radius: 12px;
    margin-bottom: 2rem;
    padding: 2rem;

    /* ຈັດທຸກຢ່າງໃຫ້ຢູ່ກึ่งກາງ */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border-color);
}

.hero-logo {
    height: 60px; /* ຂະໜາດໂລໂກ້ */
    width: auto;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 2.2rem;
    color: var(--text-primary);
    font-weight: 700;
}

.hero-title span {
    color: var(--accent-color); /* ສີໂຕໜັງສື Typing */
}

/* Style ຂອງເຄอร์เซอร์ (Cursor) ທີ່ກະພິບ */
.typed-cursor {
    font-size: 2.2rem;
    color: var(--accent-color);
    opacity: 1;
    animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
    50% { opacity: 0.0; }
}
/* ເພີ່ມ Transition ເພື່ອໃຫ້ມັນເຄື່ອນໄຫວແບບ Smooth */
.sidebar, .main-container {
    transition: all 0.3s ease-in-out;
}
.sidebar .menu-item span, .sidebar .logo-text {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* ສະຖານະຕອນ Sidebar ຫຍໍ້ເຂົ້າ */
.app-layout.sidebar--collapsed .sidebar {
    width: 88px; /* ຂະໜາດຕອນຫຍໍ້ */
}
.app-layout.sidebar--collapsed .main-container {
    margin-left: 88px; /* ຍັບເນື້ອຫາໃຫ້ພໍດີ */
    width: calc(100% - 88px);
}
.app-layout.sidebar--collapsed .sidebar .logo-text,
.app-layout.sidebar--collapsed .sidebar .menu-item span,
.app-layout.sidebar--collapsed .sidebar .menu-header,
.app-layout.sidebar--collapsed .sidebar .profile-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}
.app-layout.sidebar--collapsed .sidebar .logo {
    justify-content: center;
}
.app-layout.sidebar--collapsed .sidebar .sidebar-footer {
    justify-content: center;
    align-items: center;
}

/* ປຸ່ມ Toggle */
#sidebar-toggle {
    font-size: 1.2rem;
    color: red;
}
.top-bar .left-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}

/* ເຊື່ອງ Scrollbar */
/* For Chrome, Safari, Edge */
.sidebar::-webkit-scrollbar {
    display: none;
}
/* For Firefox */
.sidebar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* ============================================= */
/* ===== 15. Colorful Icons & Submenu      ===== */
/* ============================================= */

/* ກຳນົດສີໃຫ້ໄອຄອນ */
.icon-color-1 { color: #3B82F6; } /* Blue */
.icon-color-2 { color: #F59E0B; } /* Orange */
.icon-color-3 { color: #10B981; } /* Green */
.icon-color-4 { color: #EF4444; } /* Red */
.icon-color-5 { color: #6366F1; } /* Indigo */
.icon-color-6 { color: #8B5CF6; } /* Violet */

/* ປັບປຸງ menu-item ເລັກນ້ອຍ */
.sidebar .menu-item {
    margin-bottom: 4px; /* ເພີ່ມໄລຍະຫ່າງເລັກນ້ອຍແທນຫົວຂໍ້ */
}

/* Style ສຳລັບເມນູຍ່ອຍ (Submenu) */
.menu-item--collapsible {
    cursor: pointer;
}
.submenu {
    list-style: none;
    padding-left: 2rem; /* ຍັບເຂົ້າໄປໃຫ້ຮູ້ວ່າເປັນເມນູຍ່ອຍ */
    max-height: 0; /* ເລີ່ມຕົ້ນດ້ວຍການເຊື່ອງໄວ້ */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.submenu.open {
    max-height: 500px; /* ກຳນົດຄວາມສູງສູງສຸດຕອນເປີດ */
}
.submenu-item a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
}
.submenu-item a:hover {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
/* ============================================= */
/* ===== 16. Catalog & Pagination Styles   ===== */
/* ============================================= */

.catalog-layout {
    display: grid;
    grid-template-columns: 240px 1fr; /* Sidebar filter and main content */
    gap: 2rem;
    align-items: flex-start;
}

.filter-sidebar {
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    position: sticky;
    top: 2rem;
}
.filter-sidebar h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.filter-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.filter-sidebar ul li a {
    display: block;
    padding: 0.6rem 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s;
}
.filter-sidebar ul li a:hover {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
.filter-sidebar ul li a.active {
    background-color: var(--accent-color);
    color: white;
    font-weight: bold;
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 3rem;
}
.pagination-container a, .pagination-container span {
    display: inline-block;
    padding: 10px 15px;
    min-width: 40px;
    text-align: center;
    border-radius: 6px;
    text-decoration: none;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}
.pagination-container a:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}
.pagination-container a.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: bold;
}
.pagination-container span.disabled {
    color: #666;
    background-color: var(--bg-main);
    cursor: not-allowed;
}
/* ======================================================== */
/* ===== 17. Top Bar Navigation Styles (Button Version) ===== */
/* ======================================================== */

.top-bar-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* ໄລຍະຫ່າງລະຫວ່າງປຸ່ມ */
}

.top-bar-nav a {
    color: white; /* ປ່ຽນສີໂຕໜັງສືເປັນສີຂາວ */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 16px; /* ປັບຂະໜາດພາຍໃນໃຫ້ເບິ່ງຄືປຸ່ມ */
    border-radius: 8px; /* ເຮັດໃຫ້ຂອບມົນ */
    border: none; /* ເອົາເສັ້ນຂອບລຸ່ມອອກ */
    transition: all 0.2s ease-in-out;
}

/* ເພີ່ມໄອຄອນໃຫ້ປຸ່ມ */
.top-bar-nav a i {
    margin-right: 8px;
}

/* * ກຳນົດສີໃຫ້ປຸ່ມແຕ່ລະອັນ
 * ເຮົາຈະໃຊ້ class ສີທີ່ເຮົາເຄີຍສ້າງໄວ້ (.icon-color-*)
 */

/* ກຳນົດສີໃຫ້ປຸ່ມທີ 1 (ກ່ຽວກັບ) */
.top-bar-nav a:nth-child(1) {
    background-color: #a81d02; /* ສີຟ້າ */
}

/* ກຳນົດສີໃຫ້ປຸ່ມທີ 2 (ຕິດຕໍ່) */
.top-bar-nav a:nth-child(2) {
    background-color: #a81d02; /* ສີຂຽວ */
}

/* ເພີ່ມເງົາ ແລະ ຍົກຂຶ້ນເມື່ອເອົາເມົ້າສ໌ໄປຊີ້ */
.top-bar-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1); /* ເຮັດໃຫ້ສີສະຫວ່າງຂຶ້ນเล็กน้อย */
}
/* ============================================= */
/* ===== 18. About & Contact Page Styles   ===== */
/* ============================================= */

.page-hero {
    background-color: var(--bg-secondary);
    text-align: center;
    padding: 4rem 2rem;
    border-radius: 12px;
    margin-bottom: 3rem;
}
.page-hero h1 {
    font-size: 2.8rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}
.page-hero p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.content-section-box {
    background-color: var(--bg-secondary);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}
.content-section-box h2 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.team-member-card {
    background-color: var(--bg-card);
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.team-member-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--accent-color);
}
.team-member-card h4 {
    margin: 0.5rem 0 0.25rem 0;
    font-size: 1.2rem;
}
.team-member-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: flex-start;
}
.contact-info ul { list-style: none; padding: 0; }
.contact-info ul li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.contact-info ul li i { font-size: 1.2rem; color: var(--accent-color); margin-top: 5px; }
.map-container { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
.map-container iframe { width: 100%; height: 250px; border: none; }
@media (max-width: 992px) { .contact-layout { grid-template-columns: 1fr; } }

.admin-table tr.unread td {
    font-weight: bold;
}
/* Coupon Card Styles */
.coupon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}
.coupon-card {
    background-color: var(--bg-secondary);
    border-radius: 10px;
    display: flex;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
    min-height: 150px;
}
.coupon-card::before, .coupon-card::after { /* สร้างรอยปะ */
    content: ''; position: absolute; top: 50%; transform: translateY(-50%);
    width: 20px; height: 40px; background-color: var(--bg-main);
}
.coupon-card::before { left: -10px; border-radius: 0 20px 20px 0; }
.coupon-card::after { right: -10px; border-radius: 20px 0 0 20px; }

.coupon-main {
    flex-grow: 1; padding: 1.5rem;
    border-right: 2px dashed var(--border-color);
}
.coupon-main h4 { margin-top: 0; font-size: 1.2rem; }
.coupon-main p { color: var(--text-secondary); margin: 0.5rem 0 0 0; }

.coupon-action {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 1.5rem; width: 150px; flex-shrink: 0;
}
.coupon-code {
    background-color: var(--bg-main);
    border: 1px dashed var(--accent-color);
    color: var(--accent-color);
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.copy-btn {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
}
/* Dashboard Filter Bar */
.filter-bar {
    background-color: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}
.filter-bar form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.filter-bar .form-group { flex: 1; min-width: 200px; }
.filter-bar label { font-weight: bold; font-size: 0.9em; margin-bottom: 5px; display: block; }
/* ============================================= */
/* ===== 19. Star Rating System Styles     ===== */
/* ============================================= */

/* ============================================= */
/* ===== 19. Star Rating System (Updated)  ===== */
/* ============================================= */

.star-rating-input {
    display: flex;
    flex-direction: row-reverse; /* ລຽງຈາກຂวาไปซ้าย (เทคนิคສຳຄັນ) */
    justify-content: flex-end;
    font-size: 1.8rem; /* ປັບຂະໜາດດາວໃຫ້ພໍດີ */
}

/* Style ของดาวแต่ละดวง */
.star-rating-input .star {
    cursor: pointer;
    color: #a0a0a0; /* ສີดาวตอนที่ยังไม่ถูกเลือก */
    transition: color 0.2s;
}

/* ເມື່ອเอาเมาส์ไปชี้ดาวดวงไหน ให้ดาวดวงนั้นและดาวที่อยู่ก่อนหน้าเปลี่ยนสี */
.star-rating-input .star:hover,
.star-rating-input .star:hover ~ .star {
    color: #f8ce0b; /* ສີดาวตอนเอาเมาส์ชี้ */
}
/* ============================================= */
/* ===== 18. Responsive Top Bar Styles     ===== */
/* ============================================= */

/* Style ของปุ่ม Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none; /* ซ่อนไว้ในหน้าจอใหญ่ */
    font-size: 1.2rem;
}

/* Style ของ Dropdown Menu */
.dropdown-menu {
    display: none; /* ซ่อนไว้เป็นค่าเริ่มต้น */
    position: absolute;
    top: 65px; /* ให้อยู่ใต้ Top Bar */
    right: 1.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 1000;
    width: 220px;
}
.dropdown-menu.is-open {
    display: block; /* แสดงเมื่อถูกกด */
}
.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.2s;
}
.dropdown-menu a:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--text-primary);
}
.dropdown-menu a i {
    margin-right: 10px;
}

/* --- Media Query for Mobile --- */
/* Style นี้จะทำงานเมื่อหน้าจอมีความกว้างน้อยกว่าหรือเท่ากับ 992px */
@media (max-width: 992px) {
    /* 1. ซ่อนเมนูกลางในหน้าจอใหญ่ */
    .top-bar-nav {
        display: none;
    }
    
    /* 2. แสดงปุ่ม Mobile Menu Toggle */
    .mobile-menu-toggle {
        display: flex;
    }

    /* 3. (ทางเลือก) ซ่อนข้อความในปุ่ม "เสนอจ้างงาน" เหลือแต่ไอคอน */
    .top-bar-actions .btn-hire-us span {
        display: none;
    }
    .top-bar-actions .btn-hire-us i {
        margin-right: 0;
    }
}
/* Chat Widget Styles */
.chat-widget-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
.chat-toggle-btn { width: 60px; height: 60px; background-color: var(--accent-color); color: white; border-radius: 50%; border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.chat-popup {
    display: none; /* <-- ເລີ່ມຕົ້ນດ້ວຍການເຊື່ອງໄວ້ */
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    flex-direction: column; /* ຈັດລຽງເນື້ອหาแนวตั้ง */
}

.chat-popup.open {
    display: flex; /* <-- ສະແດງຜົນ (ເປັນ flex) ກໍຕໍ່ເມື່ອມີ class 'open' */
}
.chat-header {
    display: flex; /* ໃຊ້ Flexbox */
    justify-content: space-between; /* ຍູ້ລາຍການໄປซ้ายสุด-ขวาสุด */
    align-items: center; /* ຈັດໃຫ້ຢູ່ກึ่งກາງแนวตั้ง */
    padding: 1rem;
    background-color: var(--bg-card);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
    flex-shrink: 0; 
}

#chatCloseBtn {
    /* ບໍ່ຈຳເປັນຕ້ອງໃຊ້ float ອີກຕໍ່ໄປ */
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1; /* ສຳຄັນ: ປ້ອງກັນບໍ່ໃຫ້ປຸ່ມສູງຜິດປົກກະຕິ */
    padding: 0 5px;
}

#chatCloseBtn:hover {
    color: white;
}
.chat-messages { flex-grow: 1; padding: 1rem; overflow-y: auto; }
.message-bubble { display: flex; margin-bottom: 1rem; max-width: 80%; }
.message-bubble.sent { margin-left: auto; flex-direction: row-reverse; }
.message-bubble.received .message-content { background-color: var(--bg-main); }
.message-bubble.sent .message-content { background-color: var(--accent-color); color: white; }
.message-content { padding: 0.75rem; border-radius: 18px; }
.chat-form { display: flex; padding: 1rem; border-top: 1px solid var(--border-color); }
.chat-form input { flex-grow: 1; border: none; background-color: var(--bg-main); padding: 10px; border-radius: 20px; color: var(--text-primary); }
.chat-form button { background: none; border: none; color: var(--accent-color); font-size: 1.5rem; cursor: pointer; margin-left: 10px; }
/* Notification Badge for Sidebar Menu */
.menu-item {
    position: relative; /* ຕັ້ງເພື່ອໃຫ້ badge ສາມາດลอยตัวได้ */
}
.notification-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    background-color: #EF4444; /* ສີແດງ */
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-secondary);
}
/* ============================================= */
/* ===== Admin Chat Page Layout Styles     ===== */
/* ============================================= */
.chat-layout {
    display: grid;
    grid-template-columns: 320px 1fr; /* Sidebar for users, Main chat window */
    /* ກຳນົດຄວາມສູງໃຫ້ເຕັມສ່ວນທີ່ເຫຼືອຂອງໜ້າຈໍ */
    height: calc(100vh - 70px); /* 70px คือความสูงของ Top Bar */
}

/* Conversation List (Left) */
.conversation-list {
    background: var(--bg-main);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%; /* ໃຫ້ສູງເຕັມ Layout */
}
.conversation-list h4 {
    padding: 1rem;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-main);
    z-index: 1;
    flex-shrink: 0;
}
#conversation-list-items {
    overflow-y: auto; /* <--- ເພີ່ມ Scrollbar ເມື່ອລາຍຊື່ຍາວ */
    flex-grow: 1;
}
.conversation-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.conversation-item:hover { background: var(--bg-card); }
.conversation-item.active { background: var(--accent-color); color: white; }
.conversation-item.active .name { color: white; }
.conversation-item img { width: 40px; height: 40px; border-radius: 50%; }
.conversation-item .name { font-weight: bold; color: var(--text-primary); }
.conversation-item .notification-badge { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Chat Window (Right) */
.chat-window {
    display: flex;
    flex-direction: column;
    height: 800px;
    background: var(--bg-secondary);
}
.chat-window .chat-header {
    flex-shrink: 0; /* ບໍ່ໃຫ້ຫົວຂໍ້ຫຍໍ້ */
}
.chat-window .chat-messages {
    flex-grow: 1; /* ໃຫ້ກ່ອງຂໍ້ຄວາມຂະຫຍາຍເຕັມพื้นที่ที่เหลือ */
    overflow-y: auto; /* <--- ເພີ່ມ Scrollbar ເມື່ອຂໍ້ຄວາມຍາວ */
    padding: 1rem;
}
.chat-window .chat-form {
    flex-shrink: 0; /* ບໍ່ໃຫ້ຟອມຫຍໍ້ */
}