/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */

.section-header {
  padding: 26px 30px;
  background-color: #fffdfa;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 42%, rgba(255, 251, 242, 0.76) 100%),
    url(../images/bg-header.png) !important;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid rgba(203, 146, 28, 0.18) !important;
  min-height: 172px;
}

.section-header:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 50%, rgba(198, 25, 32, 0.09) 0, rgba(198, 25, 32, 0.03) 26%, transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(30, 77, 138, 0.02));
}

.section-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, #b9161f 0%, #d99a24 24%, #1e4d8a 62%, #0b3568 100%);
  box-shadow: 0 -8px 24px rgba(30, 77, 138, 0.08);
}

.school-header {
  min-height: 120px;
  isolation: isolate;
}

.school-header-logo {
  text-align: right;
}

.school-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  padding: 10px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #fff6df 100%);
  border: 1px solid rgba(217, 154, 36, 0.3);
  box-shadow: 0 18px 34px rgba(13, 59, 115, 0.16), inset 0 0 0 6px rgba(255, 255, 255, 0.72);
}

.school-logo-link img {
  display: block;
  max-width: 96px;
  max-height: 96px;
  width: auto;
  height: auto;
}

.school-header-title {
  display: flex;
  align-items: center;
}

/*.section-header,
/*
   LICH CONG TAC - PUBLIC INTERFACE
*/
.work-calendar {
    margin: 0 0 24px;
    color: #203047;
}

.work-calendar a {
    color: #174f8f;
    text-decoration: none;
}

.work-calendar a:hover,
.work-calendar a:focus {
    color: #c8102e;
    text-decoration: none;
}

.work-calendar-panel {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9e5f2;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(24, 68, 118, 0.1);
}

.work-calendar-panel:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #c8102e 0%, #f0b323 38%, #1e5f9f 72%, #0d7f61 100%);
}

.work-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    background:
        linear-gradient(135deg, rgba(30, 95, 159, 0.09), rgba(240, 179, 35, 0.1)),
        #f8fbff;
    border-bottom: 1px solid #dfeaf5;
}

.work-calendar-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.work-calendar-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #c8102e, #1e5f9f);
    box-shadow: 0 8px 18px rgba(30, 95, 159, 0.22);
}

.work-calendar-heading h2,
.work-calendar-heading p,
.work-detail-title h1 {
    margin: 0;
}

.work-calendar-heading h2 {
    color: #123d6b;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.work-calendar-heading p {
    margin-top: 3px;
    color: #69798c;
    font-size: 13px;
}

.work-calendar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.work-calendar-actions.btn-group > .btn {
    float: none;
    margin-left: 0;
    border-radius: 6px !important;
}

.work-calendar-actions .btn {
    color: #174f8f;
    border-color: #c9d9ea;
    background: #fff;
    font-weight: 600;
}

.work-calendar-actions .btn:hover,
.work-calendar-actions .btn:focus {
    color: #fff;
    border-color: #1e5f9f;
    background: #1e5f9f;
}

.work-calendar-body {
    padding: 18px 22px 22px;
}

/* Premium Work Calendar Navigation Tabs */
.work-calendar-navigation {
    background: #f8fbff;
    padding: 0 22px;
    border-bottom: 1px solid #dfeaf5;
}
.work-calendar-navigation .work-nav-tabs {
    border-bottom: none;
    margin: 0;
}
.work-calendar-navigation .work-nav-tabs > li {
    margin-bottom: 0;
}
.work-calendar-navigation .work-nav-tabs > li > a {
    border: none !important;
    background: transparent !important;
    color: #5a6e85;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent !important;
    border-radius: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.work-calendar-navigation .work-nav-tabs > li > a:hover {
    color: #1e5f9f;
    border-bottom-color: #cbdcf0 !important;
}
.work-calendar-navigation .work-nav-tabs > li.active > a,
.work-calendar-navigation .work-nav-tabs > li.active > a:hover,
.work-calendar-navigation .work-nav-tabs > li.active > a:focus {
    border: none !important;
    background: transparent !important;
    color: #c8102e !important;
    border-bottom: 3px solid #c8102e !important;
}
.work-calendar-navigation .work-nav-tabs > li > a > i {
    font-size: 16px;
}

.work-calendar-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #fff8e8;
    border: 1px solid #f1d897;
    border-radius: 8px;
}

.work-calendar-filter form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.work-calendar-filter label {
    margin: 0;
    color: #7a5711;
    font-weight: 700;
}

.work-calendar-filter .form-control {
    min-width: 120px;
    border-color: #e0c36c;
    box-shadow: none;
}

.work-calendar-scroll {
    overflow-x: auto;
    border: 1px solid #d7e2ef;
    border-radius: 8px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.work-calendar-scroll::-webkit-scrollbar {
    height: 8px;
}

.work-calendar-scroll::-webkit-scrollbar-track {
    background: #edf3f8;
}

.work-calendar-scroll::-webkit-scrollbar-thumb {
    background: #9bb6d4;
    border-radius: 8px;
}

.work-calendar-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.work-calendar-table > thead > tr > th {
    padding: 12px 10px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    border: 0;
    background: linear-gradient(180deg, #1e5f9f 0%, #174f8f 100%);
}

.work-calendar-table > tbody > tr > td {
    border-top: 1px solid #e3edf7;
    border-left: 1px solid #e3edf7;
    vertical-align: top;
}

.work-calendar-table > tbody > tr > td:first-child {
    border-left: 0;
}

.weekly-table .work-day-heading {
    width: 150px;
}

.weekly-table .work-day-cell {
    padding: 16px 10px;
    text-align: center;
    vertical-align: middle;
    background: linear-gradient(180deg, #f8fbff, #eef6ff);
}

.weekly-table .work-day-cell strong {
    display: block;
    color: #123d6b;
    font-size: 16px;
}

.weekly-table .work-day-cell span {
    display: inline-block;
    margin-top: 4px;
    color: #6d7f92;
    font-size: 12px;
}

.work-session-cell {
    min-height: 92px;
    padding: 10px;
    background: #fbfdff;
}

.work-empty {
    padding: 18px 8px;
    color: #9aa9b8;
    text-align: center;
    font-style: italic;
    background: repeating-linear-gradient(-45deg, #f7fafc 0, #f7fafc 8px, #eef4f9 8px, #eef4f9 16px);
    border: 1px dashed #d7e2ef;
    border-radius: 6px;
}

.work-session-cell .work-empty + .work-empty {
    display: none;
}

.work-event-card {
    position: relative;
    margin-bottom: 10px;
    padding: 10px 11px 10px 13px;
    overflow: hidden;
    border: 1px solid #dce8f4;
    border-left: 5px solid var(--event-color, #1e5f9f);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(27, 76, 130, 0.08);
}

.work-event-card:last-child {
    margin-bottom: 0;
}

.work-event-title {
    display: block;
    color: #123d6b;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-word;
}

.work-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 7px;
    color: #4f6d8a;
    font-size: 12px;
    line-height: 1.4;
}

.work-event-meta i,
.work-event-host i {
    color: #c8102e;
}

.work-event-host {
    margin-top: 5px;
    color: #68798b;
    font-size: 12px;
}

.monthly-grid {
    min-width: 820px;
}

.monthly-grid .work-month-cell {
    height: 128px;
    padding: 9px;
    background: #fff;
}

.monthly-grid .work-month-cell.other-month {
    background: #f4f7fa;
}

.work-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin-bottom: 7px;
    padding: 0 6px;
    color: #123d6b;
    font-weight: 700;
    border-radius: 50%;
    background: #eef6ff;
}

.monthly-grid .today .work-day-number,
.monthly-grid .current-day .work-day-number {
    color: #fff;
    background: #c8102e;
}

.work-month-events {
    max-height: 82px;
    overflow-y: auto;
    padding-right: 2px;
}

.work-month-event {
    margin-bottom: 4px;
    border-radius: 5px;
    background: var(--event-color, #1e5f9f);
}

.work-month-event a {
    display: block;
    padding: 4px 6px;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-month-event a:hover,
.work-month-event a:focus {
    color: #fff;
    background: rgba(0, 0, 0, 0.12);
}

.work-month-event span {
    font-weight: 700;
}

.work-detail-main {
    padding: 22px;
}

.work-detail-title {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dfeaf5;
}

.work-detail-title h1 {
    color: #123d6b;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
}

.work-detail-info {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid #dfeaf5;
    border-radius: 8px;
}

.work-detail-info .table {
    margin: 0;
}

.work-detail-info th {
    width: 190px;
    color: #123d6b;
    background: #f3f8fd;
}

.work-detail-section {
    margin-top: 24px;
}

.work-detail-section h3,
.work-detail-field h4 {
    margin: 0 0 12px;
    padding-left: 12px;
    color: #123d6b;
    font-size: 18px;
    font-weight: 700;
    border-left: 4px solid #c8102e;
}

.work-detail-content {
    color: #2d3e50;
    font-size: 14px;
    line-height: 1.7;
}

.work-detail-body {
    margin-top: 14px;
}

.work-detail-field {
    margin-top: 18px;
}

.work-detail-field div {
    padding: 12px;
    background: #f8fbff;
    border: 1px solid #e1ebf5;
    border-radius: 7px;
}

.work-side-panel {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #d9e5f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(24, 68, 118, 0.08);
}

.work-side-heading {
    padding: 11px 13px;
    color: #fff;
    font-weight: 700;
    background: #1e5f9f;
}

.work-side-heading i {
    margin-right: 5px;
    color: #f0b323;
}

.work-side-body {
    padding: 12px 13px;
}

.work-side-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-side-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #dbe7f2;
}

.work-side-list li:last-child {
    border-bottom: 0;
}

.work-attachments {
    padding: 0;
}

.work-attachments a {
    display: block;
    padding: 11px 13px;
    border-bottom: 1px solid #e3edf7;
}

.work-attachments a:last-child {
    border-bottom: 0;
}

.work-attachments strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-attachments span {
    display: block;
    margin-top: 3px;
    color: #77889a;
    font-size: 12px;
}

.work-list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.work-list-tabs > li {
    float: none;
}

.work-list-tabs > li > a {
    border: 1px solid #d5e2ef;
    border-radius: 6px;
    color: #174f8f;
    background: #f8fbff;
}

.work-list-tabs > li.active > a,
.work-list-tabs > li.active > a:hover,
.work-list-tabs > li.active > a:focus {
    color: #fff;
    border-color: #1e5f9f;
    background: #1e5f9f;
}

.work-list-table {
    min-width: 860px;
}

.work-list-table td,
.work-list-table th {
    vertical-align: middle !important;
}

.work-empty-row {
    padding: 22px !important;
    color: #7b8b9b;
    text-align: center;
}

.work-table-actions .btn {
    margin: 0 2px;
}

@media (max-width: 991px) {
    .work-calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .work-calendar-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .work-calendar-panel,
    .work-calendar-scroll,
    .work-side-panel {
        border-radius: 6px;
    }

    .work-calendar-toolbar,
    .work-calendar-body,
    .work-detail-main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .work-calendar-heading {
        align-items: flex-start;
    }

    .work-calendar-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .work-calendar-heading h2 {
        font-size: 18px;
    }

    .work-calendar-actions .btn {
        padding: 6px 8px;
        font-size: 12px;
    }

    .work-calendar-filter,
    .work-calendar-filter form {
        align-items: stretch;
        flex-direction: column;
    }

    .work-calendar-filter .form-control {
        width: 100%;
    }

    .work-calendar-table {
        min-width: 690px;
    }

    .weekly-table .work-day-heading {
        width: 120px;
    }

    .weekly-table .work-day-cell strong {
        font-size: 14px;
    }

    .work-session-cell {
        padding: 8px;
    }

    .monthly-grid {
        min-width: 760px;
    }

    .monthly-grid .work-month-cell {
        height: 116px;
        padding: 7px;
    }

    .work-detail-title h1 {
        font-size: 20px;
    }

    .work-detail-info th {
        width: 135px;
    }

    .work-list-table {
        min-width: 780px;
    }
}

#footer {
  padding: 30px;
  background-color: #fffee5;
  background-image: url(../images/bg-header.png) !important;
  background-position: center center;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-bottom-color: transparent !important;
  min-height: fit-content;
}*/

@media (max-width: 767.98px) {
    .section-header {
        padding: 18px 12px 20px !important;
        min-height: 0;
        background-size: auto 100% !important;
        background-position: center top;
    }
    #header {
        text-align: center;
    }
    .school-header {
        display: block !important;
        min-height: 0;
    }
    .school-header-logo {
        text-align: center;
        margin-bottom: 10px;
    }
    .school-logo-link {
        width: 88px;
        height: 88px;
        padding: 8px;
        box-shadow: 0 12px 24px rgba(13, 59, 115, 0.14), inset 0 0 0 4px rgba(255, 255, 255, 0.72);
    }
    .school-logo-link img {
        max-width: 72px;
        max-height: 72px;
    }
    .school-header-title {
        display: block;
    }
    .sitebannertext {
        padding: 0;
        border-left: 0;
    }
    .sitebannertext .sn{
        font-size:13px!important;
        margin-bottom: 5px;
    }
    .sitebannertext .sd{
        font-size:20px!important;
        line-height: 1.22;
        max-width: none;
    }
    #footer {
        padding: 0!important;
        background-size: auto!important;
    }

    .footerNav2{
        font-size: 10px!important;
        text-align: center!important;
    }

    /* ĐỒNG BỘ VÀ TỐI ƯU HÓA MENU GIAO DIỆN DI ĐỘNG */
    
    /* 1. Nâng cấp khối bọc chính của navigation */
    .section-nav {
        z-index: 99999 !important; /* Luôn nổi trên các block khác */
    }

    #menusite {
        z-index: 99999 !important;
        position: absolute !important; /* Bắt buộc sử dụng absolute để JS checkWidthMenu nhận diện đúng chế độ Mobile */
    }

    /* 2. Style nút Toggle (nút mở menu) */
    #menusite .navbar-toggle {
        background-color: #ffdd57 !important; /* Đồng bộ màu vàng gold */
        border-color: #ffdd57 !important;
        padding: 8px 12px !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        border-radius: 4px !important;
        left: 15px !important;
        position: absolute !important;
    }

    #menusite .navbar-toggle .icon-bar {
        background-color: #1e4d8a !important; /* Vạch ngang màu xanh navy */
    }

    #menusite .navbar-toggle:hover,
    #menusite .navbar-toggle:focus {
        background-color: #e6c53f !important;
    }

    /* 3. Khung chứa danh sách menu khi xổ xuống (Collapse) */
    #menusite .navbar-collapse {
        background-color: #1e4d8a !important; /* Màu nền xanh navy đậm đồng bộ */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
        border-top: 2px solid #ffdd57 !important; /* Viền vàng phân tách */
        z-index: 99999 !important;
        position: absolute !important;
        width: 100% !important;
        left: 0 !important;
        top: 50px !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }

    /* 4. Định dạng các liên kết menu cấp cha */
    #menusite .navbar-default .navbar-nav > li > a {
        background-color: #1e4d8a !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 13px 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        height: auto !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #menusite .navbar-default .navbar-nav > li > a:hover,
    #menusite .navbar-default .navbar-nav > li > a:focus,
    #menusite .navbar-default .navbar-nav > li.active > a {
        background-color: #0d3b73 !important; /* Màu xanh đậm hơn */
        color: #ffdd57 !important; /* Chữ vàng */
    }

    /* 5. Căn chỉnh mũi tên (Caret) mở rộng danh mục con */
    #menusite .navbar-default .navbar-nav > li > a > .caret {
        position: absolute !important;
        width: 45px !important;
        height: 100% !important;
        right: 0 !important;
        top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    #menusite .navbar-default .navbar-nav > li > a > .caret:before {
        font-size: 14px !important;
    }

    /* 6. Danh mục con cấp 1 (Dropdown/Submenu) */
    #menusite .dropdown-submenu {
        background-color: #0d3b73 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #menusite .dropdown-submenu li a {
        background-color: #0d3b73 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        padding: 10px 20px 10px 35px !important; /* Thụt đầu dòng */
        font-size: 13.5px !important;
        font-weight: 500 !important;
        text-transform: none !important; /* Chữ thường */
        line-height: 1.5 !important;
        display: block !important;
        height: auto !important;
    }

    #menusite .dropdown-submenu li a:hover,
    #menusite .dropdown-submenu li a:focus {
        background-color: #0a2d59 !important;
        color: #ffdd57 !important;
        text-decoration: none !important;
    }
}

.sitebannertext {
  width: 100%;
  color: #b9161f !important;
  text-transform: uppercase;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 4px 0 4px 22px;
  border-left: 4px solid #d99a24;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
}

.sitebannertext .sn {
  display: inline-block;
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px;
  line-height: 1.25;
  color: #b97a12;
  letter-spacing: 0;
}
.sitebannertext .sd {
  max-width: 980px;
  font-size: 31px;
  line-height: 1.18;
  font-weight: bold;
  color: #e20d16;
  letter-spacing: 0;
}

/* =========================================================
   NÂNG CẤP GIAO DIỆN MENU CHÍNH (SECTION-NAV)
   ========================================================= */

.section-nav {
  background: linear-gradient(90deg, #1e4d8a 0%, #0d3b73 100%) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
  border-bottom: 2px solid #ffdd57 !important; /* Dải phân cách màu vàng sang trọng */
}

/* Khử nền xám mặc định của khung chứa menu */
.second-nav .bg {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

#menusite,
#menusite .navbar,
#menusite .navbar-default,
#menusite .navbar-collapse {
  background: transparent !important;
  border: none !important;
  margin-bottom: 0;
  min-height: 50px;
  box-shadow: none !important;
}

/* 1. Nút Home đặc biệt */
#menusite .navbar-default .navbar-nav > li > a.home {
  font-size: 16px;
  padding: 15px 22px;
  color: #ffdd57 !important; /* Icon home màu vàng nổi bật */
  background: rgba(0, 0, 0, 0.15) !important;
}

#menusite .navbar-default .navbar-nav > li > a.home:hover {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* 2. Style chung cho thẻ a menu chính */
#menusite .navbar-default .navbar-nav > li > a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #ffffff !important;
  padding: 15px 20px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 50px;
  display: flex;
  align-items: center;
}

/* Hiệu ứng gạch chân khi hover hoặc active */
#menusite .navbar-default .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  background-color: #ffdd57;
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}

#menusite .navbar-default .navbar-nav > li:hover > a::after,
#menusite .navbar-default .navbar-nav > li.active > a::after {
  transform: scaleX(1);
}

#menusite .navbar-default .navbar-nav > li > a:hover,
#menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .active > a,
#menusite .navbar-default .navbar-nav > .active > a:hover,
#menusite .navbar-default .navbar-nav > .active > a:focus,
#menusite .navbar-default .navbar-nav > .open > a,
#menusite .navbar-default .navbar-nav > .open > a:hover,
#menusite .navbar-default .navbar-nav > .open > a:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* 3. Style cho Dropdown Menu (Submenu cấp 1) */
#menusite .dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  padding: 6px 0 !important;
  min-width: 220px;
  text-transform: none; /* Trả về kiểu chữ thường dễ đọc */
  
  /* Hiệu ứng Fade & Slide up mượt mà */
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Kích hoạt hiển thị dropdown khi hover hoặc khi bootstrap add class .open */
#menusite .navbar-nav > li:hover > .dropdown-menu,
#menusite .navbar-nav > li.open > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Từng dòng link trong submenu */
#menusite .dropdown-menu > li {
  border-bottom: 1px solid #f0f4f8 !important;
  position: relative;
}

#menusite .dropdown-menu > li:last-child {
  border-bottom: none !important;
}

#menusite .dropdown-menu > li > a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: #333333 !important;
  padding: 10px 20px !important;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  position: relative;
}

/* Hiệu ứng vạch màu xanh khi hover submenu */
#menusite .dropdown-menu > li > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #0070c0;
  transform: scaleY(0);
  transition: transform 0.2s ease;
}

#menusite .dropdown-menu > li > a:hover,
#menusite .dropdown-menu > li > a:focus,
#menusite .dropdown-menu > .active > a,
#menusite .dropdown-menu > .active > a:hover,
#menusite .dropdown-menu > .active > a:focus {
  background: #f4f7fb !important;
  color: #0070c0 !important;
  padding-left: 24px !important;
}

#menusite .dropdown-menu > li:hover > a::before,
#menusite .dropdown-menu > li.active > a::before {
  transform: scaleY(1);
}

/* 4. Dropdown Submenu cấp 2 (Menu con lồng trong menu con) */
#menusite .dropdown-submenu {
  position: relative;
}

#menusite .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: 0px;
  border-radius: 8px !important;
}

/* Hover mở submenu cấp 2 */
#menusite .dropdown-submenu:hover > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Biểu tượng caret chỉ hướng menu con cấp 2 */
#menusite .dropdown-submenu > a::after {
  content: "\f105"; /* FontAwesome Angle Right */
  font-family: "FontAwesome";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  transition: color 0.2s ease;
}

#menusite .dropdown-submenu:hover > a::after {
  color: #0070c0;
}

.sub-list-icon > li:first-child > *:before, .cat-icon:before {
    content: url(http://localhost:81/mttq/uploads/hethong/fav.ico);
        margin-right: 5px;
    margin-top: 0px;
}

.fix_banner_left {
    left: 150px!important;
}

.fix_banner_right {
    right: 150px!important;
}

.panel {
    border-radius: 0px!important;
}

.panel-heading {
    background-image: none!important;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 10px;
}

.panel-default>.panel-heading {
    color: #ffffff;
    background-color: #1e4d8a;
}

/* Tăng cường độ tương phản cho liên kết và văn bản bên trong panel-heading */
.panel-default>.panel-heading a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.panel-default>.panel-heading a:hover {
    color: #ffdd57 !important; /* Màu vàng sáng khi hover để làm nổi bật liên kết */
    text-decoration: none;
}

.panel-default>.panel-heading .text-danger {
    color: #ff9b97 !important; /* Màu đỏ nhạt để tương phản tốt trên nền xanh */
    font-weight: bold;
}

.panel-default>.panel-heading .divider {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 5px;
}

.panel-default>.panel-heading .panel-title {
    overflow: hidden; /* Xử lý float của em.pull-right */
    line-height: 1.6;
}

h3.cat-icon {
    text-transform: uppercase;
}

.c-powered a {
    text-decoration: none;
    color: #666;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.c-powered span {
    color: #14468f;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.footerNav2 {
    background-color: #ececec;
    color: #666;
    font-size: 12px;
    text-align: right;
}

/* =========================================================
   FOOTER TOP - NANG CAP GIU HOA TIET TRONG DONG
   ========================================================= */

.section-footer-top {
    position: relative;
    overflow: hidden;
    padding: 42px 0 34px !important;
    min-height: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background-color: #0b3568 !important;
    background-image:
        linear-gradient(120deg, rgba(8, 42, 84, 0.96) 0%, rgba(18, 73, 132, 0.9) 48%, rgba(11, 53, 104, 0.96) 100%),
        url(../images/bg-header-footer.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    color: #eef5ff !important;
    box-shadow: inset 0 14px 32px rgba(3, 20, 42, 0.22);
}

.section-footer-top:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 221, 87, 0.18) 0, rgba(255, 221, 87, 0.06) 22%, transparent 48%),
        radial-gradient(circle at 82% 84%, rgba(185, 22, 31, 0.18) 0, rgba(185, 22, 31, 0.04) 26%, transparent 56%);
}

.section-footer-top:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: linear-gradient(90deg, #b9161f 0%, #d99a24 28%, #ffdd57 50%, #1e4d8a 78%, #0b3568 100%);
}

.section-footer-top > .wraper {
    position: relative;
    z-index: 1;
}

.section-footer-top .container {
    max-width: 1320px;
}

.footer-top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.footer-nav-row {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer-col {
    margin-bottom: 16px;
}

.footer-col > * {
    position: relative;
}

.footer-menu-col,
.footer-featured-col,
.footer-site-col {
    color: #eef5ff;
}

.section-footer-top h3,
.section-footer-top .panel-heading,
.section-footer-top .panel-title {
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0;
}

.section-footer-top a {
    color: #f6fbff !important;
    text-decoration: none;
}

.section-footer-top a:hover,
.section-footer-top a:focus {
    color: #ffdd57 !important;
    text-decoration: none;
}

#footer .menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

#footer .menu li {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
}

#footer .menu li a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 12px 9px 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: #eef5ff !important;
    white-space: normal !important;
    line-height: 1.35;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#footer .menu li a:before {
    content: "\f105" !important;
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffdd57 !important;
    font-family: FontAwesome;
    font-size: 13px !important;
    padding-right: 0 !important;
}

#footer .menu li a:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 221, 87, 0.5) !important;
    transform: translateY(-1px);
}

.section-footer-top .panel,
.section-footer-top .panel-primary,
.section-footer-top .panel-default {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 34px rgba(3, 20, 42, 0.18);
}

.section-footer-top .panel-heading {
    border: 0 !important;
    background: linear-gradient(90deg, rgba(255, 221, 87, 0.22), rgba(255, 255, 255, 0.06)) !important;
    padding: 11px 16px !important;
}

.section-footer-top .panel-body {
    background: transparent !important;
    color: #eef5ff;
}

.footer-info-row {
    align-items: center;
}

.qr-code-wraper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 221, 87, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
}

.qr-code-wraper .btn,
.qr-code-wraper .qrcode {
    border: 0 !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #ffdd57, #d99a24) !important;
    color: #082a54 !important;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.section-footer-top .copyright {
    color: rgba(238, 245, 255, 0.88) !important;
    line-height: 1.7;
}

.section-footer-top .copyright span {
    display: inline-block;
    margin-right: 4px;
}

.section-footer-top .copyright a {
    color: #ffdd57 !important;
    font-weight: 600;
}

/* Tối ưu hóa đồng bộ hiển thị block thông tin Cơ quan / Portal Info / Contact Info */
.section-footer-top .company_info,
.section-footer-top .portal_info,
.section-footer-top .contact_info {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.section-footer-top .company_info li,
.section-footer-top .portal_info li,
.section-footer-top .contact_info li {
    margin-bottom: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: rgba(238, 245, 255, 0.9) !important;
    display: flex !important;
    align-items: flex-start !important;
}

.section-footer-top .company_info li:last-child,
.section-footer-top .portal_info li:last-child,
.section-footer-top .contact_info li:last-child {
    margin-bottom: 0 !important;
}

.section-footer-top .company_info li span,
.section-footer-top .portal_info li span,
.section-footer-top .contact_info li span {
    flex: 1 !important;
}

/* Style cho các Icon vàng gold sang trọng */
.section-footer-top .company_info li em,
.section-footer-top .portal_info li em,
.section-footer-top .contact_info li em {
    color: #ffdd57 !important;
    margin-right: 8px !important;
    font-size: 14px !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
}

/* Style nổi bật cho Tên Cơ quan / Tên Cổng thông tin */
.section-footer-top .company_info .company_name,
.section-footer-top .portal_info .portal_name,
.section-footer-top .contact_info .contact_name {
    font-size: 15px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

.section-footer-top .company_info .company_name em,
.section-footer-top .portal_info .portal_name em,
.section-footer-top .contact_info .contact_name em {
    font-size: 15px !important;
}

.footerNav2 {
    background: #071f3d !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border-top: 1px solid rgba(255, 221, 87, 0.18);
}

.footerNav2 .c-powered {
    padding: 2px 0;
    letter-spacing: 0;
}

.footerNav2 .c-powered a {
    color: #ffffff !important;
}

.footerNav2 .c-powered span {
    color: #ffdd57 !important;
}

@media (max-width: 991.98px) {
    .section-footer-top {
        padding: 32px 0 26px !important;
    }

    .footer-nav-row {
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    .footer-col {
        margin-bottom: 18px;
    }
}

@media (max-width: 767.98px) {
    .section-footer-top {
        text-align: left;
        padding: 28px 0 22px !important;
        background-position: center top !important;
    }

    #footer .menu {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .qr-code-wraper {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .footer-site-col {
        text-align: center;
    }

    .section-footer-top .copyright span {
        display: block;
        margin-right: 0;
    }

    .footerNav2 {
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.5;
    }
}

div.news_column ul.related a {
    padding-left: 10px;
}

/* =========================================================
   STYLE MODERN CHO MODULE NEWS (CSS Only)
   ========================================================= */

/* 1. Xử lý khung Panel (Card hóa) */
.news_column .panel {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Đổ bóng mềm */
    border-radius: 8px;
    margin-bottom: 30px;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news_column .panel:hover {
    transform: translateY(-5px); /* Hiệu ứng nhấc lên nhẹ khi di chuột */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* 2. Tiêu đề Block (Category Title) */
.news_column .panel-heading {
    background: #fff !important; /* Xóa nền xám/xanh mặc định */
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
    position: relative;
}

/* Tạo điểm nhấn màu sắc bên trái tiêu đề */
.news_column .panel-heading h3.cat-icon {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding-left: 12px;
}

.news_column .panel-heading h3.cat-icon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background-color: #d9534f; /* Màu chủ đạo (bạn có thể đổi mã màu này) */
    border-radius: 2px;
}

.news_column .panel-heading h3.cat-icon a {
    color: #2c3e50 !important; /* Màu chữ đen xám */
    text-decoration: none;
}

/* 3. Phần nội dung (Body) */
.news_column .panel-body {
    padding: 20px;
    text-align: justify;
    /* min-height: 420px; Đảm bảo các khung cao bằng nhau */
}

/* 4. Tin nổi bật (Featured News) */
/* Tiêu đề tin */
.news_column .panel-body > h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}

.news_column .panel-body > h3 a {
    color: #333;
    transition: color 0.2s;
    text-decoration: none;
}

.news_column .panel-body > h3 a:hover {
    color: #d9534f; /* Màu hover */
}

/* Thông tin ngày tháng/view */
.news_column .text-muted {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 8px;
}

.news_column .text-muted i, 
.news_column .text-muted em {
    color: #ccc;
    margin-right: 3px;
}

/* Ảnh tin nổi bật */
.news_column .imghome {
    border: none !important; /* Bỏ viền thumbnail cũ */
    padding: 0 !important;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-right: 15px !important;
    margin-bottom: 5px !important;
    width: 130px; /* Cố định chiều rộng ảnh cho đều */
    height: 90px;
    object-fit: cover; /* Cắt ảnh không bị méo */
}

/* Đoạn mô tả */
.news_column .panel-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    text-align: justify;
    margin-bottom: 10px;
}

/* Nút Admin (Sửa/Xóa) - Làm nhỏ lại cho gọn */
.news_column .text-right .btn {
    padding: 2px 6px;
    font-size: 11px;
    opacity: 0.3; /* Làm mờ để không rối mắt khách */
}
.news_column .panel:hover .text-right .btn {
    opacity: 1; /* Hiện rõ khi di chuột vào */
}

/* 5. Danh sách tin liên quan (List items) */
.news_column .related.list-items {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f1f1f1;
}

.news_column .related .icon_list {
    padding: 10px 0;
    border-bottom: 1px solid #f9f9f9;
    clear: both; /* Sửa lỗi float */
    min-height: 60px; /* Đảm bảo chiều cao tối thiểu */
    position: relative;
}

.news_column .related .icon_list:last-child {
    border-bottom: none;
}

/* Xử lý ảnh tin liên quan (đang bị float right trong HTML) */
.news_column .related .icon_list img {
    width: 60px !important;
    height: 45px !important;
    object-fit: cover;
    border: none !important;
    padding: 0 !important;
    border-radius: 4px;
    margin-left: 10px !important; /* Cách ra khỏi text */
    margin-bottom: 0 !important;
    /* Giữ nguyên float-right của HTML nhưng làm đẹp hơn */
}

/* Tiêu đề tin liên quan */
.news_column .related .icon_list a.show.h4,
.news_column .related .icon_list a.black {
    font-size: 13px !important;
    line-height: 1.4;
    color: #444;
    font-weight: 500;
    margin: 0;
    display: block;
    /* Kỹ thuật cắt dòng nếu tiêu đề quá dài */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news_column .related .icon_list a:hover {
    color: #d9534f !important;
    text-decoration: none;
}

/* =========================================================
   STYLE MODERN CHO BLOCK PRIMARY (Thăm dò ý kiến, v.v.)
   ========================================================= */

/* 1. Tổng thể khung Panel Primary */
.panel-primary {
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ */
    border-radius: 8px;
    background: #fff;
    margin-bottom: 20px;
    overflow: hidden;
}

/* 2. Phần tiêu đề (Header) */
.panel-primary > .panel-heading {
    background-color: #fff !important; /* Xóa nền xanh mặc định */
    color: #333 !important;
    border-color: #eee;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}

/* Thanh màu điểm nhấn bên trái (Đồng bộ với phần tin tức) */
.panel-primary > .panel-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 15px;
    width: 4px;
    /* Bạn có thể đổi màu này. Ví dụ: #d9534f (đỏ) hoặc #337ab7 (xanh chuẩn) */
    background: #337ab7; 
    border-radius: 0 4px 4px 0;
}

/* 3. Phần nội dung (Body) */
.panel-primary > .panel-body {
    padding: 20px;
}

/* Câu hỏi thăm dò */
.panel-primary h4 {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 15px;
}

/* 4. Tùy biến các lựa chọn (Radio box) */
.panel-primary .radio {
    margin-top: 0;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

/* Hiệu ứng khi di chuột vào câu trả lời */
.panel-primary .radio:hover {
    background-color: #f8fbfd; /* Màu nền xanh rất nhạt */
    border-color: #e1e8ed;
    cursor: pointer;
}

.panel-primary .radio label {
    font-size: 14px;
    color: #555;
    padding-left: 5px;
    width: 100%; /* Để click được cả dòng */
    cursor: pointer;
}

.panel-primary .radio input[type="radio"] {
    margin-top: 3px;
}

/* 5. Khu vực nút bấm (Buttons) */
.panel-primary .panel-body .clearfix {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
    display: flex;       /* Dùng Flexbox để dàn nút */
    gap: 10px;           /* Khoảng cách giữa 2 nút */
}

/* Style chung cho nút bấm */
.panel-primary .btn {
    flex: 1;             /* Hai nút dài bằng nhau */
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    padding: 8px 0;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: opacity 0.2s;
}

.panel-primary .btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Nút Bình chọn (Màu xanh lá - Success) */
.panel-primary .btn-success {
    background-color: #2ecc71; 
}

/* Nút Kết quả (Màu xanh dương hoặc xám - Primary) */
.panel-primary .btn-primary {
    background-color: #3498db; 
}

/* =========================================================
   STYLE RIÊNG CHO BLOCK "PANEL PRIMARY CENTER" (Tin mới)
   ========================================================= */

/* 1. Khung bao ngoài (Panel) */
.panel-primary-center {
    background-color: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 12px !important;
    margin-bottom: 24px;
    position: relative; /* Để căn chỉnh tiêu đề absolute */
    padding-top: 20px; /* Chừa chỗ cho tiêu đề không che nội dung */
    margin-top: 25px; /* Đẩy block xuống một chút để tiêu đề nổi lên */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease;
}

.panel-primary-center:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

/* 2. Tiêu đề "TIN MỚI" (Nổi ở giữa dạng Pill-shape) */
.panel-primary-center .panel-heading {
    background: linear-gradient(135deg, #1e4d8a, #0070c0) !important; /* Gradient xanh dương đậm đà */
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13.5px;
    padding: 7px 24px;
    border-radius: 20px !important;
    border: none;
    letter-spacing: 0.5px;
    
    /* Đưa khối ra giữa và nằm đè lên đường viền trên */
    display: table;
    margin: 0 auto;
    position: absolute;
    top: -16px; /* Kéo lên trên để nằm giữa đường viền */
    left: 0;
    right: 0;
    box-shadow: 0 4px 12px rgba(0, 112, 192, 0.25);
}

/* 3. Phần nội dung bên trong */
.panel-primary-center .panel-body {
    padding: 15px 20px;
}

/* 4. Danh sách tin */
.panel-primary-center .block_groups li {
    padding: 14px 0;
    border-bottom: 1px solid #f2f5f8; /* Đường kẻ liền mảnh tinh tế thay cho nét đứt */
    list-style: none;
    overflow: hidden;
}

/* Bỏ đường kẻ ở tin cuối cùng */
.panel-primary-center .block_groups li:last-child {
    border-bottom: none;
}

/* 5. Ảnh đại diện (Thumbnail) */
.panel-primary-center .block_groups img {
    width: 90px !important; /* Tỷ lệ 3:2 chuẩn hiển thị */
    height: 60px !important;
    object-fit: cover;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    padding: 0;
    margin-right: 14px !important;
    border-radius: 6px !important;
    float: left; /* Đảm bảo ảnh nằm bên trái */
    background: #ffffff;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hiệu ứng phóng to thumbnail khi hover dòng tin */
.panel-primary-center .block_groups li:hover img {
    transform: scale(1.06);
}

/* 6. Tiêu đề bài viết */
.panel-primary-center .block_groups a.show {
    color: #2c3e50; /* Màu xanh đen xám sang trọng */
    font-weight: 600; /* Chữ đậm vừa phải */
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none;
    display: block; /* Để text không bị trôi */
    text-align: left; /* Căn trái để text dàn hàng tự nhiên, không justify gây thưa từ */
    transition: color 0.2s ease;
}

.panel-primary-center .block_groups li:hover a.show {
    color: #0070c0; /* Hover dòng tin đổi màu tiêu đề */
}

/* 7. (Tùy chọn) Ngày tháng */
.panel-primary-center .text-muted {
    font-size: 11.5px;
    color: #8a99a8;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================================
   STYLE BREADCRUMBS MINIMAL (Dạng Text đơn giản)
   ========================================================= */

/* 1. Reset khung bao ngoài */
.breadcrumbs-wrap .breadcrumbs {
    list-style: none;
    margin: 0;
    padding: 10px 0; /* Khoảng cách trên dưới thoáng đãng */
    background: transparent; /* Nền trong suốt */
    font-size: 14px; /* Kích thước chữ vừa phải */
}

/* 2. Cấu trúc dòng (List Item) */
.breadcrumbs-wrap .breadcrumbs li {
    float: left;
    display: inline-block;
    color: #999; /* Màu mặc định cho các ký tự phụ */
        margin-right: -15px;
}

/* 3. Style cho Link (Thẻ A) */
.breadcrumbs-wrap .breadcrumbs li a {
    text-decoration: none;
    color: #555; /* Màu chữ xám đậm nhẹ nhàng */
    font-weight: 500;
    transition: color 0.2s;
    background: transparent !important; /* Xóa nền cũ */
    padding: 0 !important; /* Xóa padding cũ */
    display: inline-block;
}

/* 4. Quan trọng: Xóa bỏ mũi tên tam giác cũ */
.breadcrumbs-wrap .breadcrumbs li a::before,
.breadcrumbs-wrap .breadcrumbs li a::after {
    display: none !important; 
}

/* 5. Tạo dấu gạch chéo (/) ngăn cách */
/* Dùng li + li::before để thêm dấu / vào trước các mục từ mục thứ 2 trở đi */
.breadcrumbs-wrap .breadcrumbs li:before {
    content: "/";
    padding: 0 10px; /* Khoảng cách 2 bên dấu gạch */
    color: #ccc; /* Màu nhạt cho dấu gạch để không rối mắt */
    font-weight: normal;
}

/* 6. Hiệu ứng Hover */
.breadcrumbs-wrap .breadcrumbs li a:hover {
    color: #b9000e; /* Hover chuyển màu đỏ chủ đạo */
    text-decoration: none;
}

/* 7. Mục cuối cùng (Trang hiện tại) */
.breadcrumbs-wrap .breadcrumbs li:last-child a {
    color: #b9000e; /* Màu đỏ nổi bật */
    font-weight: 700; /* In đậm */
    cursor: default;
    pointer-events: none; /* Không cho click lại trang đang xem */
}

/* (Tùy chọn) Thêm icon Ngôi nhà cho trang nhất nếu muốn đẹp hơn */
.breadcrumbs-wrap .breadcrumbs li:first-child a::before {
    /* Nếu bạn muốn hiện icon thay vì chữ Trang nhất, 
       hãy bỏ comment dòng dưới và đảm bảo có FontAwesome */
    
    /* content: "\f015"; 
    font-family: FontAwesome;
    margin-right: 5px;
    display: inline-block !important; */
}

.leader-info {
    text-align: justify;
}

/* =========================================================
   STYLE CUỘN NGANG CHO BLOCK ĐA PHƯƠNG TIỆN
   Target: .block-nv13 nằm trong .panel-primary-center
   ========================================================= */

/* 1. Thiết lập thanh cuộn ngang */
.panel-primary-center .block-nv13 {
    display: flex;           /* Dùng Flexbox để dàn hàng ngang */
    flex-wrap: nowrap;       /* Bắt buộc không xuống dòng */
    overflow-x: auto;        /* Cho phép cuộn ngang */
    overflow-y: hidden;      /* Ẩn cuộn dọc */
    padding: 10px 10px 20px 10px; /* Thêm padding để không bị che bóng khi nhấc card */
    margin-right: -15px;     /* Cân chỉnh lề */
    margin-left: -15px;
    
    /* Làm mượt hành động cuộn */
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
}

/* 2. Thiết lập kích thước item (Hiện 4 cái) và tạo hiệu ứng card */
.panel-primary-center .block-nv13 > div {
    /* Quan trọng: 100% / 4 = 25%.  */
    flex: 0 0 25%; 
    max-width: 25%;
    
    float: none !important;  /* Gỡ bỏ float của Bootstrap cũ */
    display: block;
    padding: 0 10px;         /* Khoảng cách giữa các ảnh */
}

/* Tạo card container wrapper */
.panel-primary-center .block-nv13 > div > div {
    background: #ffffff;
    border: 1px solid #f0f3f6;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}

/* Hiệu ứng nổi bật khi hover card con */
.panel-primary-center .block-nv13 > div:hover > div {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #e1e8ed;
}

/* 3. Tùy chỉnh thanh cuộn cho đẹp (Webkit Browsers) */
.panel-primary-center .block-nv13::-webkit-scrollbar {
    height: 6px; /* Chiều cao thanh cuộn */
}

.panel-primary-center .block-nv13::-webkit-scrollbar-track {
    background: #f8fafc; 
    border-radius: 3px;
}

.panel-primary-center .block-nv13::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Màu thanh cuộn nhạt thanh lịch */
    border-radius: 3px;
}

.panel-primary-center .block-nv13::-webkit-scrollbar-thumb:hover {
    background: #1e4d8a; /* Màu khi di chuột vào */
}

/* 4. Responsive cho Mobile (Hiện 2 cái để dễ nhìn hơn) */
@media (max-width: 767px) {
    .panel-primary-center .block-nv13 > div {
        flex: 0 0 50%; /* Mobile hiện 2 cái */
        max-width: 50%;
    }
}

/* 5. Căn chỉnh lại nội dung bên trong cho đẹp */
.panel-primary-center .block-nv13 .images img {
    width: 100%;
    height: 120px; /* Cố định chiều cao ảnh để thẳng hàng */
    object-fit: cover;
    border-radius: 6px !important;
    border: none;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.panel-primary-center .block-nv13 a span strong {
    font-size: 13.5px;
    line-height: 1.4;
    color: #2c3e50;
    font-weight: 600;
    display: block;
    /* Cắt dòng nếu tiêu đề quá dài */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 38px; /* Giới hạn chiều cao text */
}


/* =========================================================
   STYLE CHO BLOCK "PANEL PRIMARY LEFT" (Menu sidebar trái)
   ========================================================= */

/* 1. Khung bao ngoài (Panel Left) */
.panel-primary-left {
    background-color: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 8px !important;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 2. Tiêu đề Block (VD: CƠ QUAN BAN HÀNH, LOẠI VĂN BẢN...) */
.panel-primary-left .panel-heading {
    background: linear-gradient(135deg, #1e4d8a, #0070c0) !important; /* Gradient xanh dương sang trọng */
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px 18px;
    border: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icon trong heading */
.panel-primary-left .panel-heading em,
.panel-primary-left .panel-heading i,
.panel-primary-left .panel-heading span.fa {
    font-size: 16px;
    opacity: 0.95;
    margin-right: 4px;
}

/* 3. Nội dung bên trong */
.panel-primary-left .panel-body {
    padding: 0;
    background: #ffffff;
}

/* Xử lý khối Category đặc thù (giải quyết lỗi co ngót 50% trong sidebar) */
.panel-primary-left .panel-body .category {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    float: none !important;
}

/* 4. Danh sách menu */
.panel-primary-left .panel-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel-primary-left .panel-body li {
    border-bottom: 1px dashed #e9ecef; /* Đường kẻ đứt nét giữa các mục */
    margin: 0;
}

.panel-primary-left .panel-body li:last-child {
    border-bottom: none;
}

/* 5. Link trong menu (Dành cho danh sách phẳng tiêu chuẩn) */
.panel-primary-left .panel-body a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    line-height: 1.4;
}

/* Icon mũi tên đỏ trước mỗi mục phẳng */
.panel-primary-left .panel-body a:before {
    content: "\25B6"; /* Unicode mũi tên phải ▶ */
    flex-shrink: 0;
    color: #dc3545; /* Màu đỏ */
    font-size: 10px;
    transition: all 0.2s ease;
    margin-right: 2px;
}

/* Hover effect cho menu phẳng */
.panel-primary-left .panel-body li:hover {
    background-color: #f5f9fd;
}

.panel-primary-left .panel-body li:hover > a {
    color: #0070c0;
    padding-left: 22px; /* Micro-animation dịch chuyển nhẹ */
}

.panel-primary-left .panel-body li:hover > a:before {
    color: #0070c0; /* Mũi tên chuyển xanh khi hover */
}

/* Active/Current page */
.panel-primary-left .panel-body li.active a,
.panel-primary-left .panel-body a.active {
    background-color: #eef5fc;
    color: #1e4d8a;
    font-weight: 600;
    border-left: 3px solid #1e4d8a;
}

.panel-primary-left .panel-body li.active a:before,
.panel-primary-left .panel-body a.active:before {
    color: #1e4d8a;
}

/* 5.1. Tối ưu hóa cho block tin tức có ảnh (block_news, block_groups, block_tophits) */
.panel-primary-left .panel-body .block_news li,
.panel-primary-left .panel-body .block_groups li,
.panel-primary-left .panel-body .block_tophits li {
    display: flex !important;
    align-items: flex-start !important;
    padding: 10px 15px !important;
    gap: 12px !important;
    border-bottom: 1px dashed #e9ecef;
}

/* Triệt tiêu style menu phẳng cho liên kết bao ngoài ảnh thumbnail */
.panel-primary-left .panel-body .block_news a:has(img),
.panel-primary-left .panel-body .block_groups a:has(img),
.panel-primary-left .panel-body .block_tophits a:has(img) {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    width: auto !important;
}

.panel-primary-left .panel-body .block_news a:has(img):before,
.panel-primary-left .panel-body .block_groups a:has(img):before,
.panel-primary-left .panel-body .block_tophits a:has(img):before {
    content: none !important;
}

/* Tối ưu liên kết tiêu đề bài viết */
.panel-primary-left .panel-body .block_news a.show,
.panel-primary-left .panel-body .block_groups a.show,
.panel-primary-left .panel-body .block_tophits a.show {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    flex-grow: 1 !important;
    transition: color 0.2s ease !important;
}

/* Icon mũi tên đỏ trước tiêu đề tin tức */
.panel-primary-left .panel-body .block_news a.show:before,
.panel-primary-left .panel-body .block_groups a.show:before,
.panel-primary-left .panel-body .block_tophits a.show:before {
    content: "\25B6" !important;
    color: #dc3545 !important;
    font-size: 10px !important;
    margin-right: 6px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: color 0.2s ease !important;
}

/* Hiệu ứng Hover cho danh mục tin tức */
.panel-primary-left .panel-body .block_news li:hover a.show,
.panel-primary-left .panel-body .block_groups li:hover a.show,
.panel-primary-left .panel-body .block_tophits li:hover a.show {
    color: #0070c0 !important;
}

.panel-primary-left .panel-body .block_news li:hover a.show:before,
.panel-primary-left .panel-body .block_groups li:hover a.show:before,
.panel-primary-left .panel-body .block_tophits li:hover a.show:before {
    color: #0070c0 !important;
}

/* Tắt hiệu ứng dịch chuyển padding-left khi hover (vì đã có ảnh) */
.panel-primary-left .panel-body .block_news li:hover > a,
.panel-primary-left .panel-body .block_groups li:hover > a,
.panel-primary-left .panel-body .block_tophits li:hover > a {
    padding-left: 0 !important;
}

/* Thêm hiệu ứng premium cho hình ảnh thu nhỏ */
.panel-primary-left .panel-body .block_news img,
.panel-primary-left .panel-body .block_groups img,
.panel-primary-left .panel-body .block_tophits img {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-width: 80px !important; /* Giới hạn chiều rộng ảnh thumbnail trong sidebar */
    height: auto !important;
    border-radius: 4px !important;
}

.panel-primary-left .panel-body .block_news li:hover img,
.panel-primary-left .panel-body .block_groups li:hover img,
.panel-primary-left .panel-body .block_tophits li:hover img {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 768px) {
    .panel-primary-left .panel-body .block_news a.show,
    .panel-primary-left .panel-body .block_groups a.show,
    .panel-primary-left .panel-body .block_tophits a.show {
        font-size: 13px !important;
    }
}

/* Tối ưu cho block thông tin liên kết Chính phủ (vanban-gov-container) */
.panel-primary-left .panel-body .vanban-gov-container a {
    display: flex !important;
    align-items: center !important;
    padding: initial !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.panel-primary-left .panel-body .vanban-gov-container a:before {
    content: none !important;
}

.panel-primary-left .panel-body .vanban-gov-item-link {
    display: flex !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    color: inherit !important;
    text-decoration: none !important;
}

.panel-primary-left .panel-body .vanban-gov-item:hover > a {
    padding-left: 12px !important;
}

/* 6. Hỗ trợ cho menu Accordion (Module Tài Nguyên / Download) */
.panel-primary-left .panel-body .panel-group {
    margin-bottom: 0;
}

.panel-primary-left .panel-body .panel-default {
    border: none;
    box-shadow: none;
    margin-top: 0 !important;
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
}

.panel-primary-left .panel-body .panel-default:last-child {
    border-bottom: none;
}

/* Đè màu nền tiêu đề danh mục cha */
.panel-primary-left .panel-body .panel-default > .panel-heading {
    background: #ffffff !important;
    color: #333333 !important;
    padding: 0;
    border: none;
}

.panel-primary-left .panel-body .panel-title {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Tiêu đề của danh mục cha */
.panel-primary-left .panel-body .panel-title > a:first-child {
    padding: 12px 18px;
    font-weight: 600;
    color: #333333 !important; /* Bắt buộc màu tối để không bị trắng trên nền trắng */
    font-size: 13.5px;
    text-transform: uppercase;
    flex-grow: 1;
    display: flex;
    align-items: center;
    border: none !important;
    background: transparent !important;
}

.panel-primary-left .panel-body .panel-title > a:first-child:hover {
    color: #1e4d8a !important; /* Bắt buộc màu xanh thương hiệu khi hover */
    background: transparent !important;
}

/* Nút mở rộng/thu gọn (+) */
.panel-primary-left .panel-body a[data-toggle="collapse"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    margin-right: 15px;
    color: #5a6268 !important; /* Thêm !important để không bị đè màu trắng */
    background: #f1f3f5 !important;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0 !important; /* Ẩn dấu cộng mặc định dạng văn bản */
    border: none;
    flex-shrink: 0;
    box-shadow: none;
}

.panel-primary-left .panel-body a[data-toggle="collapse"]:before {
    content: none !important; /* Loại bỏ mũi tên đỏ ▶ */
}

/* Biểu tượng dấu cộng khi đóng */
.panel-primary-left .panel-body a[data-toggle="collapse"].collapsed::after {
    content: "+";
    font-size: 16px;
    font-weight: 600;
    color: #5a6268 !important;
}

/* Biểu tượng dấu trừ khi mở */
.panel-primary-left .panel-body a[data-toggle="collapse"]:not(.collapsed)::after {
    content: "\2212" !important; /* Dấu trừ Unicode − */
    font-size: 16px;
    font-weight: 600;
    color: #1e4d8a !important;
}

.panel-primary-left .panel-body a[data-toggle="collapse"]:hover {
    background: #e2e6ea !important;
    transform: scale(1.1);
    color: #1e4d8a !important;
}

/* Khu vực danh mục con khi được mở */
.panel-primary-left .panel-body .panel-collapse {
    background: #fcfdfe;
}

.panel-primary-left .panel-body .panel-collapse .panel-body {
    padding: 0;
    border: none;
    background: transparent;
}

.panel-primary-left .panel-body .panel-collapse table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.panel-primary-left .panel-body .panel-collapse table td {
    padding: 0;
    border-top: 1px solid #f8f9fa;
}

.panel-primary-left .panel-body .panel-collapse table tr:first-child td {
    border-top: none;
}

/* Danh mục con (Subcategory link) */
.panel-primary-left .panel-body .panel-collapse table td a {
    padding: 10px 18px 10px 32px; /* Thụt đầu dòng rộng hơn */
    color: #555555;
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    border: none;
    transition: all 0.2s ease;
    background: transparent;
}

/* Đổi mũi tên danh mục con thành dấu chấm tròn tinh tế */
.panel-primary-left .panel-body .panel-collapse table td a:before {
    content: "\2022" !important; /* Dấu chấm tròn • */
    color: #a0aec0 !important;
    font-size: 14px;
    margin-right: 8px;
    transition: color 0.2s ease;
}

.panel-primary-left .panel-body .panel-collapse table td a:hover {
    background-color: #f1f6fb;
    color: #1e4d8a;
    padding-left: 36px; /* Micro-animation slide cho danh mục con */
}

.panel-primary-left .panel-body .panel-collapse table td a:hover:before {
    color: #1e4d8a !important;
}

/* 7. Số lượng bên phải (nếu có) */
.panel-primary-left .panel-body a .badge,
.panel-primary-left .panel-body a span.count {
    margin-left: auto;
    background-color: #e2e8f0;
    color: #4a5568;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.panel-primary-left .panel-body a:hover .badge,
.panel-primary-left .panel-body a:hover span.count {
    background-color: #1e4d8a;
    color: #ffffff;
}

/* 8. Sub-heading trong panel (VD: LĨNH VỰC VĂN BẢN) */
.panel-primary-left .panel-body .sub-heading {
    background: linear-gradient(to right, #1e4d8a, #0070c0);
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    padding: 12px 18px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #dee2e6;
}

/* 9. Danh sách có icon comment/bubble thay vì mũi tên */
.panel-primary-left .panel-body .icon-bubble a:before,
.panel-primary-left .panel-body li.icon-bubble a:before {
    content: "\1F4AC" !important; /* Unicode speech bubble 💬 */
    font-size: 14px;
    color: #6c757d;
}

.panel-primary-left .panel-body .icon-bubble a:hover:before,
.panel-primary-left .panel-body li.icon-bubble a:hover:before {
    color: #1e4d8a !important;
}

/* 10. Responsive - Mobile */
@media (max-width: 768px) {
    .panel-primary-left {
        margin-bottom: 15px;
    }
    
    .panel-primary-left .panel-heading {
        font-size: 13px;
        padding: 10px 14px;
    }
    
    .panel-primary-left .panel-body a {
        font-size: 13px;
        padding: 10px 14px;
        gap: 8px;
    }
    
    .panel-primary-left .panel-body a:before {
        font-size: 9px;
    }
    
    .panel-primary-left .panel-body .panel-title > a:first-child {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .panel-primary-left .panel-body a[data-toggle="collapse"] {
        margin-right: 10px;
    }
    
    .panel-primary-left .panel-body .panel-collapse table td a {
        padding: 9px 14px 9px 24px;
        font-size: 12.5px;
    }
}



#footer {
    position: relative;
    min-height: 0px!important;
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #1e4d8a;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #1e4d8a;
    background-color: #1e4d8a;
    background-image: url(../images/trong_dong-min.png);
    background-repeat: no-repeat;
    background-position: center 20px;
    /*background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0) 100%);*/
    font-size: 14px;
}

#footer, #footer a {
    color: #fff;
}

/*CSS VAN BAN DA NANG*/

            .vanban-gov-container {
                max-width: 420px;
                margin: 0 auto;
                background: linear-gradient(180deg, #FEF5E6 0%, #FFF9E6 100%);
                border: 1px solid #E8E8E8;
                position: relative;
                overflow: hidden;
            }
            
            .vanban-gov-container::before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 245px;
                height: 84px;
                background: url(../images/lacotoquoc.png) no-repeat;
                background-size: cover;
                pointer-events: none;
                z-index: 3;
            }
            
            .vanban-gov-container::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: 100%;
                background:linear-gradient(180deg,rgba(253,246,218,.4) 0%,#fff4c8 50%,rgba(252,250,246,.4) 100%), url(../images/bg-new.svg) no-repeat;
                background-size: contain;
                background-position: bottom center;
                opacity: 1;
                pointer-events: none;
                z-index: 0;
            }
            
            .vanban-gov-header {
                background: #FFFFFF;
                padding: 12px 16px;
                border-bottom: 3px solid #E8B84D;
                position: relative;
                z-index: 2;
            }
            
            .vanban-gov-header-content {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .vanban-gov-icon {
                width: 32px;
                height: 32px;
                background: url(../../../uploads/logo_vptwd-1_50_34.png) no-repeat;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                flex-shrink: 0;
            }
            
            .vanban-gov-title {
                color: #C8102E;
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: 14px;
                font-weight: 700;
                line-height: 1.3;
                margin: 0;
                flex: 1;
            }
            
            .vanban-gov-list {
                padding: 0;
                position: relative;
                z-index: 2;
                max-height: 480px;
                overflow-y: auto;
            }
            
            .vanban-gov-list::-webkit-scrollbar {
                width: 4px;
            }
            
            .vanban-gov-list::-webkit-scrollbar-track {
                background: #F5F5F5;
            }
            
            .vanban-gov-list::-webkit-scrollbar-thumb {
                background: #E8B84D;
                border-radius: 2px;
            }
            
            .vanban-gov-item {
                background: transparent;
                border-bottom: 1px dashed #E8D4B0;
                transition: background 0.2s ease;
            }
            
            .vanban-gov-item:hover {
                background: rgba(255, 255, 255, 0.5);
            }
            
            .vanban-gov-item:last-child {
                border-bottom: none;
            }
            
            .vanban-gov-item-link {
                display: flex;
                gap: 12px;
                padding: 12px 16px;
                text-decoration: none;
                color: inherit;
            }
            
            .vanban-gov-thumbnail {
                width: 100px;
                height: 75px;
                flex-shrink: 0;
                border-radius: 4px;
                overflow: hidden;
                background: #F0F0F0;
                position: relative;
                border: 1px solid #E0E0E0;
            }
            
            .vanban-gov-thumbnail img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .vanban-gov-thumbnail-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #E8E8E8 0%, #D0D0D0 100%);
            }
            
            .vanban-gov-thumbnail-icon {
                font-size: 36px;
                opacity: 0.6;
            }
            
            .vanban-gov-type-icon {
                position: absolute;
                bottom: 6px;
                left: 6px;
                width: 28px;
                height: 28px;
                background: rgba(0, 0, 0, 0.75);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
            }
            
            .vanban-gov-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-width: 0;
            }
            
            .vanban-gov-item-title {
                color: #8B6914;
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            
            .vanban-gov-footer {
                padding: 10px 16px;
                background: transparent;
                border-top: 1px solid #E8D4B0;
                position: relative;
                z-index: 2;
            }
            
            .vanban-gov-source {
                color: #999999;
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: 11px;
                font-style: italic;
                line-height: 1.4;
                text-align: right;
                margin: 0;
            }
            
            @media (max-width: 767px) {
                .vanban-gov-header {
                    padding: 10px 12px;
                }
                
                .vanban-gov-list {
                    max-height: 400px;
                }
                
                .vanban-gov-item-link {
                    padding: 10px 12px;
                    gap: 10px;
                }
                
                .vanban-gov-thumbnail {
                    width: 85px;
                    height: 64px;
                }
                
                .vanban-gov-item-title {
                    font-size: 13px;
                }
                
                .vanban-gov-footer {
                    padding: 8px 12px;
                }
            }

/* =========================================================
   STYLE CHO BLOCK "VĂN BẢN MỚI" TỐI ƯU TRÊN SIDEBAR
   ========================================================= */

.panel-primary-left .panel-body .block-law {
    padding: 10px 15px !important;
}

.panel-primary-left .panel-body .block-law .item {
    display: block !important;
    padding: 12px 0 !important;
    border-bottom: 1px dashed #e9ecef !important;
    background: transparent !important;
    margin: 0 !important;
    position: static !important;
}

.panel-primary-left .panel-body .block-law .item:last-child {
    border-bottom: none !important;
}

.panel-primary-left .panel-body .block-law .law-code {
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Reset toàn bộ các quy tắc flex/padding của menu phẳng áp dụng lên liên kết trong block_law */
.panel-primary-left .panel-body .block-law .law-code a {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #0070c0 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
    position: static !important;
}

.panel-primary-left .panel-body .block-law .law-code a:hover {
    color: #dc3545 !important;
}

/* Thêm icon mũi tên đỏ trước mã văn bản một cách đồng bộ */
.panel-primary-left .panel-body .block-law .law-code a:before {
    content: "\25B6" !important;
    color: #dc3545 !important;
    font-size: 10px !important;
    margin-right: 6px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    font-weight: normal !important;
}

.panel-primary-left .panel-body .block-law .law-title {
    margin: 0 0 6px 0 !important;
    font-size: 13.5px !important;
    color: #495057 !important;
    line-height: 1.4 !important;
    display: block !important;
}

.panel-primary-left .panel-body .block-law .law-view {
    margin: 0 !important;
    font-size: 12px !important;
    color: #868e96 !important;
    display: block !important;
    font-style: normal !important;
    line-height: 1.4 !important;
}

html,
body,
button,
input,
select,
textarea,
.btn,
.form-control,
.dropdown-menu,
.navbar,
.panel,
.modal,
.tooltip,
.popover {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body :not(.fa):not([class^='fa-']):not([class*=' fa-']):not([class^='icon-']):not([class*=' icon-']) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.fa,
[class^='fa-'],
[class*=' fa-'] {
    font-family: FontAwesome !important;
}

[class^='icon-'],
[class*=' icon-'] {
    font-family: NukeVietIcons !important;
}

@media (max-width: 767.98px) {
    .school-header-logo {
        text-align: center;
    }

    .sitebannertext {
        width: 100%;
        color: #b9161f !important;
        text-transform: uppercase;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        padding: 4px 0 4px 22px;
        border-left: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86);
        text-align: center;
    }

    .sitebannertext .sn {
        display: inline-block;
        margin-bottom: 8px;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 14px;
        line-height: 1.25;
        color: #b97a12;
        letter-spacing: 0;
    }
    .sitebannertext .sd {
        max-width: 980px;
        font-size: 15px;
        line-height: 1.18;
        font-weight: bold;
        color: #e20d16;
        letter-spacing: 0;
    }

    .school-logo-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        padding: 10px;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffffff 0%, #fff6df 100%);
        border: 1px solid rgba(217, 154, 36, 0.3);
        box-shadow: 0 18px 34px rgba(13, 59, 115, 0.16), inset 0 0 0 6px rgba(255, 255, 255, 0.72);
    }

    .school-logo-link img {
        display: block;
        max-width: 75px;
        max-height: 75px;
        width: auto;
        height: auto;
    }
}