:root {
    --mahsuccess-blue: #00426a;
    --pastel-blue: #e0f0ff;
    --pastel-yellow: #fff8e1;
    --pastel-green: #e8f5e9;
    --text-light: #555;
    --text-dark: #333;
    --bs-body-font-family: 'Kanit', sans-serif;
    --bs-link-color-rgb: 0, 66, 106;
    --bs-link-hover-color-rgb: 0, 105, 165;

    /* Dark mode variables - Apple inspired */
    --dm-bg-primary: #000000;
    --dm-bg-secondary: #1c1c1e;
    --dm-bg-tertiary: #2c2c2e;
    --dm-surface: #1d1d1f;
    --dm-text-primary: #ffffff;
    --dm-text-secondary: #ebebf5;
    --dm-text-tertiary: #98989d;
    --dm-border: #38383a;
    --dm-accent: #0a84ff; /* Apple Blue */
    --dm-card-bg: var(--dm-bg-secondary); /* Use secondary bg for cards */
}

body {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa; /* Light mode default background */
}

main {
    flex: 1;
    transition: opacity 0.3s ease;
}

main.loading {
    opacity: 0;
}

/* Navbar Styling */
.navbar {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-weight: 700;
    color: var(--mahsuccess-blue);
}

.navbar-brand .logo-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.nav-link {
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link.active {
    color: var(--mahsuccess-blue) !important;
    font-weight: 600;
}
.nav-link:hover {
    color: var(--bs-link-hover-color);
}

.dropdown-item:active {
    background-color: var(--mahsuccess-blue);
}

/* Offcanvas Navbar Styling */
.navbar-toggler {
    border: none;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.offcanvas-end {
    width: 280px; /* Adjust width as needed */
}
.offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.offcanvas-body .nav-link {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
}
.offcanvas-body .nav-link i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
    width: 20px; /* Align icons */
}
.offcanvas-body .nav-link.active {
    background-color: var(--pastel-blue);
    color: var(--mahsuccess-blue) !important;
    border-radius: 0.5rem;
}
.offcanvas-body .dropdown-menu {
    border: none;
    box-shadow: none;
    padding-left: 1.5rem; /* Indent dropdown items */
}
.offcanvas-body .dropdown-item {
     padding: 0.5rem 1rem;
}
.search-button-mobile { /* Style the search button in offcanvas */
    text-align: left;
}


/* Hero Section Carousel */
.hero-carousel .carousel-item {
    height: 60vh; /* Default height for larger screens */
    min-height: 450px; /* Ensure a minimum height */
    position: relative;
}
.hero-carousel .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.hero-carousel .carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    padding: 1.5rem; /* Increased padding */
    bottom: 4rem; /* Adjusted position */
    left: 10%; /* Center horizontally */
    right: 10%;
    text-align: center;
}

.hero-carousel h1 {
    font-size: 2.5rem; /* Slightly smaller default */
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    margin-bottom: 0.5rem;
}
.hero-carousel p {
    font-size: 1.1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Responsive Hero Banner for Mobile */
@media (max-width: 767.98px) {
    .hero-carousel .carousel-item {
        height: 45vh; /* Reduced height on mobile */
        min-height: 280px; /* Smaller minimum height */
    }
    .hero-carousel .carousel-caption {
        padding: 0.75rem; /* Reduced padding */
        bottom: 2rem; /* Closer to bottom */
        left: 5%;
        right: 5%;
    }
    .hero-carousel h1 {
        font-size: 1.5rem; /* Smaller font size */
    }
    .hero-carousel p {
        font-size: 0.9rem; /* Smaller font size */
        display: -webkit-box; /* Limit subtitle lines */
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}


/* Quick Access Buttons */
.quick-access .btn {
    background-color: var(--pastel-blue);
    color: var(--mahsuccess-blue);
    border: 1px solid transparent; /* Changed border */
    font-weight: 500; /* Slightly lighter */
    transition: all 0.2s ease-in-out; /* Faster transition */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90px; /* Slightly smaller */
    border-radius: 0.75rem; /* Added border-radius */
    text-align: center;
    padding: 0.5rem;
}
.quick-access .btn span {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-top: 0.25rem;
}

.quick-access .btn:hover {
    background-color: var(--mahsuccess-blue);
    color: white;
    transform: translateY(-3px); /* Less dramatic lift */
    box-shadow: 0 3px 10px rgba(0, 66, 106, 0.15);
}

.quick-access .btn i {
    font-size: 1.8rem; /* Slightly smaller icon */
    margin-bottom: 0.25rem;
}

/* General Card Styling */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); /* Adjusted shadow */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}
.card-img-top-food, .food-card-img { /* Ensure consistency for food images */
    height: 250px;
    object-fit: cover;
    width: 100%;
}
.card-img-detail { /* Style for detail page top images */
     height: auto;
     max-height: 400px;
     object-fit: cover;
     width: 100%;
     border-radius: 1rem 1rem 0 0; /* Match card radius */
}

/* Ratio class for fixed aspect ratio images */
.ratio-3x2 {
    --bs-aspect-ratio: calc(2 / 3 * 100%); /* 3:2 aspect ratio */
}
.ratio img.card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.card .badge {
    font-size: 0.75rem; /* Slightly smaller badge */
    font-weight: 500;
    padding: 0.3em 0.6em;
}

a.card-link {
    text-decoration: none;
    color: inherit;
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
    padding: 0.5rem 0;
}
.breadcrumb-item a {
    text-decoration: none;
    color: var(--mahsuccess-blue);
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Page Headers */
.page-header {
    padding: 2.5rem 1rem; /* Adjusted padding */
    background-color: var(--pastel-blue);
    border-radius: 0.75rem;
    margin-bottom: 2rem;
}

.page-header h1 {
    color: var(--mahsuccess-blue);
    font-weight: 700;
    font-size: 2.25rem;
}
@media (max-width: 767.98px) {
    .page-header {
        padding: 2rem 1rem;
    }
    .page-header h1 {
        font-size: 1.8rem;
    }
}

/* Accordion Customization */
.accordion-button {
     font-weight: 500;
}
.accordion-button:not(.collapsed) {
    background-color: var(--mahsuccess-blue);
    color: white;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-icon);
  transform: var(--bs-accordion-btn-icon-transform);
  filter: brightness(0%) invert(100%); /* Make icon white */
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 66, 106, 0.25);
    border-color: rgba(0, 66, 106, 0.5);
}
.accordion-item {
    background-color: #fff;
    border: 1px solid var(--bs-border-color-translucent);
}
.accordion-item:first-of-type {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.accordion-item:last-of-type {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(0.75rem - 1px);
  border-top-right-radius: calc(0.75rem - 1px);
}
.accordion-item:last-of-type .accordion-button.collapsed {
   border-bottom-left-radius: calc(0.75rem - 1px);
   border-bottom-right-radius: calc(0.75rem - 1px);
}


/* Footer */
footer {
    background-color: var(--mahsuccess-blue);
    color: rgba(255, 255, 255, 0.8); /* Slightly muted white */
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

/* Filter Bar */
.filter-bar {
    background-color: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 0.75rem; /* Match card radius */
}

/* Search Modal Specific Styles */
#searchModal .modal-dialog {
    margin-top: 3vh; /* Position slightly from top */
    max-width: 700px; /* Limit width */
}
#searchModalBody {
    position: relative; /* For suggestion list positioning */
    min-height: 70vh; /* Ensure enough height for results */
    display: flex;
    flex-direction: column;
}

#suggestionsList {
    position: absolute;
    top: calc(100% + 5px); /* Position below the input */
    left: var(--bs-modal-padding);
    right: var(--bs-modal-padding);
    z-index: 1056; /* Above modal content, below modal itself */
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#suggestionsList .list-group-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    border: none; /* Remove individual borders */
}
#suggestionsList .list-group-item + .list-group-item {
    border-top: 1px solid var(--bs-border-color-translucent); /* Add separator */
}


#searchResultsContainer {
    margin-top: 1rem;
    flex-grow: 1; /* Allow results to take remaining space */
    overflow-y: auto; /* Enable scrolling for results */
}
.search-highlight {
    background-color: var(--pastel-yellow);
    font-weight: 600;
    color: var(--text-dark); /* Ensure readability in light mode */
    padding: 0.1em 0; /* Small padding */
    border-radius: 0.2em;
}
.search-result-item h6 {
    font-weight: 500;
}
.search-result-snippet {
    font-size: 0.85rem;
    color: var(--text-light);
    /* Limit snippet lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Gallery Thumbnail */
.gallery-thumbnail {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: block; /* Ensure it behaves like a block */
    width: 100%;
    height: 120px; /* Fixed height for consistency */
    object-fit: cover;
}
.gallery-thumbnail:hover {
    transform: scale(1.05); /* Slightly enlarge */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Image Modal */
#imageModal .modal-xl {
    --bs-modal-width: 90%;
}
#imageModal img {
    max-height: 85vh; /* Limit image height */
    width: auto;
    max-width: 100%;
}


/* =========================================== */
/* Enhanced Dark Mode - Apple Inspired Design */
/* =========================================== */

[data-bs-theme="dark"] {
    background-color: var(--dm-bg-primary);
    color: var(--dm-text-primary);
}

[data-bs-theme="dark"] body {
    background-color: var(--dm-bg-primary);
    color: var(--dm-text-primary);
}

[data-bs-theme="dark"] .navbar {
    background-color: rgba(28, 28, 30, 0.75); /* Slightly more transparent */
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--dm-border);
}
[data-bs-theme="dark"] .navbar-brand {
    color: var(--dm-text-primary);
}
[data-bs-theme="dark"] .nav-link {
    color: var(--dm-text-secondary);
}
[data-bs-theme="dark"] .nav-link:hover {
    color: var(--dm-text-primary);
}
[data-bs-theme="dark"] .nav-link.active {
    color: var(--dm-accent) !important;
}

/* Dark mode offcanvas */
[data-bs-theme="dark"] .offcanvas {
     background-color: var(--dm-bg-secondary);
     color: var(--dm-text-secondary);
     border-left: 0.5px solid var(--dm-border);
}
[data-bs-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--dm-border);
}
[data-bs-theme="dark"] .offcanvas-title {
    color: var(--dm-text-primary);
}
[data-bs-theme="dark"] .offcanvas-body .nav-link.active {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-accent) !important;
}
[data-bs-theme="dark"] .offcanvas-body .dropdown-menu {
    background-color: transparent; /* Make dropdown blend in */
}
[data-bs-theme="dark"] .offcanvas-body .dropdown-item {
    color: var(--dm-text-secondary);
}
[data-bs-theme="dark"] .offcanvas-body .dropdown-item:hover,
[data-bs-theme="dark"] .offcanvas-body .dropdown-item:focus {
     background-color: var(--dm-bg-tertiary);
     color: var(--dm-text-primary);
}


[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--dm-bg-secondary);
    border: 0.5px solid var(--dm-border);
    --bs-dropdown-link-hover-bg: var(--dm-bg-tertiary);
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--dm-text-secondary);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    color: var(--dm-text-primary);
}
[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--dm-border);
}

[data-bs-theme="dark"] .card {
    background-color: var(--dm-card-bg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: var(--dm-text-primary);
    border: 0.5px solid var(--dm-border);
}

[data-bs-theme="dark"] .card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .card-text.text-muted {
    color: var(--dm-text-tertiary) !important;
}

[data-bs-theme="dark"] a.card-link {
    color: var(--dm-text-primary);
}

[data-bs-theme="dark"] .quick-access .btn {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    border: 0.5px solid var(--dm-border);
}

[data-bs-theme="dark"] .quick-access .btn:hover {
    background-color: var(--dm-accent);
    color: var(--dm-text-primary);
    border-color: var(--dm-accent);
}

[data-bs-theme="dark"] .page-header {
    background-color: var(--dm-bg-secondary);
    border: 0.5px solid var(--dm-border);
}

[data-bs-theme="dark"] .page-header h1 {
    color: var(--dm-text-primary);
}

[data-bs-theme="dark"] .accordion-item {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-primary);
    border-bottom: 0.5px solid var(--dm-border);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--dm-bg-tertiary);
    color: var(--dm-text-primary);
    box-shadow: none;
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: brightness(0) invert(1); /* Ensure icon is white */
}

[data-bs-theme="dark"] .accordion-body {
    background-color: var(--dm-bg-primary); /* Use primary for body bg */
    color: var(--dm-text-secondary);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--dm-bg-secondary);
    --bs-table-color: var(--dm-text-primary);
    --bs-table-border-color: var(--dm-border);
    --bs-table-striped-bg: var(--dm-bg-tertiary);
    --bs-table-striped-color: var(--dm-text-primary);
    --bs-table-hover-bg: var(--dm-surface);
    --bs-table-hover-color: var(--dm-text-primary);
}
[data-bs-theme="dark"] thead.table-dark {
     background-color: var(--dm-bg-tertiary); /* Darker header */
     border-color: var(--dm-border);
     color: var(--dm-text-primary);
}


[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
    background-image: none; /* Remove default Bootstrap arrow for select */
}
[data-bs-theme="dark"] .form-select {
     /* Add custom arrow for dark mode */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ebebf5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--dm-bg-tertiary);
    border-color: var(--dm-accent);
    color: var(--dm-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(10, 132, 255, 0.25);
}
[data-bs-theme="dark"] .form-control::placeholder { /* Style placeholder */
    color: var(--dm-text-tertiary);
    opacity: 1;
}

[data-bs-theme="dark"] .form-label {
    color: var(--dm-text-primary);
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--dm-bg-secondary);
    border: 0.5px solid var(--dm-border);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--dm-border);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--dm-border);
}

[data-bs-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--dm-text-tertiary);
    --bs-breadcrumb-item-active-color: var(--dm-text-tertiary);
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--dm-accent);
}
[data-bs-theme="dark"] .breadcrumb-item a:hover {
    color: #4da3ff; /* Lighter blue on hover */
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--dm-bg-secondary);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}
[data-bs-theme="dark"] a.list-group-item-action:hover,
[data-bs-theme="dark"] button.list-group-item-action:hover {
    background-color: var(--dm-bg-tertiary);
}
[data-bs-theme="dark"] a.list-group-item-action:focus,
[data-bs-theme="dark"] button.list-group-item-action:focus {
    background-color: var(--dm-surface);
}

[data-bs-theme="dark"] .list-group-item-primary { /* For unread notifications */
     background-color: rgba(10, 132, 255, 0.15); /* Tinted blue */
     border-color: rgba(10, 132, 255, 0.3);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="dark"] .text-muted {
    color: var(--dm-text-tertiary) !important;
}

[data-bs-theme="dark"] footer {
    background-color: var(--dm-bg-secondary);
    color: var(--dm-text-secondary);
    border-top: 0.5px solid var(--dm-border);
}

/* Hero carousel adjustments for dark mode */
[data-bs-theme="dark"] .hero-carousel .carousel-caption {
    background-color: rgba(0, 0, 0, 0.6); /* Darker caption bg */
    color: var(--dm-text-primary);
}
[data-bs-theme="dark"] .hero-carousel h1,
[data-bs-theme="dark"] .hero-carousel p {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}


/* Badge adjustments for dark mode */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-secondary) !important; /* Slightly muted text */
}
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-secondary) !important;
}

[data-bs-theme="dark"] .search-highlight {
    background-color: rgba(255, 215, 0, 0.3); /* Slightly more subtle Yellowish highlight */
    color: var(--dm-text-primary);
    padding: 0; /* Remove padding for smoother look */
    border-radius: 0;
}
[data-bs-theme="dark"] #suggestionsList {
     background-color: var(--dm-bg-tertiary); /* Darker suggestion bg */
     border-color: var(--dm-border);
}
[data-bs-theme="dark"] #suggestionsList .list-group-item {
     background-color: var(--dm-bg-tertiary);
     color: var(--dm-text-primary);
     border-color: var(--dm-border);
}
[data-bs-theme="dark"] #suggestionsList .list-group-item:hover,
[data-bs-theme="dark"] #suggestionsList .suggestion-item:focus { /* Style focus too */
     background-color: var(--dm-surface);
}
[data-bs-theme="dark"] .search-result-snippet {
     color: var(--dm-text-tertiary);
}


/* Improved focus states for accessibility */

[data-bs-theme="dark"] *:focus-visible { /* Use focus-visible for keyboard nav */
    outline: 2px solid var(--dm-accent);
    outline-offset: 1px;
     box-shadow: 0 0 0 0.2rem rgba(10, 132, 255, 0.25);
}
/* Ensure buttons and links also get this focus */
[data-bs-theme="dark"] .btn:focus-visible,
[data-bs-theme="dark"] a:focus-visible,
[data-bs-theme="dark"] .accordion-button:focus-visible,
[data-bs-theme="dark"] .list-group-item:focus-visible {
     outline: 2px solid var(--dm-accent);
     outline-offset: 1px;
     box-shadow: 0 0 0 0.2rem rgba(10, 132, 255, 0.25);
}
/* Remove default focus outline when using focus-visible */
*:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}



/* Warning Box Style - รองรับ Dark Mode */
.warning-box {
    font-family: 'Kanit', sans-serif; /* บังคับใช้ Kanit */
    background-color: var(--pastel-yellow); /* ใช้สีเหลืองพาสเทลตามธีม */
    border-left: 6px solid var(--mahsuccess-blue); /* ใช้สีน้ำเงินหลัก */
    color: var(--text-dark);
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0.5rem;
    font-style: normal;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ปรับสีสำหรับ Dark Mode */
[data-bs-theme="dark"] .warning-box {
    background-color: rgba(255, 248, 225, 0.1); /* สีเหลืองจางๆ บนพื้นมืด */
    color: var(--dm-text-primary);
    border-left: 6px solid var(--dm-accent); /* หรือใช้สีฟ้า Apple Blue */
}

/* --- เพิ่มต่อจาก warning-box เดิมใน style.css --- */

/* Danger Variant (สำหรับกล่องเตือนภัย สีแดง) */
.warning-box.danger {
    background-color: #ffebee; /* สีพื้นแดงอ่อน (Light Mode) */
    border-left-color: #d32f2f; /* สีเส้นขอบแดงเข้ม */
    color: #b71c1c; /* สีตัวหนังสือแดงเข้ม (ให้อ่านง่ายบนพื้นอ่อน) */
}

/* Dark Mode สำหรับ Danger Variant */
[data-bs-theme="dark"] .warning-box.danger {
    background-color: rgba(211, 47, 47, 0.15); /* พื้นแดงจางๆ บนพื้นมืด */
    border-left-color: #ef5350; /* เส้นขอบแดงสว่างขึ้น */
    color: #ffcdd2; /* ตัวหนังสือสีแดงพาสเทล (ให้อ่านง่ายบนพื้นมืด) */
}

/* --- เพิ่มต่อท้าย style.css --- */

/* 1. Info Variant (กล่องสีฟ้า - สำหรับประกัน/ข้อควรระวังทั่วไป) */
.warning-box.info {
    background-color: #e3f2fd;      /* ฟ้าอ่อน */
    border-left-color: #1976d2;     /* ขอบฟ้าเข้ม */
    color: #014361;                 /* ตัวหนังสือสีเข้ม */
}
[data-bs-theme="dark"] .warning-box.info {
    background-color: rgba(25, 118, 210, 0.15); /* ฟ้าโปร่งแสง */
    border-left-color: #64b5f6;     /* ขอบฟ้าสว่าง */
    color: #e3f2fd;                 /* ตัวหนังสือสีฟ้าอ่อน */
}

/* 2. Note Variant (กล่องสีส้ม - สำหรับบทความ Golden Period) */
.warning-box.note {
    background-color: #fff3e0;      /* ส้มอ่อน */
    border-left-color: #ff6f00;     /* ขอบส้มเข้ม */
    color: #e65100;                 /* ตัวหนังสือส้มเข้ม */
}
[data-bs-theme="dark"] .warning-box.note {
    background-color: rgba(255, 111, 0, 0.15); /* ส้มโปร่งแสง */
    border-left-color: #ffb74d;     /* ขอบส้มสว่าง */
    color: #ffe0b2;                 /* ตัวหนังสือส้มอ่อน */
}

/* 3. Reference Box (กล่องอ้างอิงสีเทา) */
.ref-box {
    background-color: #f5f5f5;      /* เทาอ่อน */
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9em;
    color: #333;
    margin-top: 20px;
}
[data-bs-theme="dark"] .ref-box {
    background-color: var(--dm-bg-tertiary); /* เทาเข้มตามธีม */
    color: var(--dm-text-secondary);         /* ตัวหนังสือสีอ่อน */
    border: 1px solid var(--dm-border);
}

/* 4. Code Block (กล่องใส่โค้ด Linux) */
.code-box {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    color: #333;
    display: block;
    overflow-x: auto;
    margin-bottom: 1rem;
}
[data-bs-theme="dark"] .code-box {
    background-color: #2d2d2d;      /* พื้นหลังมืด */
    color: #f8f8f2;                 /* ตัวหนังสือโค้ดสีสว่าง */
    border: 1px solid #444;
}


/* --- Recommended Blog Styles & Utilities --- */

/* ทำให้การ์ดเด้งขึ้นเล็กน้อยเมื่อเอาเมาส์ชี้ */
.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* ตัดคำหัวข้อข่าวให้เหลือแค่ 2 บรรทัดแล้ว ... */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Dark Mode Fixes for Recommended Section --- */
/* บังคับสีตัวหนังสือหัวข้อใน Dark Mode ให้สว่าง */
[data-bs-theme="dark"] .recommended-section .card-title {
    color: var(--dm-text-primary);
}

/* ปรับเงาตอน Hover ใน Dark Mode ให้เข้มขึ้น */
[data-bs-theme="dark"] .hover-card:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.5)!important;
    background-color: var(--dm-bg-tertiary); /* เปลี่ยนสีพื้นหลังตอนชี้ให้สว่างขึ้นนิดนึง */
}


/* =========================================== */
/* Pinned Card Styles (ใช้ร่วมกันทั้ง News และ Blog) */
/* =========================================== */

/* --- Light Mode (โหมดสว่าง) --- */
.pinned-card {
    border: 2px solid var(--mahsuccess-blue) !important;
    /* พื้นหลังไล่สีจากขาวไปฟ้าจางๆ */
    background: linear-gradient(to bottom right, #ffffff, #f0f8ff) !important; 
    box-shadow: 0 8px 20px rgba(0, 66, 106, 0.15);
    position: relative;
    overflow: hidden;
}

/* แถบสีด้านซ้าย */
.pinned-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: var(--mahsuccess-blue);
    z-index: 1;
}

.pinned-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 66, 106, 0.25);
}

/* [เพิ่มใหม่สำหรับ Blog] ทำให้ Footer โปร่งใส เพื่อโชว์สีพื้นหลังการ์ด */
.pinned-card .card-footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(0, 66, 106, 0.1);
}


/* --- Dark Mode (โหมดมืด) --- */
[data-bs-theme="dark"] .pinned-card {
    border: 2px solid var(--dm-accent) !important;
    /* พื้นหลังโปร่งแสงสีฟ้าในโหมดมืด */
    background: linear-gradient(to bottom right, rgba(10, 132, 255, 0.15), rgba(10, 132, 255, 0.05)) !important;
    box-shadow: 0 0 15px rgba(10, 132, 255, 0.2);
}

[data-bs-theme="dark"] .pinned-card::before {
    background-color: var(--dm-accent);
}

[data-bs-theme="dark"] .pinned-card:hover {
    box-shadow: 0 0 25px rgba(10, 132, 255, 0.4);
    border-color: #4da3ff !important;
}

[data-bs-theme="dark"] .pinned-card .badge.bg-primary {
    background-color: var(--dm-accent) !important;
    color: white;
}

/* [เพิ่มใหม่สำหรับ Blog Dark Mode] ปรับเส้นขอบ Footer ให้เข้าธีม */
[data-bs-theme="dark"] .pinned-card .card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7) !important; /* ตัวหนังสือใน Footer สีจางลงนิดนึง */
}