/* Mobile Menu */
.mobile-menu-panel {
    display: none;
}

/* Float Button Saved Hours */
/* Float Button Saved Hours */
.cgs-float-btn {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff4d4d, #f9cb28);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.cgs-float-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.cgs-float-icon {
    width: 20px;
    height: 20px;
    color: white;
}

.cgs-float-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.cgs-float-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.cgs-float-btn:hover .cgs-float-tooltip {
    opacity: 1;
}

.pulse-animation {
    animation: cgs-pulse 0.5s ease-in-out;
}

@keyframes cgs-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}


@media (max-width: 768px) {
    .cgs-float-btn {
        /* Keep consistent size on mobile */
        bottom: 20px;
        left: 20px;
    }

    .cgs-float-tooltip {
        display: none;

        /* Hide tooltip on mobile */
    }
}

.mobile-menu-panel.active {
    display: block;
}

.mobile-user-menu {
    display: none;
}

.mobile-user-menu.active {
    display: block;
}

/* Link Styles */
header a {
    text-decoration: none;
    color: inherit;
}

header nav a {
    transition: color 0.2s;
}

/* Button Styles */
header button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}



/* ==========================================================================
   LOGO STYLES
   ========================================================================== */

#logo,
#footer-logo {
    float: left;
    background-image: url('logo-cgs-ver2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 60px;
}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */



/* Dropdown Menu */
.dropdown-menu {
    display: none;
}

.dropdown-menu.active {
    display: block;
}

header.bg-white {
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    position: relative;
    width: 100%;
}

/* Login Icon */
.login-icon {
    width: 20px;
    height: 20px;
}

#social-login-section button.google-login {
    font-size: 15px;
    border: 1px solid #ccc;
}

#password-field button,
#confirm-password-field button {
    background: transparent;
    border: none;
    padding-right: 10px;
}

/* Search Overlay */
.search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 60;
    align-items: center;
    padding: 1.5rem 1rem 1.5rem 1rem;
}

/* Loading Spinner Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.search-overlay.active {
    display: flex;
}

.search-input-field {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1.25rem;
    color: #374151;
    background: transparent;
    padding: 0.5rem 1rem;
}

.search-input-field::placeholder {
    color: #9ca3af;
}

#search-overlay input.search-input-field {
    border-color: #12b981;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(38, 143, 255, 1);
    font-family: 'TikTok Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Search Results Dropdown */
.search-results-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 70;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-top: none;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f9fafb;
}

.khong-thay-bai-viet svg {
    width: 100px;
    height: 100px
}

.result-thumb {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #f3f4f6;
}

.result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-thumb {
    width: 100%;
    height: 100%;
    background-color: #e5e7eb;
}

.result-info {
    flex: 1;
    min-width: 0;
}


.result-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-excerpt {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-loading,
.no-results {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.search-view-all {
    display: block;
    padding: 0.75rem;
    text-align: center;
    font-weight: 500;
    color: #4f46e5;
    background-color: #f9fafb;
    border-top: 1px solid #e5e7eb;
    text-decoration: none;
}


.search-view-all:hover {
    background-color: #f3f4f6;
    text-decoration: underline;
}

.search-highlight {
    background-color: #fef08a;
    /* Yellow-200 */
    color: #854d0e;
    /* Yellow-800 */
    padding: 0 0.125rem;
    border-radius: 0.125rem;
}

button.icon-search {
    width: 32px;
    height: 32px;
}

/* ==========================================================================
   HOMEPAGE / INDEX STYLES
   ========================================================================== */

/* Form Container Styles */
.container-fluid {
    width: 100%;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
}


body.home .container-fluid {
    background-image: url('bg-web.webp');
}

.form-container {
    border-radius: 8px;
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
}

.form-container-wrapper {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}


.heart-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z' fill='%23ff0000'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 16px;
    height: 16px;
    display: inline-block;
    top: 3px;
    position: relative;
}

/* Footer Icons */
.footer-icon-location {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'><path d='M6.66602 10.4289C6.66602 7.43058 9.27769 5 12.4993 5C15.721 5 18.3327 7.43058 18.3327 10.4289C18.3327 13.4036 16.4709 16.8749 13.5661 18.1163C12.8889 18.4057 12.1098 18.4057 11.4326 18.1163C8.52781 16.8749 6.66602 13.4036 6.66602 10.4289Z' stroke='%230066B2' stroke-width='1.5'/><path d='M14.1673 9.99967C14.1673 10.9201 13.4211 11.6663 12.5007 11.6663C11.5802 11.6663 10.834 10.9201 10.834 9.99967C10.834 9.0792 11.5802 8.33301 12.5007 8.33301C13.4211 8.33301 14.1673 9.0792 14.1673 9.99967Z' stroke='%230066B2' stroke-width='1.5'/><path d='M19.9665 15.417C20.5209 15.9191 20.8327 16.485 20.8327 17.0837C20.8327 19.1547 17.1017 20.8337 12.4993 20.8337C7.89698 20.8337 4.16602 19.1547 4.16602 17.0837C4.16602 16.485 4.47778 15.9191 5.03224 15.417' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    flex-shrink: 0;
}

.footer-icon-phone {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M13.5996 4C13.5996 4 15.3596 4.16 17.5996 6.4C19.8396 8.64 19.9996 10.4 19.9996 10.4' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M13.7656 6.82812C13.7656 6.82812 14.5576 7.0544 15.7455 8.24234C16.9335 9.43028 17.1597 10.2222 17.1597 10.2222' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M10.4297 6.65255L10.9489 7.58289C11.4175 8.42247 11.2294 9.52387 10.4914 10.2618C10.4914 10.2619 10.4914 10.2618 10.4914 10.2619C10.4913 10.262 9.59633 11.1571 11.2192 12.78C12.8415 14.4022 13.7366 13.5087 13.7374 13.5078C13.7374 13.5078 13.7374 13.5078 13.7374 13.5078C14.4754 12.7699 15.5768 12.5818 16.4163 13.0503L17.3467 13.5695C18.6145 14.2771 18.7642 16.055 17.6498 17.1694C16.9802 17.839 16.1599 18.36 15.2531 18.3944C13.7266 18.4522 11.1342 18.0659 8.53377 15.4654C5.93331 12.865 5.54698 10.2726 5.60485 8.74608C5.63923 7.83929 6.16025 7.019 6.82985 6.34939C7.94421 5.23503 9.72215 5.38476 10.4297 6.65255Z' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    flex-shrink: 0;
}

.footer-icon-email {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M16.8 7.28125C17.8401 7.38356 18.5402 7.61477 19.0627 8.13731C20 9.07457 20 10.5831 20 13.6001C20 16.617 20 18.1255 19.0627 19.0628C18.1255 20.0001 16.617 20.0001 13.6 20.0001H10.4C7.38301 20.0001 5.87452 20.0001 4.93726 19.0628C4 18.1255 4 16.617 4 13.6001C4 10.5831 4 9.07457 4.93726 8.13731C5.4598 7.61477 6.15991 7.38356 7.2 7.28125' stroke='%230066B2' stroke-width='1.5'/><path d='M10.4004 7.2002H13.6004' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M11.1992 9.59961H12.7992' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M8.92634 11.8393L8.63848 11.5994C7.93073 11.0096 7.57686 10.7147 7.38804 10.3116C7.19922 9.90842 7.19922 9.44778 7.19922 8.5265V8C7.19922 6.11438 7.19922 5.17157 7.78501 4.58579C8.37079 4 9.3136 4 11.1992 4H12.7992C14.6848 4 15.6276 4 16.2134 4.58579C16.7992 5.17157 16.7992 6.11438 16.7992 8V8.5265C16.7992 9.44778 16.7992 9.90842 16.6104 10.3116C16.4216 10.7147 16.0677 11.0096 15.36 11.5994L15.0721 11.8393C13.6028 13.0637 12.8681 13.6759 11.9992 13.6759C11.1303 13.6759 10.3956 13.0637 8.92634 11.8393Z' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/><path d='M7.19922 10.4004L8.92634 11.8397C10.3956 13.0641 11.1303 13.6763 11.9992 13.6763C12.8681 13.6763 13.6028 13.0641 15.0721 11.8397L16.7992 10.4004' stroke='%230066B2' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    display: inline-block;
    flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* Desktop Navigation */
@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }

    .md\:flex {
        display: flex;
    }
}

/* Tablet and Mobile */
@media (max-width: 768px) {

    /* Form Styles */
    .form-container {
        padding: 2rem 1.5rem;
        margin: 20px auto;
    }

    .form-container-wrapper {
        flex-direction: column;
        gap: 2rem;
        align-items: stretch;
    }

    .form-input-column {
        max-width: 100%;
    }

    .intro-title-main,
    .intro-title-sub {
        font-size: 2rem;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row .form-group {
        margin-bottom: 1.25rem;
    }

    .month-calendar-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .month-nav-group {
        order: 1;
        justify-content: space-between;
        width: 100%;
    }

    .month-year-display-right {
        order: 2;
        justify-content: center;
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .form-container {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        height: 100%;
    }

    .feature-block {
        padding: 0rem;
    }
}

@media (max-width: 480px) {
    .footer-navigation {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ADDITIONAL SECTIONS STYLES
   ========================================================================== */

.qualification-icon {
    color: #50C878;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><rect width='24' height='24' fill='none'/><path fill-rule='evenodd' clip-rule='evenodd' d='M9.55879 3.6972C10.7552 2.02216 13.2447 2.02216 14.4412 3.6972L14.6317 3.96387C14.8422 4.25867 15.1958 4.41652 15.5558 4.37652L16.4048 4.28218C18.3156 4.06988 19.9301 5.68439 19.7178 7.59513L19.6235 8.44415C19.5835 8.8042 19.7413 9.15774 20.0361 9.36831L20.3028 9.55879C21.9778 10.7552 21.9778 13.2447 20.3028 14.4412L20.0361 14.6317C19.7413 14.8422 19.5835 15.1958 19.6235 15.5558L19.7178 16.4048C19.9301 18.3156 18.3156 19.9301 16.4048 19.7178L15.5558 19.6235C15.1958 19.5835 14.8422 19.7413 14.6317 20.0361L14.4412 20.3028C13.2447 21.9778 10.7553 21.9778 9.55879 20.3028L9.36831 20.0361C9.15774 19.7413 8.8042 19.5835 8.44414 19.6235L7.59513 19.7178C5.68439 19.9301 4.06988 18.3156 4.28218 16.4048L4.37652 15.5558C4.41652 15.1958 4.25867 14.8422 3.96387 14.6317L3.6972 14.4412C2.02216 13.2447 2.02216 10.7553 3.6972 9.55879L3.96387 9.36831C4.25867 9.15774 4.41652 8.8042 4.37652 8.44414L4.28218 7.59513C4.06988 5.68439 5.68439 4.06988 7.59513 4.28218L8.44415 4.37652C8.8042 4.41652 9.15774 4.25867 9.36831 3.96387L9.55879 3.6972ZM15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071L11.8882 14.526C11.3977 15.0166 10.6023 15.0166 10.1118 14.526L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929C8.68342 10.9024 9.31658 10.9024 9.70711 11.2929L11 12.5858L14.2929 9.29289C14.6834 8.90237 15.3166 8.90237 15.7071 9.29289Z' fill='%2350c878'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ==========================================================================
   TWO COLUMN LAYOUT - POLICY PAGES
   ========================================================================== */

.margin-medium-layout {
    margin: 0 auto;
    padding: 0rem 1.5rem;
}

.two-column-layout {
    display: flex;
    gap: 2rem;
    margin: 0 auto;
    padding: 2rem 2rem;
}

.left-column {
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    flex: 0 0 360px;
    padding: 20px;
    box-shadow: 0 2px 8px #0000001a;
}

.left-column ul li {
    list-style: none;
}

.left-column ul li a {
    text-decoration: none;
}

.right-column {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    flex: 1;
    padding: 20px 20px;
    box-shadow: 0 2px 8px #0000001a;
}


.leading-tight {
    line-height: 1.25;
}





.bg-indigo-50 {
    background-color: rgb(238 242 255);
}

.border-indigo-200 {
    border-color: rgb(199 210 254);
}


.hover\:border-indigo-200:hover {
    border-color: rgb(199 210 254);
}

.hover\:bg-indigo-50:hover {
    background-color: rgb(238 242 255);
}

.hover\:text-indigo-700:hover {
    color: rgb(67 56 202);
}

.prose {
    color: rgb(55 65 81);
    max-width: 65ch;
}

.max-w-none {
    max-width: none;
}

.list-disc {
    list-style-type: disc;
}

.pl-6 {
    padding-left: 1.5rem;
}

.border-t {
    border-top-width: 1px;
}

/* ==========================================================================
   GIỜ TỐT SCHEDULE PAGE STYLES
   ========================================================================== */

/* Moon icon for lunar date */
.moon-icon::before {
    content: "🌙";
    margin-right: 0.25rem;
}

/* Schedule Variables - extending existing root */
#box-chon-gio {
    --border-color: #e5e7eb;
    --header-bg: #f9fafb;
    --text-color-main: #374151;
    --text-color-subtle: #6b7280;
    --button-hover-bg: #f3f4f6;
    --today-button-bg: #eef2ff;
    --today-button-text: #4f46e5;
    --today-button-hover-bg: #e0e7ff;
    --menh-color: #1e3a8a;
    --pham-color-bad: #c81e1e;
    --pham-color-good: #059669;
    --selected-day-bg: #eff6ff;
    --selected-day-border: #93c5fd;
}

/* App Container */
#box-chon-gio .app-container {
    width: 100%;
}

/* Mobile Date Selector */
#box-chon-gio .mobile-date-selector-row {
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

#box-chon-gio .date-selector-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

#box-chon-gio .date-selector-group label {
    font-size: 13px;
    color: var(--text-color-subtle);
    font-weight: 500;
}

#box-chon-gio .date-selector-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    color: var(--text-color-main);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 30px;
}

#box-chon-gio .btn-go {
    background-color: #5850ec;
    color: white;
    font-weight: 600;
    padding: 0 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

#box-chon-gio .btn-go:hover {
    background-color: #4338ca;
}

#box-chon-gio .mobile-nav-controls {
    flex-direction: column;
    gap: 0;
}

/* Add margin to mobile-day-navigation to separate from selector */
#box-chon-gio .mobile-day-navigation {
    margin-bottom: 4px;
}

/* Schedule Header */
#box-chon-gio .schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

#box-chon-gio .mobile-navigation-wrapper {
    display: none;
}

#box-chon-gio .controls-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#box-chon-gio .nav-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#box-chon-gio .desktop-nav-controls {
    display: flex;
}

#box-chon-gio .nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-color-subtle);
    transition: background-color 0.2s;
}

#box-chon-gio .nav-button:hover {
    background-color: var(--button-hover-bg);
}

#box-chon-gio .nav-button.today-button {
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--today-button-text);
    background-color: var(--today-button-bg);
    border-color: transparent;
}

#box-chon-gio .nav-button.today-button:hover {
    background-color: var(--today-button-hover-bg);
}

/* Gender Selector */
#box-chon-gio .gender-selector {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: #fff;
}

#box-chon-gio .gender-selector label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 13px;
    padding: 0.35rem 0.6rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s, color 0.2s;
    margin-bottom: 0px;
}

#box-chon-gio .gender-selector input[type="radio"] {
    display: none;
}

#box-chon-gio .gender-selector input[type="radio"]:checked+span {
    font-weight: 500;
    color: var(--today-button-text);
}

#box-chon-gio .gender-selector label:has(input:checked) {
    background-color: var(--today-button-bg);
}

#box-chon-gio .gender-selector label:not(:has(input:checked)):hover {
    background-color: var(--button-hover-bg);
}

/* Header Title Group */
#box-chon-gio .header-title-group {
    text-align: left;
}

#box-chon-gio .current-week-display {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: var(--text-color-main);
}

#box-chon-gio .current-day-display {
    display: none;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-color-main);
}

#box-chon-gio .lunar-year-display {
    font-size: 13px;
    color: var(--text-color-subtle);
    margin-top: 0.25rem;
}

#box-chon-gio .lunar-year-display strong {
    color: var(--menh-color);
    font-weight: 500;
}

/* Schedule Container */
#box-chon-gio .schedule-container {
    width: 100%;
    background-color: #fff;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    overflow: visible;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    position: relative;
    margin-bottom: 2rem;
}

#box-chon-gio table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    overflow: visible;
}

#box-chon-gio tbody {
    overflow: visible;
}

#box-chon-gio tbody tr:last-child {
    position: relative;
    z-index: 1;
}

#box-chon-gio tbody tr:last-child td.box-gio-xau:hover,
#box-chon-gio tbody tr:last-child td.box-gio-tot:hover,
#box-chon-gio tbody tr:last-child td.box-gio-rat-tot:hover,
#box-chon-gio tbody tr:last-child td.box-gio-trung-binh:hover {
    overflow: visible;
    position: relative;
    z-index: 1001;
}

#box-chon-gio th,
#box-chon-gio td {
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    text-align: center;
}

#box-chon-gio tbody td {
    height: 4.5rem;
    vertical-align: top;
    overflow: visible;
}

#box-chon-gio tbody td.box-gio-xau:hover,
#box-chon-gio tbody td.box-gio-tot:hover,
#box-chon-gio tbody td.box-gio-rat-tot:hover,
#box-chon-gio tbody td.box-gio-trung-binh:hover {
    overflow: visible;
}

#box-chon-gio thead th {
    font-weight: 500;
    background-color: var(--header-bg);
    vertical-align: middle;
}

#box-chon-gio thead th.is-selected-day {
    background-color: #ffefef;
    border-bottom: 2px solid var(--selected-day-border);
}

#box-chon-gio tbody td:not(.time-slot) {
    transition: background-color 0.15s ease-in-out;
}

#box-chon-gio tbody td:not(.time-slot):hover {
    background-color: #ffefef;
    cursor: pointer;
}

#box-chon-gio thead tr:first-child th:not(.time-header) {
    color: var(--text-color-subtle);
    text-transform: uppercase;
    border-bottom: none;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 12px;
}

#box-chon-gio thead tr:last-child th {
    padding-top: 0.2rem;
    padding-bottom: 0.6rem;
    line-height: 1.2;
}

/* Date Display */
#box-chon-gio .date-duonglich {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

#box-chon-gio .date-day {
    font-size: 50px;
    font-weight: bold;
    text-align: left;
    line-height: 1;
    width: 60px;
    color: #1c763b;
    flex-shrink: 0;
}

#box-chon-gio .date-right {
    text-align: right;
    line-height: 1.4;
    font-size: 11px;
    margin-top: 3px;
    color: #666666;
}

#box-chon-gio .date-year {
    font-size: 12px;
}

#box-chon-gio .date-amlich {
    margin-top: 10px;
    text-align: left;
}

#box-chon-gio .lunar-date,
#box-chon-gio .lunar-month {
    line-height: 1.3;
    font-size: 12px;
    color: #1c773b;
    margin-top: 3px;
}

#box-chon-gio .date-label {
    font-size: 13px;
    display: block;
    color: #333;
}

/* Time Header */
#box-chon-gio th.time-header {
    width: 6rem;
    text-align: center;
    vertical-align: middle;
}

#box-chon-gio th.time-header svg {
    color: var(--text-color-subtle);
    display: block;
    margin: 0 auto;
}

#box-chon-gio td.time-slot {
    width: 6rem;
    text-align: center;
    padding: 0.5rem 0.25rem;
    color: var(--text-color-main);
    background-color: var(--header-bg);
    vertical-align: middle;
}

#box-chon-gio .lunar-hour-name {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-color-main);
}

#box-chon-gio .lunar-hour-range {
    font-size: 0.75rem;
    color: var(--text-color-subtle);
    margin-top: 0.1rem;
}

/* Block Gio Styles */
#box-chon-gio .block-gio {
    text-align: left;
    font-size: 14px;
}

#box-chon-gio .hour-can-chi-block-gio {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 13px;
    color: #196b8f;
}

#box-chon-gio .block-gio .hour-can-chi-block-gio span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    margin-right: 5px;
}

/* Hour Details */
#box-chon-gio .hour-cuc,
#box-chon-gio .hour-palace,
#box-chon-gio .hour-than-cu,
#box-chon-gio .hour-tuvi,
#box-chon-gio .hour-am-duong-ly,
#box-chon-gio .hour-cuc-menh,
#box-chon-gio .hour-cach-cuc {
    color: #333;
    line-height: 1.3;
}

#box-chon-gio .cach-cuc-badge {
    color: #4338ca;
    background-color: #eef2ff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 12px;
    display: inline-flex;
}

#box-chon-gio .hour-menh .hanh {
    color: #fff;
    border-radius: 3px;
    padding: 2px 4px;
}

#box-chon-gio .hour-menh .hanh-kim {
    background: #999;
}

#box-chon-gio .hour-menh .hanh-moc {
    background: #28a745;
}

#box-chon-gio .hour-menh .hanh-thuy {
    background: #333;
}

#box-chon-gio .hour-menh .hanh-hoa {
    background: red;
}

#box-chon-gio .hour-menh .hanh-tho {
    background: #f27200;
}

#box-chon-gio .hour-tuan-triet {
    display: contents;
}

#box-chon-gio .hour-pham {
    margin-top: 5px;
}

#box-chon-gio .hour-pham.has-pham {
    color: var(--pham-color-bad);
}

#box-chon-gio .hour-pham.no-pham {
    color: var(--pham-color-good);
}

#box-chon-gio .hour-menh {
    color: #333;
    line-height: 1.3;
    margin-top: 5px;
}

/* Element Colors */
#box-chon-gio .hanh-kim {
    color: #999;
}

#box-chon-gio .hanh-moc {
    color: #28a745;
}

#box-chon-gio .hanh-thuy {
    color: #333;
}

#box-chon-gio .hanh-hoa {
    color: #ff0000;
}

#box-chon-gio .hanh-tho {
    color: #f27200;
}

/* Xem Luan Giai Link */
#box-chon-gio .xem-luan-giai {
    background-color: #e0e7ff;
    color: #3730a3;
    margin-top: 10px;
    display: block;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
}

#box-chon-gio .xem-luan-giai a {
    text-decoration: none;
}

/* Mobile View */
#box-chon-gio .mobile-view {
    display: none;
}

/* Box Gio Status Colors */
#box-chon-gio .box-gio-xau {
    background-color: #e0e0e0 !important;
}

#box-chon-gio .box-gio-tot {
    background-color: #ffeb3b !important;
}

#box-chon-gio .box-gio-rat-tot {
    background-color: #ffd700 !important;
}

/* Flip Card Effect */
#box-chon-gio .box-gio-xau,
#box-chon-gio .box-gio-tot,
#box-chon-gio .box-gio-rat-tot,
#box-chon-gio .box-gio-trung-binh {
    position: relative;
    padding: 0;
    z-index: 1;
}

#box-chon-gio .box-gio-xau:hover,
#box-chon-gio .box-gio-tot:hover,
#box-chon-gio .box-gio-rat-tot:hover,
#box-chon-gio .box-gio-trung-binh:hover {
    z-index: 1000;
    overflow: visible;
}

#box-chon-gio .flip-card-container {
    perspective: 1000px;
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    position: relative;
    height: 220px;
}

#box-chon-gio .box-gio-xau:hover .flip-card-container,
#box-chon-gio .box-gio-tot:hover .flip-card-container,
#box-chon-gio .box-gio-rat-tot:hover .flip-card-container,
#box-chon-gio .box-gio-trung-binh:hover .flip-card-container {
    overflow: visible;
}

#box-chon-gio .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

#box-chon-gio .box-gio-xau:hover .flip-card-inner,
#box-chon-gio .box-gio-tot:hover .flip-card-inner,
#box-chon-gio .box-gio-rat-tot:hover .flip-card-inner,
#box-chon-gio .box-gio-trung-binh:hover .flip-card-inner {
    transform: rotateY(180deg);
}

#box-chon-gio .flip-card-front,
#box-chon-gio .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#box-chon-gio .flip-card-front {
    transform: rotateY(0deg);
}

#box-chon-gio .flip-card-back {
    transform: rotateY(180deg);
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    height: 100%;
    min-height: 100%;
    overflow: visible;
    white-space: normal;
    width: 100%;
}

#box-chon-gio .box-gio-xau .flip-card-back {
    background-color: #e0e0e0;
}


#box-chon-gio .box-gio-trung-binh .flip-card-back {
    background-color: #fff;
}

#box-chon-gio .flip-card-back {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

#box-chon-gio .box-gio-xau:hover .flip-card-back,
#box-chon-gio .box-gio-tot:hover .flip-card-back,
#box-chon-gio .box-gio-rat-tot:hover .flip-card-back,
#box-chon-gio .box-gio-trung-binh:hover .flip-card-back {
    height: 220px;
    min-height: auto;
    overflow: visible;
    max-height: none;
    width: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 2px 8px #00000014;
}

#box-chon-gio .flip-card-back .block-gio {
    width: 100%;
    text-align: left;
    font-size: 14px;
    overflow: visible;
    height: 100%;
    min-height: 100%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

#box-chon-gio .flip-card-back .block-gio .xem-luan-giai {
    margin-top: auto;
    width: 100%;
}

/* Gio Tot Xau Status Indicators */
#box-chon-gio .gio-tot-xau {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 14px;
}

#box-chon-gio .gio-tot-xau span::before {
    content: "●";
    margin-right: 0.25rem;
}

#box-chon-gio .gio-xau {
    color: #333;
}

#box-chon-gio .gio-tot {
    color: #333;
}

#box-chon-gio .gio-rat-tot {
    color: #333;
}

#box-chon-gio .gio-trung-binh {
    color: #333;
}


/* ==========================================================================
   BLOG STYLES
   ========================================================================== */

.single article,
.page article,
.page .block-menh-khuyet,
.page .checkout-mobile {
    display: block;
    width: 600px;
    margin: 20px auto;
}

article table {
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

article td,
article th {
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: none !important;
    border-right: none !important;
    padding: 8px;
}

article tr:nth-child(even) {
    background-color: #f2f2f2;
}

article tr:hover {
    background-color: #ddd;
}

article th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
}


.entry-summary {
    background-color: var(--color-gray-100);
    padding: 1.5rem;
    border-radius: 12px;
    position: relative;
    margin-bottom: 20px;
}

.entry-summary-quote-icon {
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 1;
}

.wp-block-heading {
    margin-top: 20px;
}

.entry-content p {
    margin-bottom: 10px;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 10px;
    margin-left: 24px;
}

.entry-content ul li {
    margin-bottom: 5px;
    display: list-item;
    list-style: outside disc;
}

figure {
    margin: 20px 0;
}

.entry-content figure img {
    box-sizing: border-box;
    height: auto;
    vertical-align: bottom;
    border-radius: 15px;
    width: calc(100% + 56px);
    margin: 0px -28px 0px;
    max-width: unset;
    border: 1px solid #f5f5f5;
}

.entry-content figure figcaption {
    text-align: center;
    font-style: normal;
}

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

    article {
        width: 100%;
        margin: 0;
    }

    .single article,
    .page article,
    .page .block-menh-khuyet,
    .page .checkout-mobile {
        width: 100%;
    }

    .entry-content figure img {
        width: 100%;
        margin: 0px;
        max-width: unset;
    }

    .entry-meta-wrapper {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   TRANG LUẬN GIẢI
   ========================================================================== */

.two-column-luan-giai {
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    max-width: var(--container-6xl);
    align-items: stretch;
    /* Ensure columns stretch to same height */
    overflow: visible;
    /* Required for sticky */
}

.two-column-luan-giai .left-column {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    /* Prevent expansion */
    overflow: visible;
    /* Required for sticky */
    height: auto;
    /* Allow stretching */
}

#luan-giai-toc {
    z-index: 10;
    position: sticky;
    top: 0;
    /* Ensure on top */
}


.laso-chart-container #laso-image {
    width: 100%;
}

.box-luan-giai {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    margin-bottom: 2.5em;
    padding: 1.5em;
}

.box-luan-giai .uppercase {
    text-transform: uppercase;
    color: #1e40af;
    margin-bottom: 1.2em;
    font-size: 18px;
    font-weight: 600;
    display: block;
}

.box-luan-giai h3.head-name {
    display: none;
}

#luan-giai-toc a {
    color: #333;
    font-size: 15px;
}

#luan-giai-toc a.toc-active {
    color: #2563eb;
    font-weight: 700 !important;
    border-left: 3px solid #2563eb;
    padding-left: 8px;
    background-color: #eff6ff;
    display: block;
    margin-left: -12px;
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (max-width: 768px) {
    .two-column-luan-giai {
        flex-direction: column;
        padding: 0px;
    }

    .two-column-luan-giai .left-column {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   RESPONSIVE STYLES FOR ADDITIONAL SECTIONS
   ========================================================================== */

@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    #luan-giai-toc {
        display: none;
    }

    #box-chon-gio .mobile-date-selector-row {
        display: flex;
    }

    .container-fluid {
        padding: 10px;
    }

    .form-intro-column {
        padding: 0px 10px;
    }

    /* CTA Section */
    .cta-section {
        padding: 3rem 0;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-description {
        font-size: 1rem;
    }

    .cta-button {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    /* Testimonials Section */
    .testimonials-section {
        padding: 2rem 0;
    }

    .testimonials-title {
        font-size: 2rem;
    }

    .testimonials-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .testimonials-statistics {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .statistic-number {
        font-size: 2.5rem;
    }

    /* FAQ Section */
    .faq-section {
        padding: 2rem 0;
        margin-top: 30px;
    }

    .faq-container {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1.5rem;
    }

    .faq-title {
        font-size: 2rem;
        width: auto;
    }

    /* Blog Section */
    .blog-section {
        padding: 2rem 0;
    }

    .blog-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-cta-button {
        font-size: 14px;
    }

    /* Two Column Layout - Policy Pages */
    .two-column-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .left-column {
        width: 100%;
        max-width: 100%;
        background: #fff;
        border-radius: 8px;
        flex: 0 0 400px;
        padding: 20px;
        box-shadow: 0 2px 8px #0000001a;
    }

    .right-column {
        width: 100%;
        background: #fff;
        border-radius: 8px;
        flex: 1;
        padding: 20px;
        box-shadow: 0 2px 8px #0000001a;
    }
}


/* ==========================================================================
   MOBILE RESPONSIVE STYLES FOR GIỜ TỐT
   ========================================================================== */

@media (max-width: 768px) {
    #box-chon-gio .app-container {
        width: 100%;
    }

    #box-chon-gio .schedule-header {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    #box-chon-gio .header-title-group {
        order: -1;
        text-align: center;
        width: 100%;
    }

    #box-chon-gio .mobile-navigation-wrapper {
        display: block;
        width: 100%;
        order: 0;
    }

    #box-chon-gio .controls-wrapper {
        width: 100%;
        justify-content: space-between;
    }

    #box-chon-gio .desktop-nav-controls {
        display: none;
    }

    #box-chon-gio .mobile-nav-controls {
        display: flex;
        width: 100%;
    }

    #box-chon-gio .current-week-display {
        display: block;
        font-size: 1rem;
    }

    #box-chon-gio .current-day-display {
        display: none;
    }

    #box-chon-gio .schedule-container {
        display: none;
    }

    #box-chon-gio .mobile-view {
        display: block;
    }

    #box-chon-gio .mobile-day-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    #box-chon-gio .mobile-day-item {
        display: flex;
        flex-direction: column;
    }

    #box-chon-gio .mobile-day-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        flex-wrap: wrap;
    }

    #box-chon-gio .mobile-date-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    #box-chon-gio .mobile-day-number {
        font-size: 70px;
        font-weight: 700;
        line-height: 1;
    }

    #box-chon-gio .mobile-date-meta {
        color: #6b7280;
        text-transform: capitalize;
        flex-direction: column;
        font-weight: 500;
        line-height: 20px;
        text-align: right;
    }

    #box-chon-gio .mobile-lunar-info {
        flex-direction: column;
        flex: 1;
        font-weight: 600;
        display: flex;
        line-height: 20px;
        padding-left: 20px;
    }

    #box-chon-gio .lunar-label {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-weight: 600;
    }

    #box-chon-gio .lunar-line {
        font-weight: 500;
    }

    #box-chon-gio .mobile-hour-list {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    #box-chon-gio .mobile-hour-item {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color);
    }

    #box-chon-gio .mobile-hour-item:last-child {
        border-bottom: none;
    }

    #box-chon-gio .mobile-hour-item:first-child {
        padding-top: 0px;
    }

    #box-chon-gio .mobile-hour-details-wrapper {
        width: 100%;
    }

    #box-chon-gio .mobile-hour-summary {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        list-style: none;
        cursor: pointer;
        min-height: 100px;
    }

    #box-chon-gio .mobile-hour-summary::-webkit-details-marker {
        display: none;
    }

    #box-chon-gio .mobile-hour-label {
        text-align: center;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: center;
        gap: 0.15rem;
        width: 88px;
        padding: 0.65rem 0.5rem;
        display: flex;
    }

    #box-chon-gio .mobile-hour-name {
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
    }

    #box-chon-gio .mobile-hour-range {
        font-size: 0.85rem;
        color: #475569;
    }

    #box-chon-gio .mobile-hour-status {
        border-radius: 0.75rem;
        flex: 1;
        justify-content: center;
        align-items: center;
        min-height: 48px;
        font-size: 14px;
        display: flex;
    }

    #box-chon-gio .mobile-hour-arrow {
        color: #0f172a;
        border-radius: 999px;
        width: 32px;
        height: 32px;
        padding: 4px;
        transition: transform 0.3s;
        margin-right: 15px;
    }

    #box-chon-gio .mobile-hour-details-wrapper[open] .mobile-hour-arrow {
        transform: rotate(180deg);
    }

    #box-chon-gio .mobile-hour-content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 15px;
    }

    #box-chon-gio .mobile-hour-item .hanh-kim,
    #box-chon-gio .mobile-hour-item .hanh-moc,
    #box-chon-gio .mobile-hour-item .hanh-thuy,
    #box-chon-gio .mobile-hour-item .hanh-hoa,
    #box-chon-gio .mobile-hour-item .hanh-tho {
        background-color: #999;
        border-radius: 5px;
        padding: 2px 6px;
        color: #fff;
        margin-right: 0;
        display: inline-flex;
        align-items: center;
    }

    #box-chon-gio .mobile-hour-item .hanh-moc {
        background-color: #28a745;
    }

    #box-chon-gio .mobile-hour-item .hanh-thuy {
        background-color: #333;
    }

    #box-chon-gio .mobile-hour-item .hanh-hoa {
        background-color: #ff0000;
    }

    #box-chon-gio .mobile-hour-item .hanh-tho {
        background-color: #f27200;
    }

    #box-chon-gio .mobile-hour-content .hour-can-chi-block-gio {
        font-weight: bold;
        color: #196b8f;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    #box-chon-gio .mobile-hour-item .thong-tin-gio {
        display: flex;
        align-items: center;
    }

    #box-chon-gio .mobile-hour-item .xem-luan-giai {
        text-align: center;
        border-radius: 15px;
        display: block;
        width: 70%;
        margin: 10px auto;
    }

    #box-chon-gio .mobile-day-header .moon-icon {
        width: 1.25rem;
        height: 1.25rem;
        display: inline-block;
    }

    /* Mobile Day Navigation */
    #box-chon-gio .mobile-day-navigation {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 0;
        margin: 0;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    #box-chon-gio .mobile-day-navigation .nav-button {
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
        background-color: #fff;
        transition: all 0.2s ease;
    }

    #box-chon-gio .mobile-day-navigation .nav-button:active {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    #box-chon-gio .mobile-day-navigation .nav-button:not(.today-button) {
        padding: 0.75rem;
        color: var(--text-color-main);
    }

    #box-chon-gio .mobile-day-navigation .nav-button:not(.today-button):hover {
        background-color: var(--button-hover-bg);
        border-color: #d1d5db;
    }

    #box-chon-gio .mobile-day-navigation .nav-button.today-button {
        flex: 1;
        min-width: auto;
        border: none;
    }

    #box-chon-gio .mobile-day-navigation .nav-button.today-button:hover {
        background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
    }

    #box-chon-gio .mobile-day-navigation .nav-button svg {
        width: 20px;
        height: 20px;
    }
}


#box-chon-gio .btn-go:hover {
    background-color: #4338ca;
}

#box-chon-gio .mobile-nav-controls {
    flex-direction: column;
    gap: 0;
}

/* Add margin to mobile-day-navigation to separate from selector */
#box-chon-gio .mobile-day-navigation {
    margin-bottom: 4px;
}

/* Schedule Header */
#box-chon-gio .schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: #fff;
    border: 1px solid var(--border-color);
}

#box-chon-gio .mobile-view {
    margin-top: 1rem;
}

/* Mobile Hour Item Styling */
#box-chon-gio .mobile-hour-item {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
}

#box-chon-gio .mobile-day-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Button View Details */
#box-chon-gio .btn-view {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 0.875rem;
}

#box-chon-gio .btn-view:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}

#box-chon-gio .controls-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#box-chon-gio .nav-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#box-chon-gio .desktop-nav-controls {
    display: flex;
}

#box-chon-gio .nav-button:hover {
    background-color: var(--button-hover-bg);
}

#box-chon-gio .nav-button.today-button {
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--today-button-text);
    background-color: var(--today-button-bg);
    border-color: transparent;
}

#box-chon-gio .nav-button.today-button:hover {
    background-color: var(--today-button-hover-bg);
}

/* Gender Selector */
#box-chon-gio .gender-selector {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background-color: #fff;
}

#box-chon-gio .gender-selector label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 13px;
    padding: 0.35rem 0.6rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s, color 0.2s;
    margin-bottom: 0px;
}

#box-chon-gio .gender-selector input[type="radio"] {
    display: none;
}

#box-chon-gio .gender-selector input[type="radio"]:checked+span {
    font-weight: 500;
    color: var(--today-button-text);
}

#box-chon-gio .gender-selector label:has(input:checked) {
    background-color: var(--today-button-bg);
}

#box-chon-gio .gender-selector label:not(:has(input:checked)):hover {
    background-color: var(--button-hover-bg);
}

/* Header Title Group */
#box-chon-gio .header-title-group {
    text-align: left;
}


#box-chon-gio .current-day-display {
    display: none;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-color-main);
}

#box-chon-gio .lunar-year-display {
    font-size: 13px;
    color: var(--text-color-subtle);
    margin-top: 0.25rem;
}

#box-chon-gio .lunar-year-display strong {
    color: var(--menh-color);
    font-weight: 500;
}

#box-chon-gio table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    overflow: visible;
}

#box-chon-gio tbody {
    overflow: visible;
}

#box-chon-gio tbody tr:last-child {
    position: relative;
    z-index: 1;
}

#box-chon-gio tbody tr:last-child td.box-gio-xau:hover,
#box-chon-gio tbody tr:last-child td.box-gio-tot:hover,
#box-chon-gio tbody tr:last-child td.box-gio-rat-tot:hover,
#box-chon-gio tbody tr:last-child td.box-gio-trung-binh:hover {
    overflow: visible;
    position: relative;
    z-index: 1001;
}

#box-chon-gio th,
#box-chon-gio td {
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    text-align: center;
}

#box-chon-gio tbody td {
    height: 4.5rem;
    vertical-align: top;
    overflow: visible;
}

#box-chon-gio tbody td.box-gio-xau:hover,
#box-chon-gio tbody td.box-gio-tot:hover,
#box-chon-gio tbody td.box-gio-rat-tot:hover,
#box-chon-gio tbody td.box-gio-trung-binh:hover {
    overflow: visible;
}

#box-chon-gio thead th {
    font-weight: 500;
    background-color: var(--header-bg);
    vertical-align: middle;
}

#box-chon-gio thead th.is-selected-day {
    background-color: #ffefef;
    border-bottom: 2px solid var(--selected-day-border);
}

#box-chon-gio tbody td:not(.time-slot) {
    transition: background-color 0.15s ease-in-out;
}

#box-chon-gio tbody td:not(.time-slot):hover {
    background-color: #ffefef;
    cursor: pointer;
}

#box-chon-gio thead tr:first-child th:not(.time-header) {
    color: var(--text-color-subtle);
    text-transform: uppercase;
    border-bottom: none;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 12px;
}

#box-chon-gio thead tr:last-child th {
    padding-top: 0.2rem;
    padding-bottom: 0.6rem;
    line-height: 1.2;
}

/* Date Display */
#box-chon-gio .date-duonglich {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

#box-chon-gio .date-day {
    font-size: 50px;
    font-weight: bold;
    text-align: left;
    line-height: 1;
    width: 60px;
    color: #1c763b;
    flex-shrink: 0;
}

#box-chon-gio .date-right {
    text-align: right;
    line-height: 1.4;
    font-size: 11px;
    margin-top: 3px;
    color: #666666;
}

#box-chon-gio .date-year {
    font-size: 12px;
}

#box-chon-gio .date-amlich {
    margin-top: 10px;
    text-align: left;
}

#box-chon-gio .lunar-date,
#box-chon-gio .lunar-month {
    line-height: 1.3;
    font-size: 12px;
    color: #1c773b;
    margin-top: 3px;
}

#box-chon-gio .date-label {
    font-size: 13px;
    display: block;
    color: #333;
}

/* Time Header */
#box-chon-gio th.time-header {
    width: 6rem;
    text-align: center;
    vertical-align: middle;
}

#box-chon-gio th.time-header svg {
    color: var(--text-color-subtle);
    display: block;
    margin: 0 auto;
}

#box-chon-gio td.time-slot {
    width: 6rem;
    text-align: center;
    padding: 0.5rem 0.25rem;
    color: var(--text-color-main);
    background-color: var(--header-bg);
    vertical-align: middle;
}

#box-chon-gio .lunar-hour-name {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-color-main);
}

#box-chon-gio .lunar-hour-range {
    font-size: 0.75rem;
    color: var(--text-color-subtle);
    margin-top: 0.1rem;
}

/* Block Gio Styles */
#box-chon-gio .block-gio {
    text-align: left;
    font-size: 14px;
}

#box-chon-gio .hour-can-chi-block-gio {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 13px;
    color: #196b8f;
}

#box-chon-gio .block-gio .hour-can-chi-block-gio span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    margin-right: 5px;
}

#box-chon-gio .cach-cuc-badge {
    color: #4338ca;
    background-color: #eef2ff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 12px;
    display: inline-flex;
}

#box-chon-gio .hour-menh .hanh {
    color: #fff;
    border-radius: 3px;
    padding: 2px 4px;
}

#box-chon-gio .hour-menh .hanh-kim {
    background: #999;
}

#box-chon-gio .hour-menh .hanh-moc {
    background: #28a745;
}

#box-chon-gio .hour-menh .hanh-thuy {
    background: #333;
}

#box-chon-gio .hour-menh .hanh-hoa {
    background: red;
}

#box-chon-gio .hour-menh .hanh-tho {
    background: #f27200;
}

#box-chon-gio .hour-tuan-triet {
    display: contents;
}

#box-chon-gio .hour-pham {
    margin-top: 5px;
}

#box-chon-gio .hour-pham.has-pham {
    color: var(--pham-color-bad);
}

#box-chon-gio .hour-pham.no-pham {
    color: var(--pham-color-good);
}

#box-chon-gio .hour-menh {
    color: #333;
    line-height: 1.3;
    margin-top: 5px;
}

/* Element Colors */
#box-chon-gio .hanh-kim {
    color: #999;
}

#box-chon-gio .hanh-moc {
    color: #28a745;
}

#box-chon-gio .hanh-thuy {
    color: #333;
}

#box-chon-gio .hanh-hoa {
    color: #ff0000;
}

#box-chon-gio .hanh-tho {
    color: #f27200;
}

/* Flip Card Effect */
#box-chon-gio .box-gio-xau,
#box-chon-gio .box-gio-tot,
#box-chon-gio .box-gio-rat-tot,
#box-chon-gio .box-gio-trung-binh {
    position: relative;
    padding: 0;
    z-index: 1;
}

#box-chon-gio .box-gio-xau:hover,
#box-chon-gio .box-gio-tot:hover,
#box-chon-gio .box-gio-rat-tot:hover,
#box-chon-gio .box-gio-trung-binh:hover {
    z-index: 1000;
    overflow: visible;
}

#box-chon-gio .flip-card-container {
    perspective: 1000px;
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    position: relative;
    height: 220px;
}

#box-chon-gio .box-gio-xau:hover .flip-card-container,
#box-chon-gio .box-gio-tot:hover .flip-card-container,
#box-chon-gio .box-gio-rat-tot:hover .flip-card-container,
#box-chon-gio .box-gio-trung-binh:hover .flip-card-container {
    overflow: visible;
}

#box-chon-gio .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

#box-chon-gio .box-gio-xau:hover .flip-card-inner,
#box-chon-gio .box-gio-tot:hover .flip-card-inner,
#box-chon-gio .box-gio-rat-tot:hover .flip-card-inner,
#box-chon-gio .box-gio-trung-binh:hover .flip-card-inner {
    transform: rotateY(180deg);
}

#box-chon-gio .flip-card-front,
#box-chon-gio .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 4.5rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#box-chon-gio .flip-card-front {
    transform: rotateY(0deg);
}

#box-chon-gio .box-gio-xau .flip-card-back {
    background-color: #e0e0e0;
}

#box-chon-gio .box-gio-trung-binh .flip-card-back {
    background-color: #fff;
}

#box-chon-gio .flip-card-back .block-gio {
    width: 100%;
    text-align: left;
    font-size: 14px;
    overflow: visible;
    height: 100%;
    min-height: 100%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

#box-chon-gio .flip-card-back .block-gio .xem-luan-giai {
    margin-top: auto;
    width: 100%;
}

/* Gio Tot Xau Status Indicators */
#box-chon-gio .gio-tot-xau {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    font-size: 14px;
}

#box-chon-gio .gio-tot-xau span::before {
    content: "●";
    margin-right: 0.25rem;
}

#box-chon-gio .gio-xau {
    color: #333;
}

#box-chon-gio .gio-tot {
    color: #333;
}

#box-chon-gio .gio-rat-tot {
    color: #333;
}

#box-chon-gio .gio-trung-binh {
    color: #333;
}


/* ==========================================================================
   AM LICH PAGE STYLES (Moved from page-am-lich.php)
   ========================================================================== */
:root {
    --border-color: #e5e7eb;
    --header-bg: #f9fafb;
    --text-color-main: #374151;
    --text-color-subtle: #6b7280;
    --button-hover-bg: #f3f4f6;
    --today-button-bg: #eef2ff;
    --today-button-text: #4f46e5;
    --today-button-hover-bg: #e0e7ff;
    --menh-color: #1e3a8a;
    --pham-color-bad: #c81e1e;
    --pham-color-good: #059669;
    --selected-day-bg: #eff6ff;
    --selected-day-border: #93c5fd;
}


.day-detail-header {
    text-align: center;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.gregorian-date-large {
    color: #1f2937;
    font-size: 32px;
    font-weight: 700;
}

.day-detail-content {
    flex-direction: column;
    gap: 20px;
    display: flex;
}

.lunar-info-section {
    text-align: center;
    background: #f9fafb;
    border-radius: 8px;
    padding: 20px;
}

.lunar-month-name {
    color: #6b7280;
    margin-bottom: 10px;
    font-size: 16px;
}

.lunar-day-large {
    color: #1f2937;
    margin: 10px 0;
    font-size: 48px;
    font-weight: 700;
}

.lunar-year {
    color: #6b7280;
    font-size: 14px;
}

.lunar-divider {
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    display: flex;
}

.divider-line {
    background: #e5e7eb;
    flex: 1;
    height: 1px;
}

.divider-text {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 0 10px;
    font-size: 12px;
}

.lunar-calendar-section {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
    display: flex;
}

.lunar-calendar-item {
    text-align: center;
    background: #f9fafb;
    border-radius: 8px;
    flex: 1;
    padding: 15px 10px;
}

.lunar-calendar-label {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
}

.lunar-calendar-number {
    color: #f97316;
    margin-bottom: 8px;
    font-size: 32px;
    font-weight: 700;
}

.lunar-calendar-canchi {
    color: #1f2937;
    font-size: 13px;
    font-weight: 500;
}

.solar-term-text {
    text-align: center;
    color: #059669;
    font-size: 14px;
    font-weight: 500;
}

.can-chi-section {
    flex-direction: column;
    gap: 10px;
    display: flex;
}

.can-chi-item {
    background: #f3f4f6;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
}

.day-type-section {
    text-align: center;
    border-radius: 8px;
    padding: 12px;
}

.day-type-section.hoang-dao-day {
    color: #065f46;
    background: #d1fae5;
}

.day-type-section.hac-dao-day {
    color: #991b1b;
    background: #fee2e2;
}

.day-type-label {
    font-size: 16px;
    font-weight: 700;
}

.auspicious-hours-section {
    background: #f9fafb;
    border-radius: 8px;
    padding: 15px;
}

.auspicious-hours-title {
    color: #1f2937;
    margin-bottom: 10px;
    font-weight: 700;
}

.auspicious-hours-list {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.8;
}

.month-calendar-header {
    color: #fff;
    background: #10b981;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    display: flex;
}

.month-nav-group {
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    display: flex;
}

.month-nav-btn {
    color: #fff;
    cursor: pointer;
    background: #fff3;
    border: none;
    border-radius: 4px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    font-size: 24px;
    transition: background .2s;
}

.month-nav-btn:hover {
    background: #ffffff4d;
}

.this-month-btn {
    color: #6366f1;
    cursor: pointer;
    background: #fff;
    border: none;
    border-radius: 6px;
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s;
}

.this-month-btn:hover {
    background: #e0e7ff;
}

.month-year-display-right {
    align-items: center;
    gap: 10px;
    margin-left: auto;
    display: flex;
}

.month-select,
.year-select {
    color: #1f2937;
    cursor: pointer;
    background: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    height: 40px;
}

.month-calendar-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.month-calendar-table thead th {
    text-align: center;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
}

.calendar-day-cell {
    vertical-align: top;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    width: 14.28%;
    min-height: 100px;
    padding: 10px;
    transition: background .2s;
}

.calendar-day-cell:hover:not(.empty-cell) {
    background: #f9fafb;
}

.calendar-day-cell.empty-cell {
    cursor: default;
    background: #fafafa;
}

.calendar-day-cell.hoang-dao-day {
    background: #f0fdf4;
}

.calendar-day-cell.hac-dao-day {
    background: #fef2f2;
}

.calendar-day-cell.selected-day {
    background: #dbeafe;
    border: 2px solid #3b82f6;
}

.calendar-day-cell.today {
    border: 2px solid #10b981;
}

.gregorian-day {
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
}

.hoang-dao-dot {
    color: #10b981;
    font-size: 20px;
}

.hac-dao-dot {
    color: #ef4444;
    font-size: 20px;
}

.lunar-day {
    color: #6b7280;
    word-break: break-word;
    margin-bottom: 5px;
    font-size: 12px;
}

.can-chi-day {
    color: #9ca3af;
    word-break: break-word;
    font-size: 11px;
    line-height: 1.2;
}

.calendar-legend {
    gap: 20px;
    margin-top: 15px;
    font-size: 14px;
    display: flex;
}

.legend-item {
    background: #f9fafb;
    border-radius: 4px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    display: flex;
}

.legend-item.legend-hoang-dao {
    color: #065f46;
}

.legend-item.legend-hac-dao {
    color: #991b1b;
}

.legend-dot {
    font-size: 18px;
    font-weight: 700;
}

.solar-term {
    color: #059669;
    margin-top: 10px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
        padding: 0;
    }

    .left-column {
        flex: auto;
        width: 100%;
    }

    .calendar-day-cell {
        height: 80px;
        padding: 5px
    }

    .gregorian-day {
        font-size: 17px;
    }

    /* [Refactor] Unused Page Expert Section
    .page .expert-section {
        display: block;
        margin-top: 0px;
        padding: 0;
    }

    .page .expert-section .expert-info-column {
        margin-left: 0;
    }
    */
}

/* ==========================================================================
   XEM MENH KHUYET STYLES
   ========================================================================== */

/* Analysis Section */
.analysis-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}

.analysis-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.analysis-summary {
    margin-top: 0;
}

.analysis-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.analysis-detail-card {
    background: #f9fafb;
    border-radius: 12px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.detail-card-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.6px;
    font-weight: 700;
    margin-bottom: 12px;
}

.detail-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1f2937;
}

.detail-item-label {
    font-weight: 500;
    color: #6b7280;
    margin-right: 12px;
}

.detail-item-value {
    font-weight: 600;
    color: #1f2937;
}

/* Season Analysis */
.season-support {
    padding: 14px 18px;
    border-radius: 12px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
    font-size: 14px;
    font-weight: 500;
}

.season-analysis {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.season-analysis>div {
    margin-bottom: 6px;
}

.season-note {
    color: #4b5563;
    font-size: 14px;
}

/* Element Cards */
.element-summary-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.element-card {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(249, 115, 22, 0.15);
}

.element-card-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #9a3412;
    letter-spacing: 0.6px;
    font-weight: 700;
    margin-bottom: 8px;
}

.element-card-count {
    font-size: 30px;
    font-weight: 700;
    color: #c2410c;
    line-height: 1.1;
}

.element-card-ratio {
    font-size: 13px;
    color: #7c2d12;
    font-weight: 500;
}

/* Element Styling by Type */
.element-card.hanh-moc {
    background: #ecfdf5;
    /* emerald-50 */
    border-color: #bbf7d0;
    /* emerald-200 */
}

.element-card.hanh-moc .element-card-label {
    color: #065f46;
}

/* emerald-800 */
.element-card.hanh-moc .element-card-count {
    color: #047857;
}

/* emerald-700 */
.element-card.hanh-moc .element-card-ratio {
    color: #064e3b;
}

/* emerald-900 */

.element-card.hanh-thuy {
    background: #eff6ff;
    /* blue-50 */
    border-color: #bfdbfe;
    /* blue-200 */
}

.element-card.hanh-thuy .element-card-label {
    color: #1e40af;
}

/* blue-800 */
.element-card.hanh-thuy .element-card-count {
    color: #1d4ed8;
}

/* blue-700 */
.element-card.hanh-thuy .element-card-ratio {
    color: #1e3a8a;
}

/* blue-900 */

.element-card.hanh-hoa {
    background: #fff7ed;
    /* orange-50 */
    border-color: #fed7aa;
    /* orange-200 */
}

.element-card.hanh-hoa .element-card-label {
    color: #9a3412;
}

/* orange-800 */
.element-card.hanh-hoa .element-card-count {
    color: #c2410c;
}

/* orange-700 */
.element-card.hanh-hoa .element-card-ratio {
    color: #7c2d12;
}

/* orange-900 */

.element-card.hanh-tho {
    background: #fffbeb;
    /* amber-50 */
    border-color: #fde68a;
    /* amber-300 */
}

.element-card.hanh-tho .element-card-label {
    color: #92400e;
}

/* amber-800 */
.element-card.hanh-tho .element-card-count {
    color: #b45309;
}

/* amber-700 */
.element-card.hanh-tho .element-card-ratio {
    color: #78350f;
}

/* amber-900 */

.element-card.hanh-kim {
    background: #f8fafc;
    /* slate-50 */
    border-color: #cbd5e1;
    /* slate-300 */
}

.element-card.hanh-kim .element-card-label {
    color: #475569;
}

/* slate-600 */
.element-card.hanh-kim .element-card-count {
    color: #334155;
}

/* slate-700 */
.element-card.hanh-kim .element-card-ratio {
    color: #1e293b;
}

/* slate-800 */


/* Conclusion & Additional */
.analysis-conclusion {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px;
}

.section-divider .divider-text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7280;
    font-weight: 700;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Can Grid */
.element-can-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.element-can-card {
    background: #f1f5f9;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.element-can-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #475569;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.element-can-value {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}

.napam-value {
    font-size: 20px;
}

.element-can-element {
    font-size: 13px;
    color: #1f2937;
    font-weight: 600;
}

/* ==========================================================================
   PAGE: XEM MENH KHUYET
   ========================================================================== */
.analysis-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.lunar-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    background: #f7fafc;
    padding: 15px;
    border-radius: 8px;
}

.section-divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.divider-text {
    padding: 0 15px;
    font-weight: bold;
    color: #4a5568;
    white-space: nowrap;
}

.element-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.element-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.element-label {
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 5px;
}

.element-value {
    font-weight: bold;
    font-size: 1.1rem;
}

.element-type {
    font-size: 0.9rem;
    margin-top: 5px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.summary-card {
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    color: #fff;
}

.sum-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.sum-count {
    font-size: 1.8rem;
    font-weight: bold;
}

.sum-ratio {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    .element-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lunar-summary {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
}

/* ==========================================================================
   BREADCRUMBS STYLES
   ========================================================================== */
.rank-math-breadcrumb {
    font-size: 0.9rem;
    color: var(--color-gray-500);
}

#breadcrumbs {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    background-color: var(--color-gray-100);
    padding: 10px 15px;
    border-radius: 5px;
}

.rank-math-breadcrumb p {
    margin: 0;
}

.rank-math-breadcrumb a {
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color 0.2s;
}

.rank-math-breadcrumb a:hover {
    color: var(--color-orange-600);
}

.rank-math-breadcrumb .separator {
    margin: 0 0.5rem;
    color: var(--color-gray-400);
}


/* ==========================================================================
   FONT RESIZER STYLES
   ========================================================================== */
.font-resizer {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-gray-200);
}

@media (min-width: 768px) {
    .entry-meta-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        border-top: 1px solid var(--color-gray-100);
        padding-top: 1rem;
    }

    .font-resizer {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

.resizer-label {
    font-size: 15px;
    color: var(--color-gray-600);
    font-weight: 500;
}

.resizer-controls {
    display: inline-flex;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 9999px;
    padding: 2px;
}

/* ==========================================================================
   POST TAGS STYLES
   ========================================================================== */
.post-tags-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tags-label {
    color: var(--color-gray-900);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-pill {
    display: inline-block;
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    padding: 6px 16px;
    border-radius: 9999px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.tag-pill:hover {
    background-color: var(--color-gray-200);
    color: var(--color-gray-900);
}


.resizer-btn {
    background: none;
    border: none;
    padding: 6px 16px;
    border-radius: 9999px;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.resizer-btn:hover {
    color: var(--color-blue-600);
}

.resizer-btn.active {
    background-color: var(--color-blue-700);
    color: #fff;
    font-weight: 500;
}

/* Logic classes */
.entry-content.font-size-large {
    font-size: 1.25rem;
    /* ~20px */
    line-height: 1.7;
}

.entry-content.font-size-larger {
    font-size: 1.5rem;
    /* ~24px */
    line-height: 1.6;
}

/* ==========================================================================
   AUTHOR BOX STYLES
   ========================================================================== */
.author-box {
    background-color: var(--color-blue-50);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.author-box-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.author-avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.author-info {
    gap: 4px;
}

.author-role {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    font-weight: 500;
}

.author-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

.author-name a {
    color: var(--color-gray-900);
    text-decoration: none;
}

.author-verified {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--color-green-600);
    font-weight: 500;
}

.author-bio {
    color: var(--color-gray-700);
    line-height: 1.6;
}

.author-link a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-blue-600);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.author-link a:hover {
    color: var(--color-blue-700);
}

@media (max-width: 640px) {
    .author-box {
        padding: 20px;
    }

    .author-box-header {
        flex-direction: column;
        /* Or keep row if space permits */
        align-items: flex-start;
    }
}

.author-name-wrapper {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}


/* ==========================================================================
   TABLE OF CONTENTS STYLES
   ========================================================================== */
.post-toc {
    border: 2px solid var(--color-blue-700);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 30px;
    background-color: white;
}

.toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 0;
}

.toc-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2C3E50;
    text-transform: uppercase;
}

.toc-toggle {
    color: var(--color-blue-700);
    transition: transform 0.3s ease;
}

.post-toc.collapsed .toc-toggle {
    transform: rotate(-90deg);
}

.toc-content {
    margin-top: 16px;
    display: block;
}

.post-toc.collapsed .toc-content {
    display: none;
}

.post-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: item;
}

.post-toc ul li {
    margin-bottom: 8px;
}

.post-toc ul li a {
    text-decoration: none;
    color: var(--color-gray-700);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
    line-height: 1.5;
    display: block;
}

.post-toc ul li a:hover {
    color: var(--color-blue-600);
}

/* Nested Counters Logic */
.post-toc>.toc-content>ul>li {
    counter-increment: item;
}

/*.post-toc>.toc-content>ul>li>a::before {
     content: counter(item) ". ";
    font-weight: 700;
    color: var(--color-gray-900);
    margin-right: 4px;
}*/


/* Level 2 */
.post-toc ul ul {
    padding-left: 20px;
    margin-top: 6px;
    counter-reset: subitem;
}

.post-toc ul ul li {
    counter-increment: subitem;
    margin-bottom: 6px;
}

.post-toc ul ul li a {
    font-size: 0.9rem;
    font-weight: 400;
}

/*.post-toc ul ul li a::before {
     content: counter(item) "." counter(subitem) ". ";
    font-weight: 500;
    margin-right: 4px;
}*/


/* Level 3 */
.post-toc ul ul ul {
    padding-left: 20px;
    counter-reset: subsubitem;
}

.post-toc ul ul ul li {
    counter-increment: subsubitem;
}

.post-toc ul ul ul li a::before {
    content: counter(item) "." counter(subitem) "." counter(subsubitem) ". ";
}

/* ==========================================================================
   MOBILE STICKY TOC STYLES
   ========================================================================== */
.mobile-sticky-toc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 9999;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* display: none handled by JS/Media Query */
}

/* Ensure it's hidden on desktop even if JS sets block */
@media (min-width: 769px) {
    .mobile-sticky-toc {
        display: none !important;
    }
}

.mobile-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-200);
}

.mobile-toc-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    max-width: 90%;
}

.mobile-toc-toggle {
    color: var(--color-gray-500);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

/* Rotate arrow when expanded */
.mobile-sticky-toc.expanded .mobile-toc-toggle {
    transform: rotate(180deg);
}

.mobile-toc-content {
    display: none;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    background-color: white;
    border-top: 1px solid var(--color-gray-100);
}

.mobile-sticky-toc.expanded .mobile-toc-content {
    display: block;
}

/* Reuse basic list styles but override some spacing */
.mobile-toc-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Reset counters again for this clone */
}

.mobile-toc-content ul li {
    margin-bottom: 10px;
}

.mobile-toc-content ul li a {
    text-decoration: none;
    color: var(--color-gray-700);
    font-size: 0.9rem;
    display: block;
    line-height: 1.4;
}

/* Remove CSS counters from mobile view if too cluttered, or keep them. 
   Let's keep them but adjust padding if needed. */
.mobile-toc-content ul {
    padding-left: 0;
}

.mobile-toc-content ul ul {
    padding-left: 15px;
    margin-top: 5px;
}

/* ==========================================================================
   CATEGORY PAGE STYLES
   ========================================================================== */


.pagination .page-numbers {
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-300);
    font-size: var(--text-lg);
    vertical-align: middle;
}

.pagination .current {
    background-color: var(--color-blue-600);
    color: white;
    border: 1px solid var(--color-blue-600);
}


.w-10 {
    width: 2.5rem;
}

.w-100 {
    width: 100%;
}

.h-10 {
    height: 2.5rem;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}


.flex-shrink-0 {
    flex-shrink: 0;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.overflow-hidden {
    overflow: hidden;
}

.must-read-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   404 ERROR PAGE STYLES
   ========================================================================== */

.error-404-page .container {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.error-404-content {
    max-width: 600px;
}

.error-code {
    font-family: var(--font-sans, 'TikTok Sans', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-indigo-600, #4f46e5);
    /* Brand Blue */
    margin-bottom: 1rem;
    line-height: 1.5;
}

.error-title {
    font-family: var(--font-sans, 'TikTok Sans', sans-serif);
    font-size: 3.5rem;
    /* ~60px */
    font-weight: 700;
    color: var(--color-gray-900, #111827);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.error-text {
    font-family: var(--font-sans, 'TikTok Sans', sans-serif);
    font-size: 1.125rem;
    /* 18px */
    color: var(--color-gray-500, #6b7280);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans, 'TikTok Sans', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-indigo-600, #4f46e5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-home-link:hover {
    color: var(--color-indigo-700, #4338ca);
}

.back-home-link svg {
    transition: transform 0.2s ease;
}

.back-home-link:hover svg {
    transform: translateX(-4px);
}

@media (max-width: 768px) {
    .error-title {
        font-size: 2.5rem;
    }
}

/* Utility classes for Luan Giai Page */
.border-gray-300 {
    border-color: rgb(209 213 219);
}

.mr-4 {
    margin-right: 1rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.border-t {
    border-top: 1px solid var(--color-gray-200);
}

/* --- Form Styles from Global --- */
.form-input-column {
    flex: 1;
    max-width: 500px;
}

.form-card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    margin: 0 0 0.5rem 0;
}

.form-card-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 1.5rem 0;
}

.form-card-footer {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    margin: 1rem 0 0 0;
}

.form-title {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label,
.form-group legend {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
    font-size: 15px;
    border: none;
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    line-height: 1.5;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input::placeholder {
    color: #adb5bd;
}

.form-input:focus,
.form-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 15px;
}

.form-row .form-group {
    flex: 1 1 0;
    min-width: 120px;
    margin-bottom: 0;
}

.gender-group {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-top: 10px;
}

.gender-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    cursor: pointer;
}

.gender-group input[type="radio"] {
    margin: 0;
}

fieldset {
    border: none;
    padding: 0;
}

.submit-btn {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: #FF8C42;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}


.submit-btn:hover {
    background-color: #FF6B1A;
}



/* Auth Page Utilities */
.max-w-md {
    max-width: 28rem;
}

.min-h-screen {
    min-height: 100vh;
}

.bg-gray-50 {
    background-color: #f9fafb;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.border-gray-100 {
    border-color: #f3f4f6;
}

.bg-black {
    background-color: #000;
}

.hover\:bg-gray-800:hover {
    background-color: #1f2937;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Hover Styles for Indigo Tags */
.hover\:bg-indigo-200:hover {
    background-color: var(--color-indigo-200);
}

@media (min-width: 64rem) {
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.w-2 {
    width: 0.5rem;
}

.h-2 {
    height: 0.5rem;
}

.bg-orange-500 {
    background-color: #f97316;
}

.bg-blue-500 {
    background-color: #3b82f6;
}

.bg-green-500 {
    background-color: #22c55e;
}

.feature-dot {
    display: inline-block;
}

/* Account Menu Styles */
.account-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-menu-item {
    display: block;
    padding: 12px 16px;
    color: #374151;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    font-size: 15px;
    font-weight: 500;
}

.account-menu-item:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.account-menu-item.active {
    background-color: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
}

.account-menu-item-button {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    color: #dc2626;
}

.account-menu-item-button:hover {
    background-color: #fee2e2;
    color: #991b1b;
}

.account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* Whitespace Utilities */
.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-normal {
    white-space: normal;
}

/* Width Utilities */
.w-fit {
    width: fit-content;
}

.two-column-equal .left-column,
.two-column-equal .right-column {
    flex: 1;
}

:where(.divide-y>:not(:last-child)) {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

:where(.divide-gray-100>:not(:last-child)) {
    border-color: var(--color-gray-100);
}

:where(.divide-gray-200>:not(:last-child)) {
    border-color: var(--color-gray-200)
}

.justify-between {
    justify-content: space-between;
}

.h-px {
    height: 1px;
}

.top-1\/2 {
    top: 50%;
}

.-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

.right-3 {
    right: calc(var(--spacing) * 3);
}

/* Wallet Mobile Layout Utilities */
.flex-col-reverse {
    flex-direction: column-reverse;
}

.items-start {
    align-items: flex-start;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-4 {
    gap: 1rem;
}

.w-full {
    width: 100%;
}

@media (min-width: 768px) {
    .md-flex-row {
        flex-direction: row;
    }

    .md-items-start {
        align-items: flex-start;
    }

    .md-gap-4 {
        gap: 1rem;
    }

    .md-w-auto {
        width: auto;
    }

    .md-text-right {
        text-align: right;
    }
}

/* Wallet Mobile Show More */
@media (max-width: 767px) {
    .cgs-mobile-hidden {
        display: none !important;
    }
}

.md-hidden {
    display: block;
}

@media (min-width: 768px) {
    .md-hidden {
        display: none !important;
    }
}

/* Wallet Page: Reverse column order on mobile (Right Column first) */
@media (max-width: 768px) {
    .two-column-layout.wallet-page {
        flex-direction: column-reverse;
    }
}


.main-luan-giai {
    display: flex
}

.noi-dung-luan-giai {
    margin-top: 20px
}

.luan-giai-content {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.8
}

.luan-giai-content p {
    text-align: justify;
    margin-bottom: 1.2em
}

.luan-giai-content h3 {
    color: #1e40af;
    border-bottom: 2px solid #3b82f6;
    margin-top: 2.5em;
    margin-bottom: 1.5em;
    padding-bottom: 12px;
    font-size: 22px;
    font-weight: 700
}

.luan-giai-content .cung-item h4 {
    display: none
}

.luan-giai-content .cung-item h3 {
    margin-top: 0
}

.luan-giai-content .cung-item ul li {
    margin-bottom: 20px
}

.luan-giai-content h3:first-child {
    margin-top: 0
}

.luan-giai-dai-van .dai-van-item h4 {
    display: none
}

.luan-giai-dai-van .dai-van-item ul li {
    margin-bottom: 20px
}

.luan-giai-dai-van .dai-van-item h3 {
    margin-top: 0
}

.luan-giai-content h4 {
    color: #2563eb;
    border-left: 4px solid #3b82f6;
    margin-top: 1.8em;
    margin-bottom: 1em;
    padding-left: 12px;
    font-size: 15px;
    font-weight: 600
}

.luan-giai-content .uppercase {
    text-transform: uppercase;
    color: #1e40af;
    margin-bottom: 1.2em;
    font-size: 18px;
    font-weight: 600;
    display: block
}

.luan-giai-content .tong-quan {
    background: #f8fafc;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    margin-bottom: 2.5em;
    padding: 1.5em
}

.luan-giai-content .luan-giai-cung {
    margin-bottom: 2.5em
}

.luan-giai-content .cung-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 2em;
    padding: 1.2em;
    transition: box-shadow .2s
}

.luan-giai-content .cung-item:hover {
    box-shadow: 0 2px 8px #00000014
}

.luan-giai-content .cung-item h4 {
    margin-top: 0
}

.luan-giai-content .luan-giai-dai-van {
    margin-bottom: 2.5em
}

.luan-giai-content .dai-van-item {
    background: #f9fafb;
    border-left: 4px solid #10b981;
    border-radius: 6px;
    margin-bottom: 2em;
    padding: 1.2em
}

.luan-giai-content ol,
.luan-giai-content ul {
    margin: revert;
    padding: revert;
    list-style: revert
}


.luan-giai-content .dai-van-item h4 {
    color: #059669;
    border-left: none;
    margin-top: 0;
    padding-left: 0;
}

.luan-giai-preview {
    color: #6b7280;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 1em;
    font-style: italic;
}

/* Utility classes for spinner */
.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.border-b-2 {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.border-indigo-600 {
    border-color: var(--color-indigo-600);
}

.kk-star-ratings .kksr-legend {
    font-size: 15px !important;
}

/* Social Share Buttons */
.share-this-post {
    margin-top: 2rem;
    padding-top: 15px;
    border-top: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.share-label {
    font-weight: 600;
    color: var(--color-gray-700);
    font-size: 0.95rem;
}

.share-buttons {
    display: flex;
    gap: 0.75rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    transition: transform 0.2s ease, opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

.share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.share-btn svg {
    width: 18px;
    height: 18px;
}

.share-facebook {
    background-color: #1877F2;
}

.share-x {
    background-color: #000000;
}

.share-linkedin {
    background-color: #0A66C2;
}

.share-pinterest {
    background-color: #BD081C;
}

.share-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

@media (max-width: 640px) {
    .share-this-post {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
}

.share-threads {
    background-color: #000000;
}

/* Remove background from social buttons that have their own colored icons */
.share-facebook,
.share-pinterest,
.share-linkedin,
.share-instagram {
    background: transparent !important;
}

/* Make detailed icons full size to match the button container */
.share-facebook svg,
.share-pinterest svg,
.share-linkedin svg,
.share-instagram svg {
    width: 100%;
    height: 100%;
}

/* Introduction Section Styles */
.intro-text-teal {
    color: #0d7377;
}

/* Ecosystem Block Tweaks */
.ecosystem-card {
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    /* Ensure full height for grid */
}

.ecosystem-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .ecosystem-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        /* Two rows */
        grid-template-areas:
            "item1 item2 item2 item5"
            "item1 item3 item4 item5";
    }

    .area-1 {
        grid-area: item1;
    }

    .area-2 {
        grid-area: item2;
    }

    .area-3 {
        grid-area: item3;
    }

    .area-4 {
        grid-area: item4;
    }

    .area-5 {
        grid-area: item5;
    }
}

/* Typography Extensions */
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}


/* Mission Section Styles */
.mission-card {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .mission-card {
        flex-direction: row;
    }
}

.bg-teal-custom {
    background-color: #2b9d97;
    /* Lighter teal from design for card bg */
}

/* Specific text colors from design */
.text-teal-dark {
    color: #0d7377;
}

.text-orange-custom {
    color: #ed7d31;
}

/* Vision Section Styles */
.timeline-border {
    border-top: 2px solid #2b9d97;
    position: relative;
    padding-top: 0;
    /* Important for connection */
}

.timeline-border .timeline-marker {
    width: 2px;
    height: 24px;
    background-color: #2b9d97;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-label {
    background: url(needle-underline.png) no-repeat bottom center;
    background-size: contain;
    padding-bottom: 13px;
}

/* Rainbow Background Effect */
.rainbow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    /* Behind content */
    pointer-events: none;
}

.rainbow {
    height: 50vh;
    width: 0;
    top: 0;
    position: absolute;
    transform: rotate(10deg);
    transform-origin: top right;
    z-index: 0;
}

@keyframes slide {
    from {
        right: -25vw;
    }

    to {
        right: 125vw;
    }
}

.h-shadow {
    box-shadow: 0 0 50vh 40vh white;
    width: 50vw;
    height: 0;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}

.v-shadow {
    box-shadow: 0 0 25vw 15vw white;
    width: 0;
    height: 50vh;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}

.v-shadow-right {
    box-shadow: 0 0 35vw 25vw white;
    width: 0;
    height: 50vh;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}

.rainbow:nth-child(1) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(232 121 249), 130px 0 80px 40px white;
    animation: 44.10s linear infinite slide;
    animation-delay: -1.80s;
}

.rainbow:nth-child(2) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(94 234 212), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 43.20s linear infinite slide;
    animation-delay: -3.60s;
}

.rainbow:nth-child(3) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(94 234 212), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 42.30s linear infinite slide;
    animation-delay: -5.40s;
}

.rainbow:nth-child(4) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(94 234 212), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 41.40s linear infinite slide;
    animation-delay: -7.20s;
}

.rainbow:nth-child(5) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 40.50s linear infinite slide;
    animation-delay: -9.00s;
}

.rainbow:nth-child(6) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 39.60s linear infinite slide;
    animation-delay: -10.80s;
}

.rainbow:nth-child(7) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(96 165 250), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 38.70s linear infinite slide;
    animation-delay: -12.60s;
}

.rainbow:nth-child(8) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(96 165 250), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 37.80s linear infinite slide;
    animation-delay: -14.40s;
}

.rainbow:nth-child(9) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 36.90s linear infinite slide;
    animation-delay: -16.20s;
}

.rainbow:nth-child(10) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(96 165 250), 0 0 50px 25px rgb(94 234 212), 50px 0 50px 25px rgb(232 121 249), 130px 0 80px 40px white;
    animation: 36.00s linear infinite slide;
    animation-delay: -18.00s;
}

.rainbow:nth-child(11) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 35.10s linear infinite slide;
    animation-delay: -19.80s;
}

.rainbow:nth-child(12) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 34.20s linear infinite slide;
    animation-delay: -21.60s;
}

.rainbow:nth-child(13) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 33.30s linear infinite slide;
    animation-delay: -23.40s;
}

.rainbow:nth-child(14) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 32.40s linear infinite slide;
    animation-delay: -25.20s;
}

.rainbow:nth-child(15) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(96 165 250), 0 0 50px 25px rgb(94 234 212), 50px 0 50px 25px rgb(232 121 249), 130px 0 80px 40px white;
    animation: 31.50s linear infinite slide;
    animation-delay: -27.00s;
}

.rainbow:nth-child(16) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(94 234 212), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 30.60s linear infinite slide;
    animation-delay: -28.80s;
}

.rainbow:nth-child(17) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 29.70s linear infinite slide;
    animation-delay: -30.60s;
}

.rainbow:nth-child(18) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(96 165 250), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 28.80s linear infinite slide;
    animation-delay: -32.40s;
}

.rainbow:nth-child(19) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 27.90s linear infinite slide;
    animation-delay: -34.20s;
}

.rainbow:nth-child(20) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(96 165 250), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 27.00s linear infinite slide;
    animation-delay: -36.00s;
}

.rainbow:nth-child(21) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(96 165 250), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 26.10s linear infinite slide;
    animation-delay: -37.80s;
}

.rainbow:nth-child(22) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 25.20s linear infinite slide;
    animation-delay: -39.60s;
}

.rainbow:nth-child(23) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(232 121 249), 130px 0 80px 40px white;
    animation: 24.30s linear infinite slide;
    animation-delay: -41.40s;
}

.rainbow:nth-child(24) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(94 234 212), 0 0 50px 25px rgb(232 121 249), 50px 0 50px 25px rgb(96 165 250), 130px 0 80px 40px white;
    animation: 23.40s linear infinite slide;
    animation-delay: -43.20s;
}

.rainbow:nth-child(25) {
    box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px rgb(232 121 249), 0 0 50px 25px rgb(96 165 250), 50px 0 50px 25px rgb(94 234 212), 130px 0 80px 40px white;
    animation: 22.50s linear infinite slide;
    animation-delay: -45.00s;
}

.underline-hw {
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    color: #ff8c43;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
}

/* Button Disabled State Override */
/* ==========================================================================
   WIZARD STEPPER STYLES
   ========================================================================== */
.wizard-stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0;
    margin-bottom: 20px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    flex: 1;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step-active .step-circle {
    border-color: #5850ec;
    color: #5850ec;
    background-color: #f5f3ff;
}

.step-complete .step-circle {
    background-color: #5850ec;
    border-color: #5850ec;
    color: #fff;
}

.step-complete .step-circle::after {
    content: "✓";
    font-size: 14px;
}

.step-complete .step-circle {
    font-size: 0;
    /* Hide number */
}

.step-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.step-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.step-desc {
    font-size: 12px;
    color: #6b7280;
}

.step-connector {
    flex: 1;
    height: 2px;
    background-color: #e5e7eb;
    margin-top: 16px;
    /* Half of circle height */
    position: relative;
    z-index: 1;
}

/* Specific Step Controls */


.radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #4b5563;
}

.radio-label input {
    margin: 0;
}

.date-inputs {
    gap: 8px;
}

.wizard-select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #374151;
    background-color: white;
}

.btn-wizard-search {
    padding: 6px 16px;
    background-color: #5850ec;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    width: 80px;
}

.btn-wizard-search:hover {
    background-color: #4338ca;
}

.btn-wizard-search:disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    border: 1px solid #d1d5db;
}

/* Save Button in Table */
.btn-save-hour {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 11px;
    color: #4b5563;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

.btn-save-hour:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}

.btn-save-hour svg {
    color: #6b7280;
}

.btn-save-hour:hover svg {
    color: #374151;
}

/* Wizard - Gender Card Styles */

.gender-option {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.gender-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gender-option input[type="radio"]:checked+.gender-card .gender-big-text {
    background: #5850ec;
    color: #fff;
}

.gender-sub-text {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.gender-option input[type="radio"]:checked+.gender-card .gender-sub-text {
    color: #4f46e5;
}

/* Fix vertical alignment for gender text */
.gender-big-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

::marker {
    display: none;
}