.site-content {
    min-height: 87vh;
    padding: 0 15px;
}

.both-sidebars .site-content {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

/* Single Post -------------------------------- */

.both-sidebars .widget-area .widget,
.both-sidebars.separate-containers .inside-article {
    border-radius: 12px !important;
    box-shadow: 0 0 10px 0px rgb(0 0 0 / 5%) !important;
}

/* Widget ---*/

.both-sidebars .widget-area .widget {
    padding: 30px;
}

/* Sidebar left */

.both-sidebars .is-left-sidebar.sidebar {
    order: 0;
    width: 68px;
}

.both-sidebars .is-left-sidebar .widget {
    padding: 25px 15px;
}

/* Sidebar right */

.both-sidebars .is-right-sidebar.sidebar {
    order: 2;
}

.both-sidebars .is-right-sidebar .widget {
    padding: 30px;
}

@media (max-width:768.5px) {
    .both-sidebars .is-right-sidebar .inside-right-sidebar {
        margin-top: 20px !important;
    }
}

@media (min-width:576.6px) {
    .both-sidebars .is-right-sidebar.sidebar {
        width: 200px;
    }
}

@media (max-width:576.5px) {
    .both-sidebars .is-right-sidebar.sidebar {
        width: calc(100% - 68px);
    }

    .both-sidebars .is-right-sidebar .inside-right-sidebar {
        margin-left: 15px;
    }
}

/* Content area */

@media (min-width:768.6px) {
    .both-sidebars .site-content .content-area {
        width: calc(100% - 68px - 200px) !important;
        flex: 1 1;
    }
}

@media (min-width:576.6px) and (max-width:768.5px) {
    .both-sidebars .site-content .content-area {
        width: calc(100% - 68px) !important;
    }

    .both-sidebars #main {
        margin-left: 15px;
    }
}

@media (min-width:576.6px) {
    .both-sidebars .site-content .content-area {
        order: 1;
    }
}

@media (max-width:576.5px) {
    .both-sidebars .site-content .content-area {
        width: 100%;
    }

    .both-sidebars.separate-containers .inside-article {
        padding: 30px 20px;
    }
}

/* Alpha */

.tdpl-alpha-widget,
.tdpl-alpha-archive {
    display: grid;
    gap: 12px;
}

.tdpl-alpha-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tdpl-alpha-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 90px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    text-decoration: none;
}

.tdpl-alpha-item {
    width: 38px;
    padding: 0;
}

.tdpl-alpha-item-other {
    width: auto;
    min-width: 38px;
    padding: 0 10px;
}

.tdpl-alpha-item.is-active {
    border-color: currentColor;
}

.tdpl-alpha-results {
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.tdpl-alpha-posts {
    margin: 0;
    padding-left: 18px;
    list-style: decimal;
}

.tdpl-alpha-post {
    margin: 6px 0;
    font-size: 15px;
}

.tdpl-alpha-empty,
.tdpl-alpha-hint {
    opacity: 0.75;
}

.tdpl-alpha-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.tdpl-alpha-section {
    padding: 20px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.tdpl-alpha-section-title {
    margin: 0 0 10px;
    font-size: 1.25em;
}

.tdpl-alpha-section-title a {
    font-size: 40px;
    font-weight: 600;
    text-decoration: none;
}

.tdpl-alpha-section .tdpl-alpha-posts {
    margin-top: 8px;
}

/* =========================================================
   CSS Giao diện Widget (Merged from tdpl-theme-widget)
   ========================================================= */
.giao-dien-container {
    border-radius: 8px;
    font-family: sans-serif;
    color: #333;
}

.giao-dien-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.giao-dien-header strong {
    font-size: 16px;
}

#btn-toggle-ui {
    background: #f1f3f4;
    color: #333;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

#btn-toggle-ui:hover {
    background: #e8eaed;
}

.giao-dien-panel {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 500px;
}

.giao-dien-panel.hidden {
    max-height: 0;
}

.gd-section-title {
    font-size: 14px;
    color: #5f6368;
    margin-bottom: 8px;
}

.gd-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.gd-radio-group label {
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
}

.gd-radio-group input[type="radio"] {
    margin-right: 8px;
    accent-color: #1a73e8;
}

.gd-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 0 0 15px 0;
}

/* DARK MODE STYLES */

.gd-theme-dark .giao-dien-container .gd-section-title,
.gd-theme-dark .giao-dien-container .giao-dien-header {
    color: #9aa0a6 !important;
}

html.gd-theme-dark,
.gd-theme-dark body,
.gd-theme-dark #page,
.gd-theme-dark #wrapper,
.gd-theme-dark #content,
.gd-theme-dark .site,
.gd-theme-dark .site-content,
.gd-theme-dark .site-main,
.gd-theme-dark .site-header,
.gd-theme-dark .site-footer,
.gd-theme-dark .widget,
.gd-theme-dark .post,
.gd-theme-dark article,
.gd-theme-dark section,
.gd-theme-dark aside,
.gd-theme-dark .sidebar,
.gd-theme-dark .comments-area,
.gd-theme-dark footer.site-info,
.gd-theme-dark .separate-containers .inside-article,
.gd-theme-dark .main-navigation,
.gd-theme-dark .main-navigation ul ul,
.gd-theme-dark #ez-toc-container {
    background-color: #202124 !important;
    background-image: none !important;
    border-color: #3c4043 !important;
    color: #e8eaed !important;
}

.gd-theme-dark .both-sidebars .widget-area .widget,
.gd-theme-dark .both-sidebars.separate-containers .inside-article {
    box-shadow: 0 0 3px 1px rgb(0 0 0 / 20%) !important;
}

.gd-theme-dark h1,
.gd-theme-dark h2,
.gd-theme-dark h3,
.gd-theme-dark h4,
.gd-theme-dark h5,
.gd-theme-dark h6,
.gd-theme-dark p,
.gd-theme-dark span,
.gd-theme-dark li,
.gd-theme-dark table,
.gd-theme-dark td,
.gd-theme-dark th,
.gd-theme-dark div {
    color: #e8eaed !important;
}

.gd-theme-dark a {
    color: #8ab4f8 !important;
}

.gd-theme-dark a:hover {
    color: #aecbfa !important;
}

/* Alphabet in Dark Mode */
.gd-theme-dark .tdpl-alpha-item {
    border-color: #3c4043 !important;
}