/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. VARIABLES (colors, shadows, typography)
   2. BASE & RESET
   3. TYPOGRAPHY
   4. UTILITIES
   5. BUTTONS & FORMS
   6. NAVIGATION (main nav, dropdown, mobile)
   7. NEWS TICKER
   8. NEWS SECTIONS & CARDS
   9. WEATHER, IMAGES, MULTIMEDIA HEADERS
   10. ARTICLE BOX, SHARE, CARDS
   11. FEATURED ARTICLES & CAROUSEL
   12. GRID / LIST VIEWS
   13. MULTIMEDIA STYLES
   14. SIDEBAR
   15. BANNERS & SPECIAL SECTIONS
   16. FOOTER
   17. DOCUMENT SEARCH & TABLE
   18. SUPPORT ONLINE, WEATHER MODAL, SCROLL-TO-TOP
   19. RESPONSIVE
   20. SEARCH MODAL, PAGINATION
   21. FAQ, FIXED SIDEBAR, ERROR 404
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
   /* ----- Brand / Primary ----- */
   --primary-blue: #1e427c;
   --primary-blue-light: #0068ff;
   --primary-blue-dark: #0048b3;
   --primary-blue-darker: #17355f;
   --primary-blue-mid: #1e4a7c;
   --primary-red: #ce0100;
   --primary-red-hover: #a00100;

   /* ----- Neutrals ----- */
   --black: #000;
   --white: #fff;
   --text-dark: #333;
   --text-muted: #999;
   --secondary-gray: #666;
   --light-gray: #f5f5f5;
   --gray-lighter: #f8f9fa;
   --border-gray: #e0e0e0;
   --border-gray-light: #ddd;
   --border-gray-lighter: #ccc;
   --border-gray-lightest: #e9ecef;
   --border-gray-subtle: #f0f0f0;

   /* ----- Yellow palette ----- */
   --yellow: #fefa00;
   --yellow-light: #fcf8e3;
   --yellow-bright: #f4ff35;
   --yellow-cream: #fffbe0;
   --yellow-pale: #fffef0;
   --yellow-pale-light: #fff9c4;

   /* ----- Accent / Social ----- */
   --pink-light: #ff6b9d;
   --pink-dark: #ff4c6b;
   --facebook: #1877f2;
   --zalo: var(--primary-blue-light);
   --success-green: #4caf50;
   --danger: #dc3545;
   --danger-bg: #ffebee;
   --secondary-bs: #6c757d;
   --blue-bootstrap: #007bff;
   --blue-bootstrap-dark: #0056b3;

   /* ----- Document badges ----- */
   --badge-blue-bg: #e3f2fd;
   --badge-blue: #1976d2;
   --badge-orange-bg: #fff3e0;
   --badge-orange: #f57c00;
   --badge-purple-bg: #f3e5f5;
   --badge-purple: #7b1fa2;
   --badge-green-bg: #e8f5e9;
   --badge-green: #388e3c;
   --badge-pink-bg: #fce4ec;
   --badge-pink: #c2185b;
   --badge-teal-bg: #e0f2f1;
   --badge-teal: #00796b;

   /* ----- Fixed sidebar / Sitemap / Bookmark ----- */
   --blue-material: #2196f3;
   --blue-material-dark: #1976d2;
   --blue-material-darker: #1565c0;
   --blue-material-bg: #e3f2fd;
   --warning-amber: #ff9800;
   --warning-amber-dark: #f57c00;
   --warning-amber-darker: #e65100;

   /* ----- Overlays ----- */
   --overlay-white-10: rgba(255, 255, 255, 0.1);
   --overlay-white-85: rgba(255, 255, 255, 0.85);

   /* ----- Shadows ----- */
   --shadow-primary-blue-40: rgba(0, 104, 255, 0.4);
   --shadow-primary-blue-60: rgba(0, 104, 255, 0.6);
   --shadow-primary-blue-80: rgba(0, 104, 255, 0.8);
   --shadow-dark-02: rgba(0, 0, 0, 0.02);
   --shadow-dark-05: rgba(0, 0, 0, 0.05);
   --shadow-dark-10: rgba(0, 0, 0, 0.1);
   --shadow-dark-15: rgba(0, 0, 0, 0.15);
   --shadow-dark-20: rgba(0, 0, 0, 0.2);
   --shadow-dark-30: rgba(0, 0, 0, 0.3);
   --shadow-dark-40: rgba(0, 0, 0, 0.4);
   --shadow-dark-50: rgba(0, 0, 0, 0.5);
   --shadow-dark-80: rgba(0, 0, 0, 0.8);
   --shadow-white-90: rgba(255, 255, 255, 0.9);
   --shadow-primary-alpha: rgba(30, 66, 124, 0.15);
   --shadow-primary-alpha-20: rgba(30, 66, 124, 0.2);
   --shadow-primary-alpha-30: rgba(30, 66, 124, 0.3);
   --shadow-bootstrap-blue: rgba(0, 123, 255, 0.3);
   --shadow-warning-amber: rgba(255, 152, 0, 0.3);
   --shadow-blue-material: rgba(33, 150, 243, 0.3);
   --shadow-blue-material-40: rgba(33, 150, 243, 0.4);

   /* ----- Typography ----- */
   --font-heading: 'Montserrat', sans-serif;
   --font-body: 'Montserrat', sans-serif;
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */

body {
   font-family: var(--font-body);
   color: var(--text-dark);
}

img:hover {
   opacity: 0.8;
   transition: opacity 0.3s ease;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.font-heading {
   font-family: var(--font-heading);
   font-weight: 600;
   text-transform: uppercase;
}

.font-body {
   font-family: var(--font-body);
   font-weight: 500;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
   font-family: var(--font-heading);
   line-height: 1.4;
}

h1,
.h1 {
   font-size: 36px;
}

h2,
.h2 {
   font-size: 32px;
}

h3,
.h3 {
   font-size: 28px;
}

h4,
.h4 {
   font-size: 24px;
}

h5,
.h5 {
   font-size: 20px;
}

h6,
.h6 {
   font-size: 18px;
}

.body-text {
   font-family: var(--font-body);
   font-weight: 400;
   line-height: 1.6;
}

.card-subtitle {
   font-weight: 700;
}

.text-yellow-outline {
   text-shadow: -1px -1px 0 var(--yellow),
      1px -1px 0 var(--yellow),
      -1px 1px 0 var(--yellow),
      1px 1px 0 var(--yellow);
   color: var(--black);
   padding: 0 2px;
}

.text-red-outline {
   text-shadow: -1px -1px 0 var(--primary-red),
      1px -1px 0 var(--primary-red),
      -1px 1px 0 var(--primary-red),
      1px 1px 0 var(--primary-red);
   color: var(--white);
   padding: 0 2px;
   font-family: 'Spectral SC' !important;
}

/* ==========================================================================
   4. UTILITIES
   ========================================================================== */

/* Background Utilities */
.bg-yellow-light {
   background: var(--yellow-light);
}

.bg-yellow {
   background: var(--yellow);
}

/* Text Color Utilities */
.text-yellow {
   color: var(--yellow) !important;
}

.text-muted {
   color: var(--secondary-gray) !important;
}

.text-primary {
   color: var(--primary-blue) !important;
}

.bg-primary {
   background-color: var(--primary-blue) !important;
}

/* Border Utilities */
.border-bottom {
   border-color: var(--border-gray) !important;
}

.border-bottom-dotted {
   border-bottom: 1px dotted var(--border-gray-light);
}

.dotted-border {
   border-bottom: 1px dotted var(--border-gray-lighter) !important;
}

/* Shadow Utilities */
.shadow-sm {
   box-shadow: 0 2px 4px var(--shadow-dark-10) !important;
}

/* Cursor Utilities */
.cursor-pointer {
   cursor: pointer;
}

/* ==========================================================================
   5. BUTTONS & FORMS
   ========================================================================== */

.btn-primary {
   background-color: var(--primary-blue);
   border-color: var(--primary-blue);
}

.btn-primary:hover {
   background-color: var(--primary-blue-darker);
   border-color: var(--primary-blue-darker);
}

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */

/* Main Navigation */
.main-nav {
   position: relative;
}

.main-nav .navbar {
   width: 100%;
   display: flex;
   justify-content: flex-start;
}

.main-nav .navbar-collapse {
   flex-grow: 1;
}

.navbar-nav {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-start;
   margin: 0;
}

.navbar-nav .nav-link {
   padding: 0.5rem 1rem;
   font-weight: 600;
   font-size: 15px;
   white-space: nowrap;
}

.navbar-nav .nav-item {
   display: flex;
   align-items: center;
}

.main-nav .search {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
}

.navbar-toggler {
   border: none;
   padding: 0.5rem;
}

.navbar-toggler:focus {
   box-shadow: none;
}

.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
   /* border: 1px solid var(--gray-lighter); */
   padding: 5px 8px;
   border-radius: 3px;
}

.navbar-toggler:focus {
   box-shadow: none;
   border-color: var(--yellow);
}

/* Nav Links */
.nav-link-active {
   color: var(--primary-red) !important;
   font-weight: 600;
   font-size: 15px;
   font-family: var(--font-heading);
   text-decoration: none;
}

.nav-link-active:hover {
   color: var(--yellow) !important;
}

.nav-link-inactive {
   color: var(--text-dark) !important;
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
   font-family: var(--font-heading);
   transition: all 0.3s ease;
   padding: 0.5rem 0.65rem;
}

.nav-link-inactive:hover {
   color: var(--primary-red) !important;
}

.nav-link-active span,
.nav-link-inactive {
   text-transform: uppercase;
   font-family: var(--font-heading);
   font-weight: 600;
}

.nav-link-active i {
   margin-bottom: 0px;
}

.nav-link-active span {
   padding-top: 2px;
}

/* FAMA Red Navigation */
.fama-red {
   background-color: var(--primary-red) !important;
   border-bottom: none !important;
}

.fama-red .nav-link-active,
.fama-red .nav-link-inactive {
   color: var(--white) !important;
}

.fama-red .nav-link-inactive:hover {
   color: var(--white) !important;
   opacity: 0.85;
}

.fama-red .dropdown-menu {
   border: none;
   margin-top: 1.1rem;
   min-width: 230px;
}

/* Dropdown Menu */
.dropdown-menu {
   border-radius: 0 0 8px 8px;
   box-shadow: 0 4px 12px var(--shadow-dark-15);
   border: none;
   margin-top: 0.5rem;
   overflow: visible;
}

.dropdown-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1.5rem;
   transition: all 0.3s ease;
   border-bottom: dotted 1px var(--primary-red);
}

.dropdown-item:hover {
   background-color: var(--primary-blue);
   color: var(--white) !important;
}

.dropdown-item i {
   flex-shrink: 0;
   margin-left: 0.25rem;
}

.dropdown-toggle::after {
   margin-left: 0.5rem;
   vertical-align: 0.1em;
}

.dropdown-menu li:last-child .dropdown-item {
   border-bottom: none;
}

/* Dropdown Submenu */
.dropdown-submenu {
   position: relative;
   overflow: visible;
}

.dropdown-submenu .dropdown-menu {
   position: absolute !important;
   top: 0 !important;
   left: 100% !important;
   margin-left: 4px !important;
   margin-top: 0 !important;
   display: none;
   min-width: 200px;
   max-width: 280px;
   z-index: 1070 !important;
   border-radius: 0 0 8px 8px;
   background-color: var(--white);
   box-shadow: 0 4px 12px var(--shadow-dark-15);
   word-wrap: break-word;
   overflow-wrap: break-word;
   padding: 0.5rem 0;
   transform: translateX(0);
}

.dropdown-submenu .dropdown-menu.show {
   display: block !important;
   position: absolute !important;
   top: 0 !important;
   left: 100% !important;
   margin-left: 4px !important;
   margin-top: 0 !important;
   z-index: 1070 !important;
}

.dropdown-submenu>.dropdown-toggle::after {
   display: none;
}

@media (min-width: 992px) {
   .dropdown-hover:hover .dropdown-menu {
      display: block;
      margin-top: 0;
   }

   /* Show submenu only when hovering the level 2 item (dropdown-submenu) */
   .dropdown-submenu:hover .dropdown-menu {
      display: block !important;
      top: 0 !important;
      left: 100% !important;
      margin-left: 4px !important;
      margin-top: 0 !important;
      z-index: 1070 !important;
      transform: translateX(0);
   }
}

@media (max-width: 991px) {
   .dropdown-submenu .dropdown-menu {
      position: static;
      margin-left: 1rem;
      margin-top: 0.5rem;
      border-left: 2px solid var(--primary-blue);
   }
}

/* Navigation Visibility */
@media (max-width: 991px) {
   #navbarMenu {
      display: none !important;
   }

   .navbar-toggler {
      display: block !important;
   }
}

@media (min-width: 992px) {
   #navbarMenu {
      display: flex !important;
   }

   .navbar-toggler {
      display: none !important;
   }

   .mobile-nav-overlay {
      display: none !important;
   }
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--primary-red);
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.4s ease, visibility 0.4s ease;
   overflow-y: auto;
}

.mobile-nav-overlay.active {
   opacity: 1;
   visibility: visible;
}

.mobile-nav-container {
   position: relative;
   max-width: 600px;
   margin: 0 auto;
   padding: 80px 24px 40px;
   min-height: 100vh;
}

.mobile-nav-close {
   position: fixed;
   top: 20px;
   right: 20px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: var(--yellow);
   border: none;
   color: var(--primary-red);
   font-size: 20px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   z-index: 10000;
}

.mobile-nav-close:hover {
   background-color: var(--yellow-light);
   transform: rotate(90deg);
}

.mobile-nav-content {
   display: flex;
   flex-direction: column;
   gap: 0;
}

.mobile-nav-section {
   border-bottom: 1px solid var(--border-gray);
}

.mobile-nav-section:last-child {
   border-bottom: none;
}

.mobile-nav-section-header-link {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   color: var(--white);
   font-size: 20px;
   text-transform: uppercase;
   font-weight: 600;
   font-family: var(--font-heading);
   text-decoration: none;
   transition: all 0.3s ease;
   position: relative;
}

.mobile-nav-section-header-link:hover {
   color: var(--yellow);
}

.mobile-nav-section-header-link.active {
   color: var(--white);
}

.mobile-nav-section-header-link i {
   font-size: 18px;
   color: var(--white);
   transition: transform 0.3s ease;
   cursor: pointer;
   padding: 8px;
   margin: -8px;
   border-radius: 4px;
}

.mobile-nav-section-header-link:hover i {
   background-color: var(--overlay-white-10);
}

.mobile-nav-section-header-link.active i {
   transform: rotate(180deg);
}

.mobile-nav-section-header {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   background: none;
   border: none;
   color: var(--white);
   font-size: 20px;
   text-transform: uppercase;
   font-weight: 600;
   font-family: var(--font-heading);
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: left;
}

.mobile-nav-section-header:hover {
   color: var(--yellow);
}

.mobile-nav-section-header.active {
   color: var(--white);
}

.mobile-nav-section-header i {
   font-size: 18px;
   color: var(--white);
   transition: transform 0.3s ease;
}

.mobile-nav-section-header.active i {
   transform: rotate(180deg);
}

.mobile-nav-section-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
   padding: 0;
   opacity: 0;
}

.mobile-nav-section-content.show {
   max-height: 1000px;
   padding-bottom: 16px;
   opacity: 1;
}

.mobile-nav-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   margin-bottom: 8px;
   background-color: var(--yellow-light);
   border-radius: 8px;
   color: var(--text-dark);
   text-decoration: none;
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 700;
   transition: all 0.3s ease;
}

.mobile-nav-link:hover {
   background-color: var(--yellow-light);
   transform: translateX(5px);
   color: var(--primary-red);
}

.mobile-nav-link i {
   color: var(--primary-red);
   font-size: 15px;
}

.mobile-nav-subsection {
   margin-left: 0;
   margin-bottom: 8px;
}

.mobile-nav-subsection-header {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 20px;
   background-color: var(--yellow-light);
   border: none;
   border-radius: 8px;
   color: var(--text-dark);
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: left;
}

.mobile-nav-subsection-header:hover {
   background-color: var(--yellow-light);
   color: var(--primary-red);
}

.mobile-nav-subsection-header.active {
   background-color: var(--yellow-light);
}

.mobile-nav-subsection-header-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   background-color: var(--yellow-light);
   border-radius: 8px;
   color: var(--text-dark);
   text-decoration: none;
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: left;
   position: relative;
}

.mobile-nav-subsection-header-link:hover {
   background-color: var(--yellow-light);
   transform: translateX(5px);
   color: var(--primary-red);
}

.mobile-nav-subsection-header-link.active {
   background-color: var(--yellow-light);
}

.mobile-nav-subsection-header-link i {
   font-size: 15px;
   color: var(--primary-red);
   transition: transform 0.3s ease;
   cursor: pointer;
   flex-shrink: 0;
   padding: 6px;
   margin: -6px;
   border-radius: 3px;
}

.mobile-nav-subsection-header-link:hover i {
   background-color: var(--overlay-white-10);
}

.mobile-nav-subsection-header-link.active i {
   transform: rotate(180deg);
}

.mobile-nav-subsection-header i {
   font-size: 15px;
   color: var(--primary-red);
   transition: transform 0.3s ease;
}

.mobile-nav-subsection-header.active i {
   transform: rotate(180deg);
}

.mobile-nav-subsection-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
   padding: 0;
   opacity: 0;
}

.mobile-nav-subsection-content.show {
   max-height: 800px;
   padding: 8px 0 0 0;
   opacity: 1;
}

.mobile-nav-sublink {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 20px;
   margin-bottom: 6px;
   margin-left: 20px;
   background-color: var(--yellow-light);
   border-left: 3px solid var(--primary-red);
   border-radius: 4px;
   color: var(--text-dark);
   text-decoration: none;
   font-size: 15px;
   font-weight: 600;
   transition: all 0.3s ease;
}

.mobile-nav-sublink:hover {
   background-color: var(--yellow-light);
   transform: translateX(5px);
   color: var(--primary-red);
   border-left-color: var(--primary-red);
}

.mobile-nav-sublink i {
   color: var(--primary-red);
   font-size: 15px;
}

@keyframes slideInFromTop {
   from {
      transform: translateY(-20px);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}

.mobile-nav-overlay.active .mobile-nav-section {
   animation: slideInFromTop 0.5s ease forwards;
}

.mobile-nav-overlay.active .mobile-nav-section:nth-child(1) {
   animation-delay: 0.1s;
}

.mobile-nav-overlay.active .mobile-nav-section:nth-child(2) {
   animation-delay: 0.15s;
}

.mobile-nav-overlay.active .mobile-nav-section:nth-child(3) {
   animation-delay: 0.2s;
}

.mobile-nav-overlay.active .mobile-nav-section:nth-child(4) {
   animation-delay: 0.25s;
}

.mobile-nav-overlay.active .mobile-nav-section:nth-child(5) {
   animation-delay: 0.3s;
}

.mobile-nav-overlay.active .mobile-nav-section:nth-child(6) {
   animation-delay: 0.35s;
}

.mobile-nav-overlay.active .mobile-nav-section:nth-child(7) {
   animation-delay: 0.4s;
}

/* Top Navigation Menu */
.top-nav-menu {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0;
}

.top-nav-menu li {
   display: inline-block;
   margin: 0;
   padding: 0;
}

.top-nav-menu li:not(:last-child)::after {
   content: "|";
   color: var(--text-dark);
   margin: 0 12px;
   font-weight: 300;
}

.top-nav-menu li a {
   color: var(--text-dark);
   text-decoration: none;
   font-size: 15px;
   padding: 4px 0;
   display: inline-block;
   transition: color 0.2s ease;
}

.top-nav-menu li a:hover {
   color: var(--primary-red);
   text-decoration: none;
}

@media (max-width: 768px) {
   .top-nav-menu {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
   }

   .top-nav-menu li:not(:last-child)::after {
      display: none;
   }

   .top-nav-menu li a {
      font-size: 15px;
   }
}

/* ==========================================================================
   7. NEWS TICKER
   ========================================================================== */

.news-ticker {
   background-color: var(--light-gray) !important;
}

.ticker-news {
   display: flex;
   align-items: center;
   flex: 1;
   overflow: hidden;
}

.ticker-news marquee {
   flex: 1;
   display: block;
   white-space: nowrap;
   overflow: hidden;
   line-height: 1.5;
}

.ticker-item {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   margin-right: 2rem;
   gap: 6px;
}

.ticker-item::before {
   content: "■";
   color: var(--primary-red);
   font-size: 0.85rem;
   flex-shrink: 0;
}

.ticker-item a {
   color: var(--primary-red);
   font-weight: 500;
   text-decoration: none;
   transition: color 0.2s;
    font-size: 15px;
   white-space: nowrap;
}

.ticker-item a:hover {
   color: var(--black);
   text-decoration: none;
}

/* ==========================================================================
   8. NEWS SECTIONS & CARDS
   ========================================================================== */

.news-sections .news-cards {
   border: 1px solid var(--border-gray);
   border-radius: 8px;
   background-color: var(--white);
   padding: 0;
   box-shadow: 0 1px 2px var(--shadow-dark-02);
}

.news-sections .news-cards .section-header {
   border-bottom: 1px solid var(--border-gray);
   margin: 0 0 0.25rem 0;
   padding: 0.25rem 0 0.5rem 0;
}

.news-sections .news-cards .news-card {
   border-top: 1px solid var(--border-gray);
   padding-top: 0.45rem;
   margin-top: 0;
}

.news-sections .news-cards .news-card:first-of-type {
   border-top: none;
   padding-top: 0.25rem;
   margin-top: 0.25rem;
}

.news-sections .news-cards .news-header:first-child {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
}

.news-cards .sub-nav a:hover {
   color: var(--primary-blue) !important;
}

.news-cards ul.list-unstyled li {
   position: relative;
   padding-left: 20px;
   padding-top: 3px;
}

.news-cards ul.list-unstyled li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0.6rem;
   width: 12px;
   height: 12px;
   background-image: url('../images/arrow_left.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

/* News Header */
.news-header {
   border-radius: 4px 4px 0 0;
   border-bottom: 1px solid var(--border-gray);
   background-color: var(--primary-red);
}

.news-header h5,
.news-section h5,
.featured-post-section h3,
.whats-new-section h3,
.latest-news-articles h3,
.two-column-sections h4,
.two-column-banner-section h5 {
   position: relative;
   padding-left: 20px;
   font-family: var(--font-heading);
}

.news-header h5::before,
.news-section h5::before,
.featured-post-section h3::before,
.whats-new-section h3::before,
.latest-news-articles h3::before,
.two-column-sections h4::before,
.two-column-banner-section h5::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 20px;
   height: 20px;
   background-image: url('../images/co-dang.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   transform: translateY(-50%);
}

.breadcrumb {
   margin-bottom: 15px;
   font-size: 15px;
}

.breadcrumb-item .breadcrumb-link {
   color: var(--primary-blue) !important;
   text-decoration: none;
}

.breadcrumb-item .breadcrumb-link:hover {
   color: var(--primary-red) !important;
   text-decoration: underline;
}

/* ==========================================================================
   9. WEATHER ICONS
   ========================================================================== */

.weather-icon {
   color: var(--primary-blue) !important;
}

/* ==========================================================================
   9.1 INDEX PAGE IMAGES
   ========================================================================== */

.featured-article-image {
   max-height: 280px;
   width: 100%;
   object-fit: cover;
   border-radius: 0.375rem;
}

.multimedia-featured-image {
   max-height: 200px;
   width: 100%;
   object-fit: cover;
}

.multimedia-card-image {
   max-height: 160px;
   width: 100%;
   object-fit: cover;
   border-radius: 0.375rem;
}

/* ==========================================================================
   9.2 MULTIMEDIA PAGE HEADERS
   ========================================================================== */

.multimedia-header-link {
   color: var(--text-dark) !important;
   text-decoration: none;
}

.multimedia-header-link:hover {
   color: var(--primary-blue) !important;
   text-decoration: none;
}

.multimedia-header-link i {
   color: var(--primary-red) !important;
}

.news-header h5,
.news-section h5 {
   color: var(--yellow) !important;
   font-size: 18px;
   padding-left: 30px;
   text-transform: uppercase;
}

.news-header h5 a,
.news-section h5 a,
.news-header a {
   text-decoration: none;
   color: var(--yellow) !important;
}

.news-header a {
   color: var(--white) !important;
   text-transform: uppercase;
   font-weight: 600;
}

/* Category Title Style */
.category-title {
   color: var(--primary-red);
   text-transform: uppercase;
   font-weight: 700;
   position: relative;
   padding-left: 22px;
   font-family: var(--font-heading);
}

.category-title::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 10px;
   height: 26px;
   background: var(--primary-red);
   transform: translateY(-50%) skewX(-18deg);
   border-radius: 1px;
   font-weight: 900;
   line-height: 1;
}

.multimedia-section {
   margin-bottom: 3rem;
}

.section-title {
   font-size: 24px;
   font-weight: 600;
   color: var(--text-dark);
   border-bottom: 2px solid var(--primary-red);
   padding-bottom: 0.5rem;
   margin-bottom: 2rem;
}

/* Article Detail Boxes */
.article-box {
   background: var(--white);
   border: 1px solid var(--border-gray);
   border-radius: 8px;
   box-shadow: 0 2px 4px var(--shadow-dark-10);
}

.article-box-header {
   background: var(--primary-red);
   border-radius: 8px 8px 0 0;
   margin-bottom: 0;
}

.article-box-header h5 {
   color: var(--white) !important;
   margin-bottom: 0;
}

.article-box-body {
   padding: 1rem;
}

.article-comment-avatar {
   width: 50px;
   height: 50px;
   object-fit: cover;
}

/* Article Content Images */
.article-content {
   line-height: 1.8;
}

.article-content img {
   max-width: 100% !important;
   height: auto !important;
   display: block;
   margin: 1rem 0;
   border-radius: 4px;
}

.article-content p {
   margin-bottom: 1rem;
}

.article-content p img {
   margin: 0.5rem auto;
}

/* Share Article Toolbar */
.share-article {
   background: var(--gray-lighter);
   border-radius: 4px;
   padding: 0.5rem 1rem;
}

.share-article-inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem 1.5rem;
}

.share-article-tools,
.share-article-social {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.35rem;
}

.share-article-label {
   font-size: 15px;
   font-weight: 600;
   color: var(--secondary-gray);
   margin-right: 0.25rem;
}

.share-article-divider {
   width: 1px;
   height: 1.25rem;
   background: var(--border-gray-light);
   margin: 0 0.25rem;
   flex-shrink: 0;
}

.share-article-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.35rem;
   padding: 0.4rem 0.75rem;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.2;
   color: var(--text-dark);
   background: var(--white);
   border: 1px solid var(--border-gray-light);
   border-radius: 6px;
   text-decoration: none;
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.share-article-btn:hover {
   background: var(--white);
   border-color: var(--primary-blue);
   color: var(--primary-blue);
   box-shadow: 0 1px 3px var(--shadow-dark-05);
}

.share-article-btn:active {
   transform: translateY(0);
}

.share-article-btn i,
.share-article-btn .icon-zalo {
   font-size: 15px;
}

.share-article-btn.share-facebook:hover {
   border-color: var(--facebook);
   color: var(--facebook);
}

.share-article-btn.share-email:hover {
   border-color: var(--primary-blue);
   color: var(--primary-blue);
}

.share-article-btn.zalo-share-button:hover {
   border-color: var(--primary-blue-light);
   color: var(--primary-blue-light);
}

@media (max-width: 576px) {
   .share-article-inner {
      flex-direction: column;
      align-items: flex-start;
   }

   .share-article-tools,
   .share-article-social {
      width: 100%;
   }
}

/* News Cards */
.news-card h6 {
   font-size: 15px;
   line-height: 1.4;
   transition: color 0.3s ease;
}

.news-card h6:hover {
   color: var(--primary-blue);
   cursor: pointer;
}

.news-item h6 {
   font-size: 15px;
   line-height: 1.4;
   color: var(--text-dark);
}

.news-item h6:hover {
   color: var(--primary-blue);
   cursor: pointer;
}

.news-list .news-item:first-child {
   margin-top: 1rem;
}

.news-item img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   margin-left: 0.5rem;
}

/* Category List View Image */
.news-item.news-item-list-view img {
   width: 100px;
   height: 80px;
   object-fit: cover;
}

@media (min-width: 768px) {
   .news-item.news-item-list-view img {
      width: 200px;
      height: 150px;
   }
}

@media (max-width: 768px) {
   .news-item.news-item-list-view h5 {
      font-size: 15px;
   }
}

.card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 16px var(--shadow-dark-15) !important;
}

/* ==========================================================================
   11. FEATURED ARTICLES & CAROUSEL
   ========================================================================== */

.featured-carousel {
   position: relative;
}

.featured-article {
   min-height: 400px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   position: relative;
}

.featured-article img {
   width: 100%;
   height: 400px;
   object-fit: cover;
}

.featured-carousel .carousel-control-prev,
.featured-carousel .carousel-control-next {
   width: 50px;
   height: 50px;
   background-color: var(--yellow-light);
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0.9;
   transition: all 0.3s;
   box-shadow: 0 2px 8px var(--shadow-dark-15);
}

.featured-carousel .carousel-control-prev {
   left: 15px;
}

.featured-carousel .carousel-control-next {
   right: 15px;
}

.featured-carousel .carousel-control-prev:hover,
.featured-carousel .carousel-control-next:hover {
   opacity: 1;
   background-color: var(--yellow-cream);
   box-shadow: 0 4px 12px var(--shadow-dark-20);
   transform: translateY(-50%) scale(1.05);
}

.featured-carousel .carousel-control-prev-icon,
.featured-carousel .carousel-control-next-icon {
   width: 20px;
   height: 20px;
   filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

.featured-content h3 {
   font-size: 24px;
   line-height: 1.4;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
}

.featured-large {
   min-height: 480px;
   cursor: pointer;
   transition: transform 0.3s ease;
}

.featured-large:hover {
   transform: translateY(-5px);
}

.featured-large img {
   height: 480px;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.featured-grid .d-flex {
   cursor: pointer;
}

.featured-grid .d-flex:hover {
   background-color: var(--gray-lighter);
   padding-left: 0.5rem;
   border-radius: 8px;
}

.featured-grid .d-flex:hover h6 {
   color: var(--primary-blue);
}

.featured-news {
   cursor: pointer;
   transition: all 0.3s ease;
}

.featured-news:hover {
   transform: translateY(-3px);
}

.featured-news:hover h6 {
   color: var(--primary-blue);
}

/* ==========================================================================
   12.1 GRID VIEW STYLES
   ========================================================================== */

/* Grid View One */
.grid-view-one-container {
   padding: 0 15px 15px;
}

.grid-view-one-card {
   background: var(--white);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 8px var(--shadow-dark-10);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-view-one-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 4px 15px var(--shadow-dark-20);
}

.grid-view-one-image-wrapper {
   position: relative;
   width: 100%;
   height: 280px;
   overflow: hidden;
   background: var(--black);
}

.grid-view-one-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.grid-view-one-card:hover .grid-view-one-image {
   transform: scale(1.05);
}

.grid-view-one-text {
   padding: 15px;
   background: var(--white);
}

.grid-view-one-text h6 {
   font-size: 16px;
   line-height: 1.4;
}

/* Grid View Two */
.grid-view-two-container {
   padding: 0 15px 15px;
}

.grid-view-two-card {
   background: var(--white);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 8px var(--shadow-dark-10);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-view-two-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 4px 15px var(--shadow-dark-20);
}

.grid-view-two-image-wrapper {
   position: relative;
   width: 100%;
   height: 280px;
   overflow: hidden;
   background: var(--black);
}

.grid-view-two-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.grid-view-two-card:hover .grid-view-two-image {
   transform: scale(1.05);
}

.grid-view-two-circular-highlight {
   position: absolute;
   right: 20px;
   bottom: 20px;
   width: 120px;
   height: 120px;
   border-radius: 50%;
   border: 4px solid var(--white);
   overflow: hidden;
   box-shadow: 0 4px 12px var(--shadow-dark-40);
   z-index: 2;
}

.grid-view-two-circular-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.grid-view-two-logo-badge {
   position: absolute;
   left: 20px;
   bottom: 20px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--black);
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 15px;
   box-shadow: 0 2px 8px var(--shadow-dark-30);
   z-index: 2;
}

.grid-view-two-text {
   padding: 15px;
   background: var(--white);
}

.grid-view-two-text h6 {
   font-size: 16px;
   line-height: 1.4;
}

/* ==========================================================================
   12.2 LIST VIEW STYLES
   ========================================================================== */

/* List View Four */
.list-view-four-featured {
   padding: 0 15px;
}

.list-view-four-featured-image-wrapper {
   position: relative;
   width: 100%;
   height: 400px;
   overflow: hidden;
   background: var(--black);
   border-radius: 8px;
   margin-bottom: 15px;
}

.list-view-four-featured-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.list-view-four-featured-image-wrapper:hover .list-view-four-featured-image {
   transform: scale(1.02);
}

.list-view-four-watermark {
   position: absolute;
   bottom: 15px;
   right: 15px;
   background: var(--overlay-white-85);
   padding: 5px 12px;
   border-radius: 4px;
   font-size: 15px;
   font-weight: 600;
   color: var(--text-dark);
   pointer-events: none;
}

.list-view-four-featured-title {
   padding: 0 15px;
}

.list-view-four-featured-title h4 {
   font-size: 24px;
   line-height: 1.4;
   color: var(--text-dark);
}

.list-view-four-list {
   padding: 0 15px 15px;
}

.list-view-four-item {
   padding: 15px 0;
   border-bottom: 1px solid var(--border-gray-light);
   transition: background-color 0.2s ease;
}

.list-view-four-item:last-child {
   border-bottom: none;
}

.list-view-four-item:hover {
   background-color: var(--light-gray);
   margin-left: -15px;
   margin-right: -15px;
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 4px;
}

.list-view-four-thumbnail {
   width: 90px;
   height: 60px;
   object-fit: cover;
   border-radius: 4px;
   transition: transform 0.2s ease;
}

.list-view-four-item:hover .list-view-four-thumbnail {
   transform: scale(1.05);
}

.list-view-four-item h6 {
   font-size: 16px;
   line-height: 1.4;
   color: var(--text-dark);
}

/* List View Five */
.list-view-five-container {
   padding: 0 15px 15px;
}

.list-view-five-featured {
   height: 100%;
}

.list-view-five-featured-image {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
}

.list-view-five-featured-image img {
   transition: transform 0.3s ease;
}

.list-view-five-featured-image:hover img {
   transform: scale(1.02);
}

.list-view-five-featured-content h3 {
   font-size: 28px;
   line-height: 1.4;
   color: var(--text-dark);
}

.list-view-five-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.list-view-five-meta span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.list-view-five-meta i {
   font-size: 15px;
}

.list-view-five-featured-content p {
   font-size: 16px;
   line-height: 1.6;
   color: var(--secondary-gray);
}

.list-view-five-sidebar {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.list-view-five-sidebar-item {
   padding-bottom: 20px;
   border-bottom: 1px solid var(--border-gray-light);
   transition: transform 0.2s ease;
}

.list-view-five-sidebar-item:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.list-view-five-sidebar-item:hover {
   transform: translateX(5px);
}

.list-view-five-sidebar-thumbnail {
   width: 100px;
   height: 100px;
   object-fit: cover;
   border-radius: 6px;
   transition: transform 0.2s ease;
}

.list-view-five-sidebar-item:hover .list-view-five-sidebar-thumbnail {
   transform: scale(1.05);
}

.list-view-five-sidebar-item h6 {
   font-size: 16px;
   line-height: 1.4;
   color: var(--text-dark);
   margin-bottom: 8px;
}

.list-view-five-sidebar-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   font-size: 15px;
}

.list-view-five-sidebar-meta span {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.list-view-five-sidebar-meta i {
   font-size: 15px;
}

/* ==========================================================================
   13. MULTIMEDIA STYLES
   ========================================================================== */

.multimedia-content-wrapper {
   background: var(--light-gray);
   border-radius: 8px;
}


.multimedia-video .ratio {
   border-radius: 8px;
   overflow: hidden;
   background: var(--black);
}

.multimedia-video iframe,
.multimedia-video video {
   border-radius: 8px;
}

/* Photo Gallery Styles */
.multimedia-photo .multimedia-gallery img {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.multimedia-photo .multimedia-gallery img:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 20px var(--shadow-dark-20);
}

/* Audio Player Styles */
.multimedia-audio .audio-player-wrapper {
   border: 2px solid var(--border-gray);
   box-shadow: 0 2px 10px var(--shadow-dark-10);
}

.multimedia-audio .audio-icon-wrapper {
   width: 80px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--white);
   border-radius: 50%;
   box-shadow: 0 2px 8px var(--shadow-dark-10);
}

.multimedia-audio audio {
   border-radius: 4px;
}


.multimedia-graphic #multimediaGraphicCarousel {
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 15px var(--shadow-dark-15);
}

.multimedia-graphic .carousel-item img {
   max-height: 600px;
   object-fit: contain;
   background: var(--light-gray);
}

/* Multimedia Hero Section */
.multimedia-hero-section .bg-dark {
   background-color: var(--black) !important;
}

.multimedia-hero-bar {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
}

.hero-slider {
   min-height: 450px;
}

.hero-slider img {
   width: 100%;
   height: 650px;
   object-fit: cover;
   object-position: center;
}

.hero-slider button {
   width: 60px;
   height: 60px;
   line-height: 54px;
   box-shadow: 0 2px 8px var(--shadow-dark-30);
}

.hero-slider button:hover {
   transform: scale(1.1);
}

.multimedia-hero-section a {
   transition: opacity 0.3s ease;
}

.multimedia-hero-section a:hover {
   opacity: 0.7;
   text-decoration: underline !important;
}

.multimedia-box {
   height: 100%;
   background-color: var(--light-gray);
   border-radius: 0 0 8px 8px;
}

.multimedia-header {
   border-radius: 4px 4px 0 0;
   text-transform: uppercase;
   padding: 10px 20px;
}

.audio-player {
   border: 1px solid var(--border-gray);
}

.progress {
   background-color: var(--light-gray);
}

.audio-list ul li {
   padding: 0.5rem 0;
}

.audio-list ul li:hover {
   background-color: var(--light-gray);
   padding-left: 0.5rem;
   border-radius: 4px;
}

.news-mini-list img,
.video-mini-list img,
.hot-news-list img {
   width: 60px;
   height: 60px;
   object-fit: cover;
}

.news-mini-list .d-flex,
.video-mini-list .d-flex,
.hot-news-list .d-flex {
   border-radius: 4px;
}

.news-mini-list .d-flex:hover,
.video-mini-list .d-flex:hover,
.hot-news-list .d-flex:hover {
   background-color: var(--light-gray);
   cursor: pointer;
}

.hot-news-list .d-flex,
.video-mini-list .d-flex {
   border-top: 1px solid var(--border-gray-lightest);
   padding: 0.75rem 0.5rem;
   margin: 0.5rem 0.5rem;
}

/* ==========================================================================
   14. SIDEBAR
   ========================================================================== */

.sidebar-box {
   border: 1px solid var(--border-gray);
}

.sidebar-box .sidebar-box-title {
   position: relative;
   padding-left: 20px;
   font-size: 20px;
   font-family: var(--font-heading);
   color: var(--primary-red);
}

.sidebar-box .sidebar-box-title::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 10px;
   height: 22px;
   background: var(--primary-red);
   transform: translateY(-50%) skewX(-18deg);
   border-radius: 1px;
}

.sidebar-box .most-read-title {
   padding-left: 0;
   font-size: 16px;
   line-height: 1.4;
   font-family: var(--font-heading);
   font-weight: 500;
   color: var(--text-dark);
}

.sidebar-box h5 {
   position: relative;
   font-family: var(--font-heading);
   color: var(--primary-red);
}

.sidebar-box h5 i {
   color: var(--primary-red);
}

.sidebar-accent-bar {
   display: inline-block;
   width: 4px;
   height: 20px;
   background-color: var(--primary-red);
   vertical-align: middle;
}

.sidebar-list li {
   cursor: pointer;
   transition: all 0.3s ease;
}

.sidebar-list li:hover {
   color: var(--primary-blue);
   padding-left: 5px;
}

.sidebar-list li small {
   line-height: 1.5;
}

.sidebar-list.list-unstyled {
   position: relative;
}

.sidebar-list.list-unstyled li {
   position: relative;
   padding-left: 12px;
}

.sidebar-list.list-unstyled li:before {
   content: "";
   height: 6px;
   width: 6px;
   background: var(--primary-red);
   position: absolute;
   left: 0;
   top: 8px;
}

.most-read-item {
   cursor: pointer;
   transition: all 0.3s ease;
}

.most-read-item:hover {
   background-color: var(--yellow);
   padding: 0.5rem;
   margin: -0.5rem;
   border-radius: 4px;
}

.most-read-item small {
   line-height: 1.4;
}

/* ==========================================================================
   15. BANNERS & SPECIAL SECTIONS
   ========================================================================== */

.top-banner {
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-top: 1px solid var(--border-gray);
   height: 200px;
   display: flex;
   align-items: center;
}

.top-banner .banner-content {
   position: relative;
   z-index: 1;
   background-color: var(--shadow-white-90);
}

.banner-header {
   margin: 1rem 0;
}

.banner-header .bg-danger {
   min-height: 60px;
}

.top-banner-left {
   min-height: 100px;
}

.top-banner-right {
   min-height: 100px;
}

.hcm-banner {
   background: linear-gradient(135deg, var(--pink-light) 0%, var(--pink-dark) 100%);
   min-height: 300px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.hcm-banner:hover {
   transform: scale(1.02);
}

.anniversary-banner {
   min-height: 250px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.anniversary-banner:hover {
   transform: scale(1.02);
}

.link-box {
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
}

.link-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 4px 12px var(--shadow-dark-15);
}

/* Featured Panels Section */
.featured-panels-section {
   margin: 2rem 0;
   background-color: var(--light-gray);
   border: 1px solid var(--border-gray);
   border-radius: 12px;
   padding: 1rem;
}

.featured-panels-section .row.g-0>[class*="col-"] {
   padding: 0.5rem;
}

.featured-panel {
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

.featured-panel img {
   display: block;
}

.featured-panel:hover img {
   opacity: 0.8;
}

.panel-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, var(--shadow-dark-80), var(--shadow-dark-40), transparent);
   padding: 1.5rem 1rem 1rem;
}

.panel-text h6 {
   font-size: 15px;
   line-height: 1.4;
   text-shadow: 1px 1px 2px var(--shadow-dark-50);
   white-space: normal;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   line-clamp: 2;
}

.featured-panels-section .panel-img {
   height: 400px;
   object-fit: cover;
   object-position: center;
   display: block;
}

/* VGP Shorts Section */
.vgp-shorts-section {
   background: linear-gradient(to bottom, var(--gray-lighter), var(--white));
}

.video-thumbnail {
   cursor: pointer;
}

.video-thumbnail h6 {
   color: var(--text-dark);
   line-height: 1.3;
}

.video-thumbnail:hover h6 {
   color: var(--primary-blue);
}

.video-card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 4px 12px var(--shadow-dark-15) !important;
}

/* What's New Section */
.whats-new-section .featured-large img {
   height: 400px;
}

.news-list .d-flex {
   cursor: pointer;
}

.news-list .d-flex:hover {
   background-color: var(--light-gray);
   border-radius: 8px;
}

.news-list .d-flex:hover h6 {
   color: var(--primary-blue);
}

.latest-news .news-list .latest-news-list-title {
   line-height: 1.4;
   margin-bottom: 0;
}

.latest-news .news-list .latest-news-list-title a {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   line-clamp: 4;
   word-break: break-word;
}

.news-section ul li {
   cursor: pointer;
   transition: all 0.3s ease;
}

.news-section ul li:hover {
   background-color: var(--gray-lighter);
}

.news-section ul li:hover small {
   color: var(--primary-blue);
}

/* Latest News Articles */
.article-preview {
   cursor: pointer;
}

.article-preview:hover h4 {
   color: var(--primary-blue);
}

.article-preview .btn-outline-dark:hover {
   background-color: var(--primary-blue);
   border-color: var(--primary-blue);
   color: var(--white);
}

.article-preview img {
   transition: transform 0.3s ease;
}

.article-preview:hover img {
   transform: scale(1.05);
}

/* Longform Section */
.longform-section .position-absolute {
   z-index: 1;
}

/* Box Head & Content */
.box-content {
   padding: 20px 20px;
   background-color: var(--gray-lighter);
   border-radius: 0 0 8px 8px;
}

.box-head {
   display: flex;
   align-items: center;
   gap: 16px;
   background: linear-gradient(90deg, var(--yellow-bright) 0%, var(--yellow-cream) 25%, var(--white) 60%);
   border-bottom: 4px solid var(--primary-red);
   min-height: 42px;
   padding: 0;
}

.box-badge {
   position: relative;
   height: 42px;
   width: 64px;
   background: var(--primary-red);
   display: flex;
   align-items: center;
   justify-content: center;
   border-top-left-radius: 8px;
}

.box-badge::after {
   content: "";
   position: absolute;
   right: -17px;
   top: 0;
   width: 0;
   height: 0;
   border-top: 43px solid transparent;
   border-bottom: 0px solid transparent;
   border-left: 18px solid var(--primary-red);
}

.box-badge i,
.box-badge .box-icon {
   width: 28px;
   height: 24px;
   background: url('../images/co-dang.png') center/cover no-repeat;
   display: inline-block;
   filter: brightness(110%);
}

.box-title {
   margin: 0 0 0 15px;
   color: var(--primary-red);
   font-weight: 800;
   font-size: 19.2px;
   text-transform: uppercase;
   font-family: var(--font-heading);
}

.box-head .box-nav {
   margin-left: auto;
   display: flex;
   align-items: center;
}

.box-nav a {
   color: var(--text-dark) !important;
   text-decoration: none;
   margin: 0 10px;
   font-weight: 600;
   font-size: 15px;
}

.box-nav a:hover {
   color: var(--primary-red) !important;
}

/* Quote Container */
.quote-container {
   background: linear-gradient(90deg, var(--yellow-pale) 0%, var(--yellow-pale-light) 100%, var(--white) 100%);
   border-radius: 8px;
   padding: 15px;
   line-height: 1.6;
   font-size: 17.6px;
   color: var(--primary-red);
   box-shadow: 0 2px 8px var(--shadow-dark-05);
}

.quote-container .author {
   font-size: 15px;
   color: var(--primary-blue);
}

/* Social Icons */
.social-icons a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background-color: var(--yellow-light);
   color: var(--text-dark);
   text-decoration: none !important;
   transition: all 0.3s ease;
}

.social-icons a:hover {
   text-decoration: none !important;
   transform: translateY(-3px);
   box-shadow: 0 4px 8px var(--shadow-dark-10);
   color: var(--primary-red);
}

.social-icons a i {
   color: var(--primary-red);
}

.social-icons a:hover i {
   color: var(--primary-blue);
}

/* Tab Navigation */
.nav-pills .nav-link {
   border-radius: 20px;
   padding: 0.5rem 1.5rem;
   margin-right: 0.5rem;
   background-color: var(--white);
   color: var(--secondary-gray);
   border: 1px solid var(--border-gray-light);
   transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
   background-color: var(--primary-red);
   color: var(--white);
   border-color: var(--primary-red);
}

.nav-pills .nav-link:hover:not(.active) {
   background-color: var(--gray-lighter);
   border-color: var(--primary-blue);
   color: var(--primary-blue);
}

/* Fama Menu */
.fama-menu .menu-item {
   transition: all 0.3s ease;
   border: 2px solid transparent;
}

.fama-menu .menu-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 8px var(--shadow-dark-15);
   border-color: var(--primary-blue);
   background-color: var(--light-gray) !important;
}

.fama-menu .menu-item:active {
   transform: translateY(0);
   box-shadow: 0 2px 4px var(--shadow-dark-10);
}

.hands-icon {
   position: relative;
   z-index: 1;
}

.icon-live {
   border-radius: 4px;
   padding: 2px 4px;
   display: inline-block;
   font-weight: 700;
   font-size: 15px;
   line-height: 16px;
   text-align: center;
   color: var(--primary-red);
   background-repeat: no-repeat;
   background-position: 0;
   margin-right: 4px;
   position: relative;
   top: -2px;
}

.icon-live:before,
.icon-live:after {
   content: "";
   position: absolute;
   display: block;
   left: 4px;
   top: 50%;
   transform: translateY(-50%);
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--primary-red);
}

.icon-live:before {
   z-index: 2;
}

.icon-live:after {
   z-index: 1;
   animation: circle 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes circle {
   0% {
      transform: translateY(-50%) scale(0.8);
      opacity: 1;
   }

   100% {
      transform: translateY(-50%) scale(2.5);
      opacity: 0;
   }
}

@keyframes shine {
   0% {
      transform: translateX(-100%) translateY(-100%) rotate(45deg);
   }

   100% {
      transform: translateX(100%) translateY(100%) rotate(45deg);
   }
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.footer {
   margin-top: auto;
   background: linear-gradient(rgba(var(--bs-warning-rgb), 0.1), rgba(var(--bs-warning-rgb), 0.15)), url(../images/bg.svg) center / cover no-repeat;
   padding: 2rem 0;
   border-top: 1px solid var(--border-gray);
   position: relative;
   min-height: 400px;
}

.footer a {
   color: var(--text-dark);
   text-decoration: none;
   transition: all 0.3s ease;
}

.footer a:hover {
   color: var(--primary-blue);
   text-decoration: underline;
}

.footer-nav .d-flex a {
   font-size: 16px;
}

.footer-main h6 {
   color: var(--text-dark);
   font-weight: bold;
}

/* Footer Navigation - Column Layout */
.footer-nav .item-column-layout {
   padding: 20px 0;
   margin: 0;
}

.footer-nav .item-column-layout>div {
   margin-bottom: 30px;
}

.footer-nav .item-column-layout h5 {
   font-size: 15px;
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 12px;
   padding-bottom: 12px;
   padding-left: 0;
   position: relative;
   color: var(--text-dark);
   border-bottom: 1px solid var(--border-gray);
}

.footer-nav .item-column-layout h5::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: -1px;
   width: 40%;
   height: 2px;
   background: var(--primary-red);
}

.footer-nav .item-column-layout h5 a {
   color: var(--text-dark);
   text-decoration: none;
   display: inline-block;
}

.footer-nav .item-column-layout h5 a:hover {
   color: var(--primary-red);
   text-decoration: none;
}

.footer-nav .item-column-layout ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-nav .item-column-layout ul li {
   margin-bottom: 8px;
   position: relative;
   padding-left: 15px;
}

.footer-nav .item-column-layout ul li::before {
   content: "•";
   position: absolute;
   left: 0;
   color: var(--text-dark);
   font-weight: bold;
}

.footer-nav .item-column-layout ul li a {
   color: var(--text-dark);
   text-decoration: none;
   font-size: 15px;
   line-height: 1.5;
   transition: color 0.2s ease;
}

.footer-nav .item-column-layout ul li a:hover {
   color: var(--primary-red);
   text-decoration: none;
}

/* Footer Governments Grid */
.governments {
   margin: 60px 0;
   position: relative;
   background: var(--yellow-light);
   padding: 20px;
   border-radius: 4px;
   box-shadow: 0 1px 4px var(--shadow-dark-10);
}

.governments-header h3 {
   font-size: 18px;
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 12px;
   padding-left: 20px;
   position: relative;
}

.governments-header h3::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 10px;
   height: 22px;
   background: var(--primary-red);
   transform: translateY(-50%) skewX(-18deg);
   border-radius: 1px;
}

.governments-grid {
   position: relative;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
}

.governments-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 20px 15px;
   background-color: var(--white);
   border: 1px solid var(--border-gray);
   border-radius: 8px;
   transition: all 0.3s ease;
   cursor: pointer;
}

.governments-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 4px 12px var(--shadow-dark-15);
   border-color: var(--primary-red);
}

.governments-icon {
   width: 80px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
   background-color: var(--light-gray);
   border-radius: 50%;
   position: relative;
   overflow: hidden;
}

.governments-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 10px;
}

.governments-text {
   font-weight: 700;
   color: var(--text-dark);
   line-height: 1.4;
   text-align: center;
}

.governments-text a {
   color: var(--text-dark);
   text-decoration: none;
   transition: color 0.2s ease;
}

.governments-text a:hover {
   color: var(--primary-red);
   text-decoration: none;
}

.governments-item:hover .governments-text {
   color: var(--primary-red);
}

.governments-item:hover .governments-text a {
   color: var(--primary-red);
}

/* Government Tabs */
.gov-tabs-wrapper {
   margin: 40px 0;
   background: #fff;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 1px 4px var(--shadow-dark-10);
}

.gov-tabs-header {
   display: flex;
   background: var(--primary-red);
}

.gov-tab-btn {
   padding: 12px 20px;
   border: none;
   background: transparent;
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.2s ease;
   border-right: 1px solid rgba(255, 255, 255, 0.25);
   position: relative;
}

.gov-tab-btn:last-child {
   border-right: none;
}

.gov-tab-btn:hover {
   background: rgba(255, 255, 255, 0.1);
}

.gov-tab-btn--active {
   color: #ffeb3b;
}

.gov-tabs-body {
   padding: 20px;
   background: #fafafa;
}

.gov-tab-panel {
   display: none;
}

.gov-tab-panel--active {
   display: block;
}

.gov-tab-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px 24px;
}

.gov-tab-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 0;
   font-size: 15px;
   color: var(--text-dark);
}

.gov-tab-check {
   color: var(--primary-red);
   font-size: 14px;
   flex-shrink: 0;
}

.gov-tab-link {
   color: var(--text-dark);
   text-decoration: none;
   transition: color 0.2s ease;
}

.gov-tab-link:hover {
   color: var(--primary-red);
   text-decoration: none;
}

.gov-tab-text {
   color: var(--text-dark);
}

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

@media (max-width: 576px) {
   .gov-tabs-header {
      flex-direction: column;
   }

   .gov-tab-btn {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.25);
      text-align: left;
      font-size: 14px;
      padding: 10px 16px;
   }

   .gov-tab-btn:last-child {
      border-bottom: none;
   }

   .gov-tab-grid {
      grid-template-columns: 1fr;
   }
}

/* Footer Backlinks */
.footer-backlinks {
   padding: 15px 0;
}

.footer-backlinks ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 15px 20px;
}

.footer-backlinks ul li {
   display: inline-block;
   margin: 0;
   padding: 0;
}

.footer-backlinks ul li::before {
   content: none;
}

.footer-backlinks ul li a {
   color: var(--text-dark);
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   transition: color 0.2s ease;
   padding: 4px 8px;
   display: inline-block;
}

.footer-backlinks ul li a:hover {
   color: var(--primary-red);
   text-decoration: none;
}

.footer-backlinks ul li:not(:last-child)::after {
   content: "|";
   color: var(--border-gray);
   margin-left: 20px;
   font-weight: 300;
}

/* Footer Statistics */
.footer-statistics {
   padding: 12px 0;
}

.statistics-content {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 10px;
   font-size: 15px;
   color: var(--text-dark);
}

.statistics-icon {
   color: var(--primary-red);
   font-size: 15px;
   margin-right: 4px;
}

.statistics-label {
   font-weight: 600;
   margin-right: 4px;
}

.statistics-content mark {
   color: var(--text-dark);
   padding: 2px 6px;
   border-radius: 3px;
   font-weight: 500;
   margin: 0 2px;
}

.statistics-content strong {
   background-color: var(--yellow-light);
   color: var(--text-dark);
   padding: 2px 6px;
   border-radius: 3px;
   font-weight: 700;
   margin: 0 2px;
}

.statistics-separator {
   color: var(--text-dark);
   margin: 0 6px;
   font-weight: 600;
}

/* ==========================================================================
   17. DOCUMENT SEARCH & TABLE
   ========================================================================== */

.search-box {
   background-color: var(--yellow-light);
   border: 1px solid var(--border-gray);
   border-radius: 8px;
   padding: 2rem;
   margin: 2rem 0;
}

.search-box h5 {
   color: var(--primary-red);
   font-weight: 700;
   font-family: var(--font-heading);
   text-transform: uppercase;
   margin-bottom: 1.5rem;
   font-size: 17.6px;
}

.search-box .form-label {
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 0.5rem;
   font-size: 15px;
}

.search-box .form-control,
.search-box .form-select {
   border: 1px solid var(--border-gray);
   border-radius: 4px;
   padding: 0.6rem 0.75rem;
   font-size: 15px;
}

.search-box .form-control:focus,
.search-box .form-select:focus {
   border-color: var(--primary-blue);
   box-shadow: 0 0 0 0.2rem var(--shadow-primary-alpha);
}

.search-box .btn-primary {
   background-color: var(--primary-blue);
   border-color: var(--primary-blue);
   padding: 0.6rem 2rem;
   font-weight: 600;
   font-size: 15px;
   text-transform: uppercase;
}

.search-box .btn-primary:hover {
   background-color: var(--primary-red);
   border-color: var(--primary-red);
}

.search-box .btn-secondary {
   background-color: var(--primary-red);
   border-color: var(--primary-red);
   padding: 0.6rem 2rem;
   font-weight: 600;
   font-size: 15px;
   text-transform: uppercase;
}

.search-box .btn-secondary:hover {
   background-color: var(--primary-red);
   border-color: var(--primary-red);
}

.table-section {
   background-color: var(--white);
   border: 1px solid var(--border-gray);
   border-radius: 8px;
   padding: 1.5rem;
   margin: 2rem 0;
}

.table-section h5 {
   color: var(--primary-red);
   font-weight: 700;
   font-family: var(--font-heading);
   text-transform: uppercase;
   margin-bottom: 1.5rem;
   font-size: 17.6px;
   padding-bottom: 0.75rem;
   border-bottom: 2px solid var(--primary-red);
}

.table-section .table {
   margin-bottom: 0;
   font-size: 15px;
}

.table-section .table thead {
   background-color: var(--primary-blue);
   color: var(--white);
}

.table-section .table thead th {
   font-weight: 600;
   text-transform: uppercase;
   padding: 0.9rem 0.75rem;
   font-size: 15px;
   border: none;
   vertical-align: middle;
}

.table-section .table tbody tr {
   border-bottom: 1px solid var(--border-gray);
   transition: background-color 0.2s ease;
}

.table-section .table tbody tr:hover {
   background-color: var(--yellow-light);
}

.table-section .table tbody td {
   padding: 0.9rem 0.75rem;
   vertical-align: middle;
}

.table-section .table tbody td a {
   color: var(--text-dark);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.2s ease;
}

.table-section .table tbody td a:hover {
   color: var(--primary-blue);
   text-decoration: underline;
}

.badge-type {
   display: inline-block;
   padding: 0.35rem 0.75rem;
   border-radius: 4px;
   font-size: 15px;
   font-weight: 600;
   text-transform: uppercase;
}

.badge-nghi-quyet {
   background-color: var(--badge-blue-bg);
   color: var(--badge-blue);
}

.badge-chi-thi {
   background-color: var(--badge-orange-bg);
   color: var(--badge-orange);
}

.badge-ke-hoach {
   background-color: var(--badge-purple-bg);
   color: var(--badge-purple);
}

.badge-bao-cao {
   background-color: var(--badge-green-bg);
   color: var(--badge-green);
}

.badge-cong-van {
   background-color: var(--badge-pink-bg);
   color: var(--badge-pink);
}

.badge-chuong-trinh {
   background-color: var(--badge-teal-bg);
   color: var(--badge-teal);
}

.badge {
   font-size: 15px;
   font-weight: 600;
   padding: 0.35rem 0.65rem;
}

.table-section .pagination {
   margin-top: 1.5rem;
}

.table-section .pagination .page-link {
   color: var(--primary-blue);
   border-color: var(--border-gray);
   padding: 0.5rem 0.85rem;
   font-weight: 500;
   font-size: 15px;
}

.table-section .pagination .page-link:hover {
   background-color: var(--yellow-light);
   border-color: var(--primary-blue);
   color: var(--primary-blue);
}

.table-section .pagination .page-item.active .page-link {
   background-color: var(--primary-blue);
   border-color: var(--primary-blue);
   color: var(--white);
}

.table-section .pagination .page-item.disabled .page-link {
   color: var(--secondary-gray);
   background-color: var(--light-gray);
}

.download-icon {
   color: var(--primary-red);
   font-size: 17.6px;
   cursor: pointer;
   transition: color 0.2s ease;
}

.download-icon:hover {
   color: var(--primary-red-hover);
}

.mobile-card-view {
   display: none;
}

.document-card {
   background: var(--white);
   border: 1px solid var(--border-gray);
   border-radius: 8px;
   padding: 1rem;
   margin-bottom: 1rem;
   box-shadow: 0 2px 4px var(--shadow-dark-05);
}

.document-card h6 {
   color: var(--primary-blue);
   font-weight: 600;
   font-size: 16px;
   line-height: 1.4;
   margin-bottom: 0.75rem;
}

.document-card h6 a {
   color: var(--primary-blue);
   text-decoration: none;
}

.document-card h6 a:hover {
   color: var(--primary-red);
   text-decoration: underline;
}

.document-info {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.document-info-row {
   display: flex;
   font-size: 15px;
   color: var(--text-dark);
}

.document-info-row strong {
   min-width: 120px;
   font-weight: 600;
   color: var(--secondary-gray);
}

.document-card .download-link {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--primary-red);
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
   margin-top: 0.5rem;
}

.document-card .download-link:hover {
   color: var(--primary-red-hover);
}

.document-card .download-link i {
   font-size: 16px;
}

.results-info {
   color: var(--secondary-gray);
   font-size: 15px;
   margin-bottom: 1rem;
   font-weight: 500;
}

.results-info strong {
   color: var(--primary-red);
}

.empty-state {
   text-align: center;
   padding: 3rem 1rem;
   color: var(--secondary-gray);
}

.empty-state i {
   font-size: 48px;
   color: var(--border-gray);
   margin-bottom: 1rem;
}

.empty-state p {
   margin: 0;
   font-size: 16px;
}

/* ==========================================================================
   18. SUPPORT ONLINE BUTTON
   ========================================================================== */

.support-online {
   position: fixed;
   bottom: 100px;
   right: 30px;
   z-index: 1000;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   gap: 20px;
}

.support-online-container {
   position: relative;
   width: 60px;
   height: 60px;
}

.support-online-container-content {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   background: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue-dark) 100%);
   border-radius: 50%;
   box-shadow: 0 4px 12px var(--shadow-primary-blue-40);
   transition: all 0.3s ease;
}

.support-online-container-content:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 16px var(--shadow-primary-blue-60);
}

.support-online-container-content-icon {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
}

.support-online-container-content-icon svg {
   width: 100%;
   height: 100%;
}

.ring-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 60px;
   height: 60px;
}

.ringring {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 60px;
   height: 60px;
   border: 2px solid var(--primary-blue-light);
   border-radius: 50%;
   animation: pulsate 2s ease-out infinite;
}

.circle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 12px;
   height: 12px;
   background-color: var(--primary-blue-light);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--shadow-primary-blue-80);
}

@keyframes pulsate {
   0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
   }

   50% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0.7;
   }

   100% {
      transform: translate(-50%, -50%) scale(1.6);
      opacity: 0;
   }
}

.sub-button {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--white);
   border-radius: 50%;
   box-shadow: 0 2px 8px var(--shadow-dark-15);
   opacity: 0;
   transform: translateX(-20px) scale(0.8);
   transition: all 0.3s ease;
   pointer-events: none;
}

.support-online.active .sub-button {
   opacity: 1;
   transform: translateX(0) scale(1);
   pointer-events: auto;
}

.sub-button:nth-child(2) {
   transition-delay: 0.05s;
}

.sub-button:nth-child(3) {
   transition-delay: 0.1s;
}

.sub-button:nth-child(4) {
   transition-delay: 0.15s;
}

.sub-button:nth-child(5) {
   transition-delay: 0.2s;
}

.sub-button a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   text-decoration: none;
   border-radius: 50%;
   transition: all 0.3s ease;
}

.sub-button a:hover {
   transform: scale(1.1);
}

.sub-button img,
.sub-button svg {
   width: 35px;
   height: 35px;
   border-radius: 50%;
}

.sub-button i {
   font-size: 20px;
   color: var(--text-dark);
}

.sub-button-text {
   font-size: 24px;
   line-height: 1;
}

/* ==========================================================================
   18.1 WEATHER MODAL
   ========================================================================== */

.weather-toggle {
   cursor: pointer;
   font-size: 11px;
   padding: 0.25em 0.5em;
   transition: transform 0.2s ease;
}

.weather-toggle i {
   font-size: 10px;
}

.weather-toggle:hover {
   transform: translateY(2px);
}

.weather-container {
   padding: 0;
}

.weather-current {
   background: linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue-dark) 100%);
   color: var(--white);
   border-radius: 8px;
}

.weather-current h4,
.weather-current h3,
.weather-current p {
   color: var(--white);
}

.weather-card {
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   border: 1px solid var(--border-gray-light);
}

.weather-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 4px 12px var(--shadow-dark-15);
}

.weather-card.border-primary {
   border-width: 2px;
}

/* ==========================================================================
   18.2 SCROLL TO TOP BUTTON
   ========================================================================== */

.scroll-to-top-btn {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 50px;
   height: 50px;
   background-color: var(--white);
   border: 2px solid var(--border-gray-light);
   border-radius: 8px;
   cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px var(--shadow-dark-10);
}

.scroll-to-top-btn:hover {
   background-color: var(--primary-blue);
   color: var(--white);
   border-color: var(--primary-blue);
   transform: translateY(-3px);
   box-shadow: 0 4px 12px var(--shadow-dark-20);
}

.scroll-to-top-btn.show {
   display: flex;
}

/* Legal Docs Section */
.legal-docs-section {
   background: #fff;
   border: 1px solid #eee;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.legal-docs-title {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   font-size: 17px;
   font-weight: 700;
   color: var(--primary-blue);
   text-transform: uppercase;
   border-bottom: 2px solid var(--primary-red);
}

.legal-docs-title i {
   color: var(--primary-red);
   font-size: 18px;
}

.legal-docs-list-header {
   display: grid;
   grid-template-columns: 140px 130px 1fr;
   gap: 16px;
   background: #f7f7f7;
   padding: 10px 16px;
   font-size: 14px;
   color: #555;
   border-bottom: 1px solid #e8e8e8;
   align-items: center;
}

.legal-docs-item {
   display: grid;
   grid-template-columns: 140px 130px 1fr;
   padding: 12px 16px;
   border-bottom: 1px solid #eee;
   align-items: start;
   gap: 16px;
   font-size: 14px;
}

.legal-docs-item:last-child {
   border-bottom: none;
}

.legal-docs-col-textnum,
.legal-docs-col-date {
   display: flex;
   align-items: center;
}

.legal-docs-number {
   color: var(--primary-red);
   font-weight: 600;
   text-decoration: none;
   font-size: 14px;
}

.legal-docs-number:hover {
   text-decoration: underline;
}

.legal-docs-date {
   color: #666;
   font-size: 13px;
}

.legal-docs-col-abstract a {
   color: var(--text-dark);
   text-decoration: none;
   line-height: 1.5;
}

.legal-docs-col-abstract a:hover {
   color: var(--primary-red);
}

@media (max-width: 768px) {

   .legal-docs-list-header,
   .legal-docs-item {
      grid-template-columns: 1fr 1fr;
      gap: 6px;
   }

   .legal-docs-list-header .legal-docs-col-abstract,
   .legal-docs-item .legal-docs-col-abstract {
      display: none;
   }

   .legal-docs-col-textnum,
   .legal-docs-col-date {
      flex-direction: row;
      align-items: center;
      gap: 6px;
   }
}

/* ==========================================================================
   19. RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 768px) {

   /* Top Banner */
   .top-banner {
      height: 150px;
   }

   .top-banner .h1 {
      font-size: 26.4px;
   }

   .top-banner .h3 {
      font-size: 20px;
   }

   /* Mobile Logo */
   .logo-mobile-fixed {
      width: 80px !important;
      max-width: none !important;
   }

   /* Featured Article */
   .featured-article {
      min-height: 200px;
   }

   .featured-article img {
      height: 350px;
   }

   .featured-carousel .carousel-control-prev,
   .featured-carousel .carousel-control-next {
      width: 40px;
      height: 40px;
   }

   .featured-carousel .carousel-control-prev {
      left: 10px;
   }

   .featured-carousel .carousel-control-next {
      right: 10px;
   }

   .featured-content h3 {
      font-size: 17.6px;
   }

   .news-list {
      margin-top: 2rem;
   }

   /* Navigation */
   .main-header .logo h1 {
      font-size: 19.2px;
   }

   .navbar-nav .nav-link {
      font-size: 15px;
      padding: 0.5rem 0.75rem;
   }

   /* Grid Views */
   .grid-view-one-image-wrapper,
   .grid-view-two-image-wrapper {
      height: 220px;
   }

   .grid-view-one-overlay-primary {
      font-size: 17.6px;
   }

   .grid-view-two-overlay-primary {
      font-size: 17.6px;
   }

   .grid-view-two-circular-highlight {
      width: 80px;
      height: 80px;
      right: 15px;
      bottom: 15px;
      border-width: 3px;
   }

   .grid-view-two-logo-badge {
      width: 40px;
      height: 40px;
      font-size: 15px;
      left: 15px;
      bottom: 15px;
   }

   /* List View Four */
   .list-view-four-featured-image-wrapper {
      height: 280px;
   }

   .list-view-four-featured-title h4 {
      font-size: 20px;
   }

   .list-view-four-thumbnail {
      width: 80px;
      height: 55px;
   }

   .list-view-four-item h6 {
      font-size: 15px;
   }

   /* List View Five */
   .list-view-five-featured-content h3 {
      font-size: 22.4px;
   }

   .list-view-five-sidebar-thumbnail {
      width: 80px;
      height: 80px;
   }

   .list-view-five-sidebar-item h6 {
      font-size: 15px;
   }

   .list-view-five-sidebar {
      gap: 15px;
   }

   .list-view-five-sidebar-item {
      padding-bottom: 15px;
   }

   /* Multimedia */

   .multimedia-audio .audio-icon-wrapper {
      width: 60px;
      height: 60px;
   }

   .multimedia-audio .audio-icon-wrapper i {
      font-size: 12.8px !important;
   }

   .multimedia-photo .multimedia-gallery .col-md-4 {
      margin-bottom: 10px;
   }

   .multimedia-box {
      margin-bottom: 2rem;
   }

   .multimedia-hero-section .d-flex {
      flex-wrap: wrap;
   }

   .multimedia-hero-section .ms-auto {
      width: 100%;
      margin-top: 1rem;
   }

   .hero-slider {
      min-height: 300px;
   }

   .hero-slider img {
      height: 300px;
   }

   .vgp-shorts-section .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
   }

   .hero-slider button {
      width: 40px;
      height: 40px;
      line-height: 32px;
      font-size: 16px !important;
   }

   /* Article Preview */
   .article-preview {
      flex-direction: column;
   }

   .article-preview img {
      width: 100% !important;
      height: 250px !important;
   }

   .featured-large img {
      height: 300px !important;
   }

   .featured-large {
      min-height: auto;
   }

   .nav-pills {
      flex-wrap: wrap;
   }

   .nav-pills .nav-link {
      margin-bottom: 0.5rem;
      font-size: 15px;
      padding: 0.4rem 1rem;
   }

   /* Banner Sections */
   .top-banner-left,
   .top-banner-right {
      min-height: auto;
   }

   .hcm-banner,
   .anniversary-banner {
      min-height: auto;
   }

   /* Footer */
   .footer-nav .item-column-layout>div {
      margin-bottom: 25px;
   }

   .footer-nav .item-column-layout h5 {
      font-size: 15px;
   }

   .footer-nav .item-column-layout ul li a {
      font-size: 15px;
   }

   .footer-backlinks ul {
      gap: 10px 15px;
   }

   .footer-backlinks ul li a {
      font-size: 15px;
      padding: 3px 6px;
   }

   .footer-backlinks ul li:not(:last-child)::after {
      margin-left: 15px;
   }

   .statistics-content {
      font-size: 15px;
      gap: 4px 8px;
   }

   .statistics-icon {
      font-size: 15px;
   }

   .statistics-content mark,
   .statistics-content strong {
      padding: 2px 4px;
      font-size: 15px;
   }

   .governments-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
   }

   .governments-header h3 {
      font-size: 15px;
   }

   .governments-icon {
      width: 60px;
      height: 60px;
   }

   .governments-icon img {
      padding: 8px;
   }

   .governments-text {
      font-size: 15px;
   }

   .governments-item {
      padding: 15px 10px;
   }

   /* Document Search & Table */
   .search-box {
      padding: 1.5rem;
   }

   .table-section {
      padding: 1rem;
   }

   .search-box .btn-primary,
   .search-box .btn-secondary {
      padding: 0.6rem 1.5rem;
      font-size: 15px;
   }

   .table-section .table-responsive {
      display: none;
   }

   .mobile-card-view {
      display: block !important;
   }

   /* Weather */
   .weather-forecast .col-md-6 {
      margin-bottom: 1rem;
   }

   /* Support Online */
   .support-online {
      bottom: 100px;
      right: 30px;
      flex-direction: row-reverse;
      align-items: center;
      gap: 12px;
   }

   .support-online-container {
      width: 50px;
      height: 50px;
   }

   .support-online-container-content-icon {
      width: 20px;
      height: 20px;
   }

   .ring-container {
      width: 50px;
      height: 50px;
   }

   .ringring {
      width: 50px;
      height: 50px;
   }

   .sub-button {
      width: 45px;
      height: 45px;
      transform: translateX(-20px) scale(0.8);
   }

   .support-online.active .sub-button {
      transform: translateX(0) scale(1);
   }

   .sub-button img,
   .sub-button svg {
      width: 30px;
      height: 30px;
   }
}

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

@media (min-width: 769px) {
   .mobile-card-view {
      display: none !important;
   }

   .table-responsive {
      display: block;
   }

   /* Navigation Menu - Show dropdown on hover instead of click (Desktop only) */
   @media (min-width: 768px) {
      .main-nav .navbar-nav .dropdown {
         position: relative;
      }

      .main-nav .navbar-nav .dropdown:hover .dropdown-menu,
      .main-nav .navbar-nav .dropdown .dropdown-menu:hover {
         display: block;
         position: absolute;
         top: calc(100% + 9px);
         left: 0;
         margin-top: 0;
      }

      .main-nav .navbar-nav .dropdown:hover::after {
         content: '';
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         height: 20px;
         background: transparent;
      }

      .main-nav .navbar-nav .dropdown .dropdown-menu {
         display: none;
      }
   }
}

/* ==========================================================================
   SEARCH MODAL FORM
   ========================================================================== */
.search-form-wrapper {
   border-radius: 50px;
   overflow: hidden;
}

.search-form-icon {
   border-radius: 50px 0 0 50px !important;
   border-right: none !important;
}

.search-form-input {
   border-radius: 0 !important;
   border-left: none !important;
   border-right: none !important;
   font-size: 16px;
}

.search-form-button {
   border-radius: 0 50px 50px 0 !important;
   border-left: none !important;
}

/* ==========================================================================
   PAGINATION - Enhanced Styles
   ========================================================================== */
.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
   margin: 2rem 0;
   flex-wrap: wrap;
}

.pagination ul {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   list-style: none;
   padding: 0;
   margin: 0;
   flex-wrap: wrap;
}

.pagination .page-item {
   margin: 0;
}

.pagination .page-link {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 42px;
   height: 42px;
   padding: 0.5rem 0.85rem;
   color: var(--primary-blue);
   background-color: var(--white);
   border: 1.5px solid var(--border-gray);
   border-radius: 8px;
   text-decoration: none;
   font-weight: 500;
   font-size: 16px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
}

.pagination .page-link::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   border-radius: 50%;
   background: var(--primary-blue);
   transform: translate(-50%, -50%);
   transition: width 0.4s ease, height 0.4s ease;
   opacity: 0.1;
   z-index: 0;
}

.pagination .page-link:hover::before {
   width: 100%;
   height: 100%;
   border-radius: 8px;
}

.pagination .page-link:hover {
   color: var(--primary-blue);
   background-color: var(--yellow-light);
   border-color: var(--primary-blue);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px var(--shadow-primary-alpha);
   z-index: 1;
   position: relative;
}

.pagination .page-link:focus {
   outline: none;
   box-shadow: 0 0 0 3px var(--shadow-primary-alpha-20);
   z-index: 1;
   position: relative;
}

.pagination .page-item.active .page-link {
   color: var(--white);
   background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-mid) 100%);
   border-color: var(--primary-blue);
   box-shadow: 0 4px 12px var(--shadow-primary-alpha-30);
   font-weight: 600;
   transform: scale(1.05);
   z-index: 2;
   position: relative;
}

.pagination .page-item.active .page-link::before {
   display: none;
}

.pagination .page-item.disabled .page-link {
   color: var(--secondary-gray);
   background-color: var(--light-gray);
   border-color: var(--border-gray-light);
   cursor: not-allowed;
   opacity: 0.6;
   transform: none;
}

.pagination .page-item.disabled .page-link:hover {
   background-color: var(--light-gray);
   border-color: var(--border-gray-light);
   transform: none;
   box-shadow: none;
}

.pagination .page-item.disabled .page-link::before {
   display: none;
}

/* Pagination ellipsis */
.pagination .page-item.disabled .page-link:not([aria-label]) {
   border: none;
   background: transparent;
   cursor: default;
   opacity: 1;
   color: var(--secondary-gray);
   font-weight: 600;
}

.pagination .page-item.disabled .page-link:not([aria-label]):hover {
   transform: none;
   box-shadow: none;
   background: transparent;
}

/* ==========================================================================
   21. FAQ STYLES
   ========================================================================== */

/* FAQ Item Styles */
.faq-item {
   min-height: 150px;
}

.faq-question-link {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 1.4;
   word-break: break-word;
   cursor: pointer;
   transition: color 0.2s ease;
}

.faq-question-link:hover {
   color: var(--primary-blue) !important;
   text-decoration: underline;
}

.faq-meta {
   font-size: 15px;
}

.faq-subject {
   color: var(--primary-blue);
   font-weight: 500;
}

.faq-time {
   color: var(--secondary-gray);
}

.faq-message {
   color: var(--secondary-gray);
   line-height: 1.6;
   margin-top: 0.5rem;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* FAQ Modal Styles */
.faq-modal .modal-header {
   background-color: var(--primary-blue);
   color: var(--white);
   border-bottom: none;
}

.faq-modal .modal-header .btn-close {
   filter: invert(1);
}

.faq-modal .modal-title {
   font-weight: 600;
   font-size: 20px;
}

.faq-modal .modal-body {
   padding: 1.5rem;
}

.faq-detail-question {
   font-size: 17.6px;
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 1rem;
   line-height: 1.6;
}

.faq-detail-meta {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--border-gray-light);
   flex-wrap: wrap;
}

.faq-detail-meta-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 15px;
   color: var(--secondary-gray);
}

.faq-detail-meta-item i {
   color: var(--primary-blue);
}

.faq-detail-meta-item .faq-detail-label {
   font-weight: 500;
   color: var(--text-dark);
}

.faq-detail-content {
   margin-bottom: 1.5rem;
}

.faq-detail-content h6 {
   font-weight: 600;
   color: var(--text-dark);
   margin-bottom: 0.75rem;
   font-size: 16px;
}

.faq-detail-content p {
   color: var(--secondary-gray);
   line-height: 1.7;
   margin-bottom: 0.5rem;
}

.faq-detail-answer {
   background-color: var(--light-gray);
   padding: 1.25rem;
   border-radius: 0.5rem;
   border-left: 4px solid var(--primary-blue);
   margin-top: 1rem;
}

.faq-detail-answer h6 {
   color: var(--primary-blue);
   margin-bottom: 0.75rem;
}

.faq-detail-answer-content {
   color: var(--text-dark);
   line-height: 1.8;
}

.faq-detail-answer-content p {
   margin-bottom: 0.75rem;
}

.faq-detail-answer-content p:last-child {
   margin-bottom: 0;
}

/* Responsive FAQ */
@media (max-width: 768px) {
   .faq-item {
      min-height: auto;
   }

   .faq-question-link {
      min-height: auto;
      -webkit-line-clamp: 2;
   }

   .faq-modal .modal-body {
      padding: 1rem;
   }

   .faq-detail-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }
}

/* Responsive pagination */
@media (max-width: 576px) {
   .pagination {
      gap: 0.15rem;
   }

   .pagination .page-link {
      min-width: 36px;
      height: 36px;
      padding: 0.4rem 0.6rem;
      font-size: 15px;
   }

   .pagination .page-link span[aria-hidden="true"] {
      font-size: 15px;
   }
}

/* ==========================================================================
   FAQ FORM CARD
   ========================================================================== */
.faq-form-card {
   border: 1px solid var(--border-gray);
   border-radius: 8px;
   box-shadow: 0 2px 4px var(--shadow-dark-10);
}

/* Fixed Sidebar Styles */
.fixed-sidebar {
   position: fixed;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding-right: 0;
}

.fixed-sidebar-item {
   position: relative;
   background: var(--white);
   border-radius: 25px 0 0 25px;
   box-shadow: -2px 0 8px var(--shadow-dark-15);
   transition: width 0.3s ease, box-shadow 0.3s ease;
   overflow: visible;
   width: 60px;
   cursor: pointer;
   z-index: 1;
}

.fixed-sidebar-item:hover {
   width: 280px;
   box-shadow: -4px 0 12px var(--shadow-dark-20);
   z-index: 10;
}

.fixed-sidebar-item.active {
   width: 280px;
   z-index: 10;
}

/* Prevent other items from expanding when one is hovered */
.fixed-sidebar-item:not(:hover):not(.active) {
   width: 60px;
}

.fixed-sidebar-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 60px;
   height: 60px;
   padding: 18px;
   flex-shrink: 0;
}

.fixed-sidebar-label {
   display: none;
   align-items: center;
   padding: 0 20px;
   font-weight: 500;
   color: var(--text-dark);
   white-space: nowrap;
   height: 60px;
}

.fixed-sidebar-item:hover .fixed-sidebar-label,
.fixed-sidebar-item.active .fixed-sidebar-label {
   display: flex;
}

/* Hide label for sitemap and bookmark when content is shown to prevent overlap */
.fixed-sidebar-item[data-item="sitemap"]:hover .fixed-sidebar-label,
.fixed-sidebar-item[data-item="sitemap"].active .fixed-sidebar-label,
.fixed-sidebar-item[data-item="bookmark"]:hover .fixed-sidebar-label,
.fixed-sidebar-item[data-item="bookmark"].active .fixed-sidebar-label {
   display: none;
}

.fixed-sidebar-content {
   position: absolute;
   left: 60px;
   top: 0;
   width: 220px;
   background: var(--white);
   border-radius: 0 8px 8px 0;
   box-shadow: -2px 2px 12px var(--shadow-dark-15);
   opacity: 0;
   visibility: hidden;
   transform: translateX(-20px);
   transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
   max-height: 400px;
   overflow-y: auto;
   z-index: 1001;
   min-height: 60px;
}

.fixed-sidebar-item:hover .fixed-sidebar-content,
.fixed-sidebar-item.active .fixed-sidebar-content {
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
}

.fixed-sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 20px;
   border-bottom: 1px solid var(--border-gray);
   background: var(--gray-lighter);
}

.fixed-sidebar-header h4 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-dark);
}

.fixed-sidebar-close {
   font-size: 24px;
   line-height: 1;
   color: var(--text-muted);
   cursor: pointer;
   transition: color 0.2s;
}

.fixed-sidebar-close:hover {
   color: var(--text-dark);
}

.fixed-sidebar-body {
   padding: 15px 20px;
}

/* RSS Feeds */
.rss-feeds {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.rss-feed-item {
   border-bottom: 1px solid var(--border-gray-subtle);
   padding-bottom: 8px;
   margin-bottom: 8px;
}

.rss-feed-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.rss-feed-item a {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   color: var(--text-dark);
   transition: color 0.2s;
   padding: 8px;
   border-radius: 4px;
}

.rss-feed-item a:hover {
   background: var(--gray-lighter);
   color: var(--success-green);
}

.rss-feed-icon {
   flex-shrink: 0;
}

.rss-feed-title {
   font-size: 15px;
   line-height: 1.4;
}

/* SiteMap - Improved Design */
.fixed-sidebar-item[data-item="sitemap"] .fixed-sidebar-content {
   padding: 0;
   min-height: 60px;
}

.fixed-sidebar-item[data-item="sitemap"] .fixed-sidebar-body {
   padding: 15px 20px;
}

.fixed-sidebar-item[data-item="sitemap"] .btn {
   transition: all 0.2s ease;
   font-weight: 500;
}

.fixed-sidebar-item[data-item="sitemap"] .btn-warning {
   background: linear-gradient(135deg, var(--warning-amber) 0%, var(--warning-amber-dark) 100%);
   border: none;
   box-shadow: 0 2px 4px var(--shadow-warning-amber);
}

.fixed-sidebar-item[data-item="sitemap"] .btn-warning:hover {
   background: linear-gradient(135deg, var(--warning-amber-dark) 0%, var(--warning-amber-darker) 100%);
   box-shadow: 0 4px 8px var(--shadow-warning-amber);
   transform: translateY(-1px);
}

.fixed-sidebar-item[data-item="sitemap"] .btn-outline-warning {
   border: 1px solid var(--warning-amber);
   color: var(--warning-amber);
}

.fixed-sidebar-item[data-item="sitemap"] .btn-outline-warning:hover {
   background: var(--warning-amber);
   color: var(--white);
   transform: translateY(-1px);
}

/* Bookmark - Improved Design */
.fixed-sidebar-item[data-item="bookmark"] .fixed-sidebar-content {
   min-height: 60px;
   border-left: 3px solid var(--blue-material);
   background: linear-gradient(135deg, var(--blue-material-bg) 0%, var(--white) 100%);
}

.fixed-sidebar-item[data-item="bookmark"] .fixed-sidebar-body {
   padding: 15px 20px;
}

.fixed-sidebar-item[data-item="bookmark"] #add-current-page {
   background: linear-gradient(135deg, var(--blue-material) 0%, var(--blue-material-dark) 100%);
   border: none;
   box-shadow: 0 2px 4px var(--shadow-blue-material);
   transition: all 0.2s ease;
   font-weight: 500;
}

.fixed-sidebar-item[data-item="bookmark"] #add-current-page:hover {
   background: linear-gradient(135deg, var(--blue-material-dark) 0%, var(--blue-material-darker) 100%);
   box-shadow: 0 4px 8px var(--shadow-blue-material-40);
   transform: translateY(-1px);
}

.bookmark-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
   max-height: 320px;
   overflow-y: auto;
   margin-top: 10px;
}

.bookmark-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   background: var(--gray-lighter);
   border-radius: 6px;
   border-left: 3px solid var(--blue-material);
   transition: all 0.2s;
}

.bookmark-item:hover {
   background: var(--blue-material-bg);
   transform: translateX(2px);
}

.bookmark-item-link {
   flex: 1;
   text-decoration: none;
   color: var(--text-dark);
   font-size: 15px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.4;
}

.bookmark-item-link:hover {
   color: var(--blue-material);
}

.bookmark-item-remove {
   background: none;
   border: none;
   color: var(--text-muted);
   cursor: pointer;
   padding: 4px;
   font-size: 16px;
   line-height: 1;
   transition: all 0.2s;
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
}

.bookmark-item-remove:hover {
   color: var(--danger);
   background: var(--danger-bg);
}

/* Responsive - Hide on mobile and tablet */
@media (max-width: 991.98px) {
   .fixed-sidebar {
      display: none !important;
   }
}

/* ==========================================================================
   THANK YOU PAGE - layout tham khảo 404, tông màu Success
   ========================================================================== */
.thanks-page {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 60vh;
   padding: 40px 20px;
   text-align: center;
}

.thanks-content {
   max-width: 600px;
   width: 100%;
}

.thanks-icon {
   width: 120px;
   height: 120px;
   margin: 0 auto 30px;
   color: var(--success-green);
   opacity: 0.95;
}

.thanks-icon svg {
   width: 100%;
   height: 100%;
}

.thanks-title {
   font-size: 32px;
   font-weight: 600;
   margin: 0 0 20px;
   color: var(--success-green);
}

.thanks-description {
   font-size: 18px;
   line-height: 1.6;
   color: var(--secondary-gray);
   margin: 0 0 40px;
}

.thanks-actions {
   display: flex;
   gap: 15px;
   justify-content: center;
   flex-wrap: wrap;
}

.thanks-actions .btn {
   min-width: 160px;
   padding: 12px 24px;
   font-size: 16px;
   border-radius: 8px;
   transition: all 0.3s ease;
}

.thanks-actions .btn-success {
   background: linear-gradient(135deg, var(--success-green) 0%, #388e3c 100%);
   border: none;
   box-shadow: 0 4px 6px rgba(76, 175, 80, 0.35);
}

.thanks-actions .btn-success:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(76, 175, 80, 0.45);
   background: linear-gradient(135deg, #43a047 0%, var(--success-green) 100%);
}

.thanks-actions .btn-outline-success {
   border: 2px solid var(--success-green);
   color: var(--success-green);
}

.thanks-actions .btn-outline-success:hover {
   background: var(--success-green);
   color: var(--white);
   transform: translateY(-2px);
}

@media (max-width: 576px) {
   .thanks-title {
      font-size: 24px;
   }

   .thanks-description {
      font-size: 16px;
   }

   .thanks-actions {
      flex-direction: column;
   }

   .thanks-actions .btn {
      width: 100%;
   }

   .thanks-icon {
      width: 80px;
      height: 80px;
   }
}

/* ==========================================================================
   ERROR 404 PAGE
   ========================================================================== */
.error-404 {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 60vh;
   padding: 40px 20px;
   text-align: center;
}

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

.error-404-icon {
   width: 120px;
   height: 120px;
   margin: 0 auto 30px;
   color: var(--danger);
   opacity: 0.8;
}

.error-404-icon svg {
   width: 100%;
   height: 100%;
}

.error-404-number {
   font-size: 120px;
   font-weight: 700;
   line-height: 1;
   margin: 0 0 20px;
   color: var(--danger);
   text-shadow: 2px 2px 4px var(--shadow-dark-10);
}

.error-404-title {
   font-size: 32px;
   font-weight: 600;
   margin: 0 0 20px;
   color: var(--text-dark);
}

.error-404-description {
   font-size: 18px;
   line-height: 1.6;
   color: var(--secondary-gray);
   margin: 0 0 40px;
}

.error-404-actions {
   display: flex;
   gap: 15px;
   justify-content: center;
   flex-wrap: wrap;
}

.error-404-actions .btn {
   min-width: 160px;
   padding: 12px 24px;
   font-size: 16px;
   border-radius: 8px;
   transition: all 0.3s ease;
}

.error-404-actions .btn-primary {
   background: linear-gradient(135deg, var(--blue-bootstrap) 0%, var(--blue-bootstrap-dark) 100%);
   border: none;
   box-shadow: 0 4px 6px var(--shadow-bootstrap-blue);
}

.error-404-actions .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px var(--shadow-bootstrap-blue);
}

.error-404-actions .btn-outline-secondary {
   border: 2px solid var(--secondary-bs);
   color: var(--secondary-bs);
}

.error-404-actions .btn-outline-secondary:hover {
   background: var(--secondary-bs);
   color: var(--white);
   transform: translateY(-2px);
}

@media (max-width: 576px) {
   .error-404-number {
      font-size: 80px;
   }

   .error-404-title {
      font-size: 24px;
   }

   .error-404-description {
      font-size: 16px;
   }

   .error-404-actions {
      flex-direction: column;
   }

   .error-404-actions .btn {
      width: 100%;
   }

   .error-404-icon {
      width: 80px;
      height: 80px;
   }
}

/* ==========================================================================
   ACTIVITY NEWS SECTION
   ========================================================================== */
.activity-news-section {
   background-color: var(--light-gray) !important;
   position: relative;
   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
   border-radius: 8px;
}

.activity-card-img {
   height: 180px;
   object-fit: cover;
}

.activity-card-title {
   font-size: 14px;
   line-height: 1.5;
}

.activity-slider-container {
   position: relative;
   padding: 0;
}

.activity-slider {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   -ms-overflow-style: none;
   scroll-behavior: smooth;
}

.activity-slider::-webkit-scrollbar {
   display: none;
}

.activity-slider-item {
   scroll-snap-align: start;
   flex: 0 0 20%;
   max-width: 20%;
   padding-right: calc(var(--bs-gutter-x) * .5);
   padding-left: calc(var(--bs-gutter-x) * .5);
}

.activity-slider-container .activity-carousel-btn {
   position: absolute;
   top: 35%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   background: var(--primary-red);
   border-radius: 50%;
   border: none;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.3s;
}

.activity-slider-container .activity-carousel-btn:hover {
   background: #b00100;
   /* slightly darker shade of red, or just var(--primary-red) with opacity */
}

.activity-slider-container .prev-btn {
   left: 0;
}

.activity-slider-container .next-btn {
   right: 0;
}

.activity-carousel-icon {
   width: 1.5rem;
   height: 1.5rem;
}

@media (max-width: 991.98px) {
   .activity-slider-item {
      flex: 0 0 50%;
      max-width: 50%;
   }

   .activity-slider-container {
      padding: 0;
   }

   .activity-card-img {
      height: 200px;
   }
}

@media (max-width: 767.98px) {
   .activity-slider-item {
      flex: 0 0 100%;
      max-width: 100%;
   }

   .activity-slider-container {
      padding: 0;
   }

   .activity-card-img {
      height: 220px;
   }
}

.activity-news-header h2 {
   color: var(--primary-red);
   font-size: 24px;
   position: relative;
   display: inline-block;
   padding-bottom: 8px;
}

.activity-news-header h2::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 2px;
   background-color: #d32f2f;
}

/* ==========================================================================
   22. LATEST NEWS SECTION
   ========================================================================== */

.featured-content-overlay-custom {
   padding: 2.5rem 1.5rem 1rem;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
   border-bottom-left-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
}

.featured-content-title {
   line-height: 1.5;
}

.news-list-thumbnail {
   width: 80px;
   height: 80px;
   object-fit: cover;
}

.latest-news .row {
   align-items: stretch;
}

.latest-news .match-height-wrapper {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
}

.latest-news .col-md-3 .match-height-wrapper {
   min-height: 0;
   /* Allow sidebars to shrink and scroll */
}

.latest-news .match-height-inner {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
}

.latest-news .carousel-h-100 {
   height: 100%;
   display: flex;
   flex-direction: column;
}

.latest-news .carousel-h-100 .carousel-inner {
   flex: 1 1 auto;
}

.latest-news .carousel-h-100 .carousel-item {
   height: 100%;
}

.latest-news .carousel-img-cover {
   height: 100%;
   object-fit: cover;
}

.latest-news .featured-article {
   height: 100%;
   display: flex;
   flex-direction: column;
}

.latest-news .featured-article>a {
   flex: 1 1 auto;
   display: block;
}

.latest-news .scroll-y-container {
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 5px;
}

.latest-news .scroll-y-container::-webkit-scrollbar {
   width: 4px;
}

.latest-news .scroll-y-container::-webkit-scrollbar-track {
   background: transparent;
}

.latest-news .scroll-y-container::-webkit-scrollbar-thumb {
   background: var(--border-gray-lighter);
   border-radius: 4px;
}

.latest-news .scroll-y-container::-webkit-scrollbar-thumb:hover {
   background: var(--border-gray);
}