@layer reset, base, theme, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html, body, div, span, header, nav, main, section, article, aside, footer,
  h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, figure, figcaption, form, fieldset, label, dialog {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  img, video, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  ul, ol {
    list-style: none;
  }

  button, input, select, textarea {
    font: inherit;
    box-sizing: border-box;
  }
}

@layer theme {
  :root {
    /* Modern Emerald & Warm Amber Government Portal Palette */
    --color-brand-900: #064e2c;
    --color-brand-800: #086036;
    --color-brand-700: #0b7a44;
    --color-brand-600: #0f9452;
    --color-brand-500: #16a95f;
    --color-brand-100: #dcfce7;
    --color-brand-50: #f0fdf4;

    --color-accent-600: #ea580c;
    --color-accent-500: #f97316;
    --color-accent-100: #ffedd5;

    --color-red-600: #dc2626;
    --color-red-50: #fef2f2;

    --color-blue-700: #0369a1;
    --color-blue-50: #f0f9ff;

    --color-slate-900: #0f172a;
    --color-slate-800: #1e293b;
    --color-slate-700: #334155;
    --color-slate-600: #475569;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-200: #e2e8f0;
    --color-slate-100: #f1f5f9;

    --color-bg-page: #f3f6f4;
    --color-surface: #ffffff;
    --color-surface-subtle: #f8faf9;

    --radius-sm: 0.375rem; /* 6px */
    --radius-md: 0.625rem; /* 10px */
    --radius-lg: 0.875rem; /* 14px */
    --radius-pill: 9999px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);

    --container-max: 80rem; /* 1280px */
    --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  }
}

@layer base {
  html {
    font-size: 100%;
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-sans);
    font-size: 0.9375rem; /* 15px */
    line-height: 1.55;
    color: var(--color-slate-800);
    background-color: var(--color-bg-page);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  a:hover {
    color: var(--color-brand-700);
  }

  :where(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-slate-900);
    font-weight: 700;
    line-height: 1.35;
  }

  p {
    text-wrap: pretty;
    margin-bottom: 15px;
  }

  .margin-bottom-lg{
    margin-bottom: 20px;
  }

  .margin-top-lg{
    margin-top: 20px;
  }
}

@layer components {
  /* Main Container */
  .wraper {
    inline-size: min(100%, var(--container-max));
    margin-inline: auto;
    padding-inline: 1rem;
  }

  /* Header Banner Area (Government Portal Banner with Dong Son Drum Watermark) */
  .wraperheader {
    inline-size: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--color-brand-700);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='none' stroke='%23ffffff' stroke-opacity='0.09'%3E%3Ccircle cx='250' cy='250' r='240' stroke-width='2'/%3E%3Ccircle cx='250' cy='250' r='222' stroke-width='4' stroke-dasharray='6 8'/%3E%3Ccircle cx='250' cy='250' r='198' stroke-width='1.5'/%3E%3Ccircle cx='250' cy='250' r='176' stroke-width='10' stroke-dasharray='3 11'/%3E%3Ccircle cx='250' cy='250' r='154' stroke-width='1.5'/%3E%3Ccircle cx='250' cy='250' r='126' stroke-width='14' stroke-dasharray='16 12'/%3E%3Ccircle cx='250' cy='250' r='98' stroke-width='2'/%3E%3Ccircle cx='250' cy='250' r='76' stroke-width='8' stroke-dasharray='4 8'/%3E%3Ccircle cx='250' cy='250' r='52' stroke-width='2'/%3E%3Cpolygon points='250,198 259,232 292,215 268,242 302,250 268,258 292,285 259,268 250,302 241,268 208,285 232,258 198,250 232,242 208,215 241,232' fill='%23ffffff' fill-opacity='0.09' stroke='none'/%3E%3C/svg%3E"),
      linear-gradient(90deg, #065f34 0%, #0b7a44 45%, #0d8a4d 75%, #086839 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: 58% 50%, center;
    background-size: 31rem 31rem, 100% 100%;
    border-block-end: 3px solid rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .bcb_header_brand {
    display: flex;
    align-items: center;
    gap: clamp(0.875rem, 2.2vw, 1.75rem);
    padding-block: clamp(0.875rem, 1.8vw, 1.35rem);
    color: #ffffff;
    text-decoration: none;
  }

  .bcb_header_brand:hover {
    color: #ffffff;
  }

  .bcb_header_logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bcb_header_logo img {
    inline-size: clamp(3.75rem, 6.5vw, 5.75rem);
    block-size: auto;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.24));
  }

  .bcb_header_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-inline-size: 0;
  }

  .bcb_header_kicker {
    font-size: clamp(0.75rem, 1.25vw, 1.025rem);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
  }

  .bcb_header_title {
    font-size: clamp(1rem, 2.15vw, 1.75rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    line-height: 1.25;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    margin: 0;
  }

  .bcb_header_subtitle {
    font-size: clamp(0.75rem, 1.15vw, 1.025rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
  }

  /* Mobile Sticky Navigation Bar */
  .wsmobileheader {
    display: none;
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    inline-size: 100%;
    block-size: 3.25rem;
    background: linear-gradient(90deg, var(--color-brand-900) 0%, var(--color-brand-800) 100%);
    color: #ffffff;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.75rem;
    box-shadow: 0 4px 12px rgba(6, 78, 44, 0.22);
  }

  .wsanimated-arrow,
  .callusbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-inline-size: 2.375rem;
    min-block-size: 2.375rem;
    padding-inline: 0.625rem;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.9375rem;
    cursor: pointer;
  }

  .wsmobile-menu-label {
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .wsmenu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
  }

  /* Sticky Main Navigation Bar (Full-width background) */
  .wsmainfull {
    inline-size: 100%;
    position: sticky;
    inset-block-start: 0;
    z-index: 600;
    background: linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-800) 100%);
    box-shadow: 0 4px 16px rgba(6, 78, 44, 0.18);
  }

  .wsmainwp {
    inline-size: min(100%, var(--container-max));
    margin-inline: auto;
    padding-inline: 1rem;
    position: relative;
  }

  .wsdrawer-header {
    display: none;
  }

  .wsmenu-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .wsmenu-list > li {
    position: relative;
  }

  .wsmenu-list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0.75rem;
    padding-inline: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.84375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
  }

  .wsmenu-list > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-end: 0.35rem;
    block-size: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  .wsmenu-list > li > a:hover,
  .wsmenu-list > li:hover > a:not(.menuhomeicon) {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
  }

  .wsmenu-list > li:hover > a:not(.menuhomeicon)::after {
    transform: scaleX(1);
  }

  .wsmenu-list > li > a.menuhomeicon {
    background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
    color: #ffffff;
    border-radius: var(--radius-sm);
    margin-block: 0.25rem;
    margin-inline-end: 0.25rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
  }

  .wsmenu-list > li > a.menuhomeicon:hover {
    background: linear-gradient(135deg, var(--color-accent-600), #c2410c);
  }

  .wsarrow {
    display: inline-block;
    inline-size: 0;
    block-size: 0;
    margin-inline-start: 0.2rem;
    border-inline-start: 4px solid transparent;
    border-inline-end: 4px solid transparent;
    border-block-start: 4px solid currentColor;
    opacity: 0.8;
  }

  /* Modern Dropdown Submenu */
  .wsmenu-list .sub-menu {
    position: absolute;
    inset-block-start: calc(100% + 2px);
    inset-inline-start: 0;
    z-index: 1000;
    min-inline-size: 17.5rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  @media (min-width: 1025px) {
    .wsmenu-list li:hover > .sub-menu,
    .wsmenu-list li:focus-within > .sub-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  .wsmenu-list .sub-menu li {
    position: relative;
  }

  .wsmenu-list .sub-menu a {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    color: var(--color-slate-700);
    font-size: 0.84375rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-sm);
  }

  .wsmenu-list .sub-menu a .wsarrow {
    margin-inline-start: auto;
    align-self: center;
    border-block-start-color: var(--color-slate-400);
  }

  .wsmenu-list .sub-menu a i {
    margin-block-start: 0.2rem;
    color: var(--color-brand-600);
    flex-shrink: 0;
  }

  .wsmenu-list .sub-menu a:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  .wsmenu-list .sub-menu .sub-menu {
    inset-block-start: -0.375rem;
    inset-inline-start: calc(100% + 4px);
  }

  /* Sub-header Utility Bar: Clock, Ticker, Search */
  .wraper_timkiem {
    display: grid;
    grid-template-columns: auto 1fr minmax(15rem, 19rem);
    align-items: center;
    gap: 1rem;
    background-color: var(--color-surface);
    padding-block: 0.5rem;
    padding-inline: 0.875rem;
    margin-block: 0.875rem 1.125rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-200);
    box-shadow: var(--shadow-xs);
  }

  .current-time {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-600);
    white-space: nowrap;
    padding-inline-end: 0.75rem;
    border-inline-end: 1px solid var(--color-slate-200);
  }

  .current-time::before {
    content: "\f017";
    font-family: FontAwesome;
    color: var(--color-brand-600);
    font-size: 0.9rem;
  }

  .bcb_thongbao {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    overflow: clip;
    min-inline-size: 0;
  }

  .marquee-viewport {
    overflow: clip;
    flex: 1;
    min-inline-size: 0;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  }

  .marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-left 28s linear infinite;
  }

  .bcb_thongbao:hover .marquee-track {
    animation-play-state: paused;
  }

  .bcb_thongbao a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--color-red-600);
    padding-inline-end: 4rem;
    white-space: nowrap;
  }

  @keyframes marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .headerSearch {
    margin: 0;
    inline-size: 100%;
  }

  .headerSearch .input-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    inline-size: 100%;
    background-color: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-pill);
    padding: 0.1875rem 0.2rem 0.1875rem 0.875rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .headerSearch .input-group:focus-within {
    background-color: var(--color-surface);
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.12);
  }

  .headerSearch .input-group.has-error {
    background-color: var(--color-red-50);
    border-color: var(--color-red-600);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
  }

  .headerSearch .form-control {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 2rem;
    padding-block: 0.25rem;
    font-size: 0.84375rem;
    border: none;
    background: transparent;
    color: var(--color-slate-800);
  }

  .headerSearch .form-control::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: 0.6;
  }

  .headerSearch .form-control:focus {
    outline: none;
  }

  .headerSearch .btn-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    min-inline-size: 2rem;
    background-color: var(--color-brand-700);
    border: none;
    color: #ffffff;
    border-radius: var(--radius-pill);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.18s ease, transform 0.15s ease;
  }

  .headerSearch .btn-info:hover:not(:disabled) {
    background-color: var(--color-brand-900);
  }

  /* Breadcrumbs Bar (.breadcrumbs-wrap) */
  .breadcrumbs-wrap {
    position: relative;
    margin-block-end: 1.125rem;
    padding-block: 0.45rem;
    padding-inline: 0.875rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-inline-start: 3px solid var(--color-brand-600);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
  }

  .breadcrumbs-wrap .display {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 1.75rem;
    overflow: clip;
  }

  .show-subs-breadcrumbs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.75rem;
    min-block-size: 1.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    color: var(--color-brand-700);
    flex-shrink: 0;
  }

  .show-subs-breadcrumbs:hover {
    background-color: var(--color-brand-100);
    color: var(--color-brand-900);
  }

  .breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-inline-size: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-slate-600);
  }

  .breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-inline-size: 0;
    white-space: nowrap;
  }

  .breadcrumbs li:not(:first-child)::before {
    content: "\f105";
    font-family: FontAwesome;
    color: var(--color-slate-400);
    font-size: 0.9em;
    flex-shrink: 0;
  }

  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    color: var(--color-slate-600);
    font-weight: 500;
    max-inline-size: 100%;
  }

  .breadcrumbs li:first-child a::before {
    content: "\f015";
    font-family: FontAwesome;
    color: var(--color-brand-600);
    font-size: 0.95em;
  }

  .breadcrumbs a:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-700);
  }

  .breadcrumbs li:last-child {
    flex: 0 1 auto;
  }

  .breadcrumbs li:last-child a {
    color: var(--color-brand-800);
    font-weight: 600;
    background-color: var(--color-brand-50);
  }

  .breadcrumbs li:last-child a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 28rem;
  }

  .subs-breadcrumbs {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + 0.375rem);
    inset-inline-start: 0;
    z-index: 900;
    min-inline-size: 14rem;
    max-inline-size: min(90vw, 24rem);
    padding: 0.35rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  .subs-breadcrumbs.open {
    display: block;
  }

  .subs-breadcrumbs li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .subs-breadcrumbs a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-700);
  }

  .subs-breadcrumbs a:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  .subs-breadcrumbs a em {
    color: var(--color-brand-600);
    flex-shrink: 0;
  }

  /* Main 2-Column Page Grid (Main 73% + Sidebar 27%) */
  .page-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.75fr) minmax(18.5rem, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  /* Top Hero + Latest News Row */
  .bcb_hot {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-block-end: 1.25rem;
    align-items: stretch;
  }

  /* Hero Slider (#bcb_tramy) with Container Query Fluid Scaling */
  .bcb_news_noibat {
    container-type: inline-size;
    container-name: hero-card;
    position: relative;
    min-block-size: 23.5rem; /* 376px */
    border-radius: var(--radius-lg);
    overflow: clip;
    background-color: var(--color-slate-900);
    box-shadow: var(--shadow-md);
  }

  .bcb_tramy_item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
  }

  .bcb_tramy_item.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .bcb_tramy_item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .bcb_tramy_item:hover img {
    transform: scale(1.05);
  }

  .bcb_tramy_item .feat-cap {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    padding: 3.5rem 1.375rem 1.25rem;
    background: linear-gradient(
      to top,
      rgba(6, 24, 14, 0.95) 0%,
      rgba(6, 24, 14, 0.72) 55%,
      rgba(6, 24, 14, 0) 100%
    );
    color: #f8fafc;
  }

  .bcb_tramy_item .post-title {
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin-block-end: 0.45rem;
    text-wrap: balance;
  }

  @supports (font-size: 1cqi) {
    .bcb_tramy_item .post-title {
      font-size: clamp(1.1rem, 3.4cqi, 1.45rem);
    }
  }

  .bcb_tramy_item .feat-cap a:hover .post-title {
    color: #fde047;
  }

  .bcb_tramy_item .metainfo {
    font-size: 0.84375rem;
    color: rgba(241, 245, 249, 0.86);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }

  .hero-slider-controls {
    position: absolute;
    inset-block-start: 0.875rem;
    inset-inline-end: 0.875rem;
    z-index: 5;
    display: flex;
    gap: 0.375rem;
  }

  .hero-slider-btn {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .hero-slider-btn:hover:not(:disabled) {
    background-color: var(--color-brand-600);
    border-color: var(--color-brand-500);
    transform: scale(1.06);
  }

  /* Panels (.panel-primary, .panel-default) */
  .panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-block-end: 1.25rem;
    overflow: clip;
  }

  .panel-primary > .panel-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-500));
    color: #ffffff;
    padding: 0.7rem 1rem;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .panel-primary > .panel-heading a {
    color: #ffffff;
  }

  .panel-body {
    padding: 1rem;
  }

  /* Scrollable "Tin mới nhất" list */
  .bcb_hot .panel-primary {
    display: flex;
    flex-direction: column;
    margin-block-end: 0;
  }

  .bcb_hot .panel-primary .panel-body {
    padding: 0.5rem;
    flex: 1;
    display: flex;
  }

  .scrollbar {
    block-size: 20rem; /* 320px */
    inline-size: 100%;
    background-color: var(--color-surface);
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-slate-400) transparent;
    padding: 0.25rem 0.375rem;
  }

  .bcb_tinmoi ul li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
    padding-block-end: 0.5rem;
    margin-block-end: 0.5rem;
  }

  .bcb_tinmoi ul li a {
    display: block;
    font-size: 0.84375rem;
    font-weight: 500;
    color: var(--color-slate-700);
    line-height: 1.45;
    padding: 0.2rem 0.25rem;
    border-radius: var(--radius-sm);
  }

  .bcb_tinmoi ul li a i {
    color: var(--color-brand-600);
    margin-inline-end: 0.25rem;
  }

  .bcb_tinmoi ul li a:hover {
    color: var(--color-brand-800);
    background-color: var(--color-brand-50);
  }

  /* Modern NEW badge */
  .icon_new {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.375rem;
    margin-inline-start: 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-red-600);
    background-color: var(--color-red-50);
    border: 1px solid #fecaca;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    vertical-align: middle;
  }

  .icon_new::after {
    content: "MỚI";
  }

  /* Promotional Banners (.bcb_banner) */
  .bcb_banner {
    inline-size: 100%;
    margin-block-end: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .bcb_banner img {
    display: block;
    border-radius: var(--radius-md);
    overflow: clip;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--color-slate-200);
    width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .bcb_banner img:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  /* 2-Column News Category Grid */
  .news-categories-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-block-end: 1.25rem;
    align-items: stretch;
  }

  .news_column.two_column {
    container-type: inline-size;
    container-name: category-card;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: clip;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .news_column.two_column:hover {
    box-shadow: var(--shadow-md);
    border-color: #cbd5e1;
  }

  /* Modern Category Header (.bcb_cat_title) - Uniform Equal Height */
  .bcb_cat_title {
    block-size: 3.25rem;
    min-block-size: 3.25rem;
    flex-shrink: 0;
    background: linear-gradient(to right, var(--color-brand-50), #ffffff);
    border-block-end: 2px solid var(--color-brand-600);
    padding-inline: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .bcb_cat_title h2 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    color: var(--color-brand-800);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
  }

  .bcb_cat_title h2 .icon {
    border-radius: var(--radius-sm);
    background-color: var(--color-brand-700);
    height: 26px;
    width: 26px;
    background-image: url(/uploads/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .bcb_cat_title h2 a {
    color: var(--color-brand-900);
  }

  .bcb_cat_title h2 a:hover {
    color: var(--color-accent-600);
  }

  .news_column .panel {
    margin-block-end: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  .news_column .panel-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1.125rem;
  }

  .news_column h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-block-end: 0.375rem;
  }

  .news_column h3 a {
    color: var(--color-slate-900);
  }

  .news_column h3 a:hover {
    color: var(--color-brand-700);
  }

  .news_column .text-muted {
    font-size: 0.75rem;
    color: var(--color-slate-500);
    margin-block-end: 0.625rem;
  }

  .news_column .list-inline {
    display: flex;
    gap: 1rem;
  }

  .news_column .list-inline i {
    color: var(--color-slate-400);
    margin-inline-end: 0.2rem;
  }

  /* Size-aware News Lead layout using Container Queries */
  .news-lead {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-end: 0.875rem;
  }

  @media (min-width: 520px) {
    .news-lead {
      display: grid;
      grid-template-columns: 11rem 1fr;
      align-items: start;
    }
  }

  @supports (container-type: inline-size) {
    @media (min-width: 520px) {
      .news-lead {
        display: flex;
        flex-direction: column;
      }
    }

    @container category-card (min-width: 340px) {
      .news-lead {
        display: grid;
        grid-template-columns: 10.5rem 1fr;
        align-items: start;
      }
    }
  }

  .news-lead > a {
    display: block;
    overflow: clip;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
  }

  .img-thumbnail {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.35s ease;
  }

  .news-lead > a:hover .img-thumbnail {
    transform: scale(1.06);
  }

  .news-lead p {
    font-size: 0.84375rem;
    color: var(--color-slate-600);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: clip;
  }

  .bcb_list_tin {
    margin-block-start: auto;
    background-color: var(--color-surface-subtle);
    margin-inline: -1.125rem;
    margin-block-end: -1rem;
    padding: 0.625rem 1.125rem;
    border-block-start: 1px solid var(--color-slate-200);
  }

  .bcb_list_tin ul li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
    padding-block-end: 0.4rem;
    margin-block-end: 0.4rem;
  }

  .bcb_list_tin h4 {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
  }

  .bcb_list_tin h4 a {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--color-slate-700);
  }

  .bcb_list_tin h4 a i {
    color: var(--color-brand-600);
    margin-block-start: 0.25rem;
    flex-shrink: 0;
  }

  .bcb_list_tin h4 a:hover {
    color: var(--color-brand-700);
  }

  /* Category Description & Article List (.viewcat-page) */
  .news_column .alert-info {
    display: flow-root;
    background: linear-gradient(135deg, var(--color-brand-50) 0%, #ffffff 100%);
    border: 1px solid var(--color-brand-100);
    border-inline-start: 4px solid var(--color-brand-600);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-block-end: 1.125rem;
    box-shadow: var(--shadow-xs);
  }

  .news_column .alert-info h1 {
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    color: var(--color-brand-900);
    margin-block-end: 0.45rem;
    text-wrap: balance;
  }

  .news_column .alert-info .imghome {
    float: inline-start;
    inline-size: 7.5rem;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
    margin-inline-end: 1rem;
    margin-block-end: 0.25rem;
  }

  .news_column .alert-info p {
    font-size: 0.875rem;
    color: var(--color-slate-600);
    line-height: 1.6;
  }

  .viewcat-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-end: 1.25rem;
  }

  .viewcat-page .panel {
    container-type: inline-size;
    container-name: viewcat-card;
    margin-block-end: 0;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-xs);
    overflow: clip;
    transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  }

  .viewcat-page .panel:hover {
    box-shadow: var(--shadow-md);
    border-color: #cbd5e1;
  }

  .viewcat-page .panel:has(> .panel-body.featured) {
    border-inline-start: 4px solid var(--color-brand-600);
    background: linear-gradient(135deg, var(--color-brand-50) 0%, #ffffff 48%);
  }

  .viewcat-page .panel-body {
    display: flow-root;
    padding: 1.125rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.62;
    color: var(--color-slate-600);
    text-wrap: pretty;
  }

  .viewcat-page .panel-body > a:has(.imghome) {
    display: block;
    inline-size: 100%;
    margin-block-end: 0.875rem;
    overflow: clip;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-200);
    background-color: var(--color-slate-100);
  }

  .viewcat-page .panel-body > a:has(.imghome) .imghome {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.35s ease;
  }

  .viewcat-page .panel-body > a:has(.imghome):hover .imghome {
    transform: scale(1.05);
  }

  @media (min-width: 520px) {
    .viewcat-page .panel-body > a:has(.imghome) {
      float: inline-start;
      inline-size: 13.5rem;
      margin-inline-end: 1.125rem;
      margin-block-end: 0.25rem;
    }

    .viewcat-page .panel-body.featured > a:has(.imghome) {
      inline-size: 17.5rem;
    }
  }

  @supports (container-type: inline-size) {
    @container viewcat-card (max-width: 479px) {
      .viewcat-page .panel-body > a:has(.imghome),
      .viewcat-page .panel-body.featured > a:has(.imghome) {
        float: none;
        inline-size: 100%;
        margin-inline-end: 0;
        margin-block-end: 0.875rem;
      }
    }
  }

  .viewcat-page .panel-body.featured h2 {
    font-size: clamp(1.125rem, 1.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
    margin-block-end: 0.45rem;
    text-wrap: balance;
  }

  .viewcat-page .panel-body h3 {
    font-size: 1.03125rem;
    font-weight: 700;
    line-height: 1.4;
    margin-block-end: 0.4rem;
    text-wrap: balance;
  }

  .viewcat-page .panel-body :is(h2, h3) a {
    color: var(--color-slate-900);
    font-size: 18px;
  }

  .viewcat-page .panel-body :is(h2, h3) a:hover {
    color: var(--color-brand-700);
  }

  .viewcat-page .text-muted {
    font-size: 0.78125rem;
    color: var(--color-slate-500);
    margin-block-end: 0.5rem;
  }

  .viewcat-page .list-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
  }

  .viewcat-page .list-inline em {
    color: var(--color-brand-600);
    margin-inline-end: 0.2rem;
  }

  .viewcat-page .panel-body p:not(:last-child) {
    margin-block-end: 0.45rem;
  }

  /* Pagination (.pagination) */
  .pagination {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-block: 0.5rem 1.25rem;
  }

  .pagination li :is(a, span) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.25rem;
    min-block-size: 2.25rem;
    padding-inline: 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
    background-color: var(--color-surface);
    color: var(--color-slate-700);
    font-size: 0.84375rem;
    font-weight: 600;
  }

  .pagination li:not(.active):not(.disabled) a:hover {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
    color: var(--color-brand-800);
  }

  .pagination li.active a {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
    cursor: default;
  }

  .pagination li.disabled :is(a, span) {
    color: var(--color-slate-400);
    background-color: var(--color-slate-100);
    border-color: var(--color-slate-200);
    cursor: not-allowed;
  }

  /* News Detail Page (.news-detail & .other-news) */
  .news-detail {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-block-end: 1.25rem;
    overflow: clip;
  }

  .news-detail > .panel-body {
    padding: clamp(1.125rem, 2.5vw, 1.75rem);
  }

  .news-detail h1.title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.32;
    color: var(--color-slate-900);
    margin-block-end: 0.75rem;
  }

  .news-detail > .panel-body > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding-block-end: 0.75rem;
    margin-block-end: 1.125rem;
    border-block-end: 1px solid var(--color-slate-200);
  }

  .news-detail > .panel-body > .row .h5 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-500);
  }

  .news-detail > .panel-body > .row .h5::before {
    content: "\f017";
    font-family: FontAwesome;
    color: var(--color-brand-600);
  }

  .alert {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.55;
    margin-block-end: 1rem;
  }

  .alert-warning {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-inline-start: 4px solid var(--color-accent-500);
    color: #92400e;
  }

  .news-detail .alert-info,
  .main-column > .alert-info {
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    border-inline-start: 4px solid var(--color-brand-600);
    color: var(--color-slate-700);
  }

  /* Voice Reader Player */
  .news-detail-player {
    --plyr-color-main: var(--color-brand-600);
    --plyr-audio-controls-background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.625rem 0.875rem;
    margin-block-end: 1.25rem;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
  }

  .news-detail-player > .player {
    flex: 1 1 14rem;
    min-inline-size: 0;
  }

  .news-detail-player > .source,
  .news-detail-player > .tools {
    flex-shrink: 0;
  }

  .news-detail-player .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    color: var(--color-slate-700);
    cursor: pointer;
  }

  .news-switch {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--color-slate-700);
  }

  .news-switch .news-switch-btn {
    position: relative;
    inline-size: 2.75rem;
    block-size: 1.375rem;
  }

  .news-switch .news-switch-btn .news-switch-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
  }

  .news-switch .news-switch-btn .news-switch-slider::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    inset-block-end: 4px;
    inline-size: 2.25rem;
    block-size: 0.875rem;
    background-color: var(--color-slate-200);
    border-radius: var(--radius-pill);
    transition: background-color 0.25s ease;
  }

  .news-switch .news-switch-btn .news-switch-slider::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    background-color: var(--color-slate-500);
    border-radius: 50%;
    transition: transform 0.25s ease, background-color 0.25s ease;
  }

  .news-switch .news-switch-btn.checked .news-switch-slider::before {
    background-color: var(--color-brand-100);
  }

  .news-switch .news-switch-btn.checked .news-switch-slider::after {
    background-color: var(--color-brand-600);
    transform: translateX(1.375rem);
  }

  /* Lead Summary & Featured Figure */
  .news-detail .hometext {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--color-slate-800);
    margin-block-end: 1.125rem;
    padding: 0.875rem 1rem;
    background-color: var(--color-surface-subtle);
    border-inline-start: 3px solid var(--color-brand-600);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    text-wrap: pretty;
  }

  .news-detail figure.article {
    margin-block: 0 1.25rem;
    padding: 0.5rem;
    text-align: center;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    overflow: clip;
  }

  .news-detail figure.article img.img-thumbnail {
    margin-inline: auto;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: auto;
    border-radius: var(--radius-sm);
  }

  .news-detail figure.article figcaption {
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--color-slate-600);
    line-height: 1.45;
  }

  /* Article Body Content */
  .news-detail .bodytext {
    font-size: 0.96875rem;
    line-height: 1.75;
    color: var(--color-slate-800);
    overflow-wrap: break-word;
    overflow-x: auto;
    margin-block-end: 1.25rem;
  }

  .news-detail .bodytext p {
    margin-block-end: 0.95rem;
    text-wrap: pretty;
  }

  .news-detail .bodytext :is(h2, h3, h4) {
    margin-block: 1.25rem 0.6rem;
    color: var(--color-slate-900);
    line-height: 1.35;
    text-wrap: balance;
  }

  .news-detail .bodytext h2 {
    font-size: 1.25rem;
  }

  .news-detail .bodytext h3 {
    font-size: 1.1rem;
  }

  .news-detail .bodytext h4 {
    font-size: 1rem;
  }

  .news-detail .bodytext ul {
    list-style: disc;
    padding-inline-start: 1.5rem;
    margin-block-end: 0.95rem;
  }

  .news-detail .bodytext ol {
    list-style: decimal;
    padding-inline-start: 1.5rem;
    margin-block-end: 0.95rem;
  }

  .news-detail .bodytext li:not(:last-child) {
    margin-block-end: 0.35rem;
  }

  .news-detail .bodytext a {
    color: var(--color-brand-700);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .news-detail .bodytext a:hover {
    color: var(--color-accent-600);
  }

  .news-detail .bodytext img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-sm);
    margin-block: 0.5rem;
    margin-inline: auto;
  }

  .news-detail .bodytext figure.image {
    margin-block: 1rem;
    text-align: center;
  }

  .news-detail .bodytext figure.image figcaption {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--color-slate-600);
    padding-block-start: 0.4rem;
  }

  .news-detail .bodytext blockquote {
    margin-block: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-surface-subtle);
    border-inline-start: 3px solid var(--color-accent-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-slate-700);
    font-style: italic;
  }

  .news-detail .bodytext table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
    font-size: 0.875rem;
  }

  .news-detail .bodytext :is(th, td) {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-slate-200);
    text-align: start;
  }

  .news-detail .bodytext th {
    background-color: var(--color-surface-subtle);
    font-weight: 700;
    color: var(--color-slate-900);
  }

  /* Attached Files */
  .news-detail .panel {
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    overflow: clip;
    margin-block-end: 1.125rem;
  }

  .news-detail .panel > .panel-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    background-color: var(--color-brand-50);
    border-block-end: 1px solid var(--color-brand-100);
    color: var(--color-brand-900);
    font-size: 0.875rem;
  }

  .news-download-file .list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    font-size: 0.84375rem;
    background-color: var(--color-surface);
  }

  .news-download-file .list-group-item:not(:last-child) {
    border-block-end: 1px solid var(--color-slate-200);
  }

  .news-download-file .list-group-item > a {
    color: var(--color-slate-800);
    font-weight: 500;
  }

  .news-download-file .list-group-item > a:hover {
    color: var(--color-brand-700);
  }

  .news-download-file .list-group-item .badge {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.75rem;
    min-block-size: 1.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-600);
  }

  .news-download-file .list-group-item .badge a {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
  }

  .news-download-file .collapse {
    display: none;
    flex-basis: 100%;
  }

  .news-download-file .collapse.in {
    display: block;
  }

  /* Author, Tags & Detail Footer (Rating + Social Share) */
  .news-detail .text-right {
    text-align: end;
    font-size: 0.875rem;
    color: var(--color-slate-700);
    margin-block-end: 0.35rem;
  }

  .news-detail .keywords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0.75rem;
    margin-block: 1rem;
    border-block: 1px dashed var(--color-slate-200);
    font-size: 0.8125rem;
    color: var(--color-slate-600);
  }

  .news-detail .keywords > em.fa-tags {
    color: var(--color-brand-600);
  }

  .news-detail .keywords a {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-700);
    font-weight: 500;
  }

  .news-detail .keywords a:hover {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
    color: var(--color-brand-800);
  }

  .news-detail .keywords a em {
    font-style: normal;
  }

  .detail-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding-block-start: 0.75rem;
  }

  .detail-footer .rating {
    font-size: 0.8125rem;
    color: var(--color-slate-600);
  }

  .detail-footer .rating #stringrating {
    font-weight: 600;
    color: var(--color-slate-800);
    margin-block-end: 0.25rem;
  }

  .detail-footer .socialbutton {
    margin-inline-start: auto;
  }

  .social-share-container {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .social-share-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-600);
    white-space: nowrap;
  }

  .social-share-label i {
    color: var(--color-brand-600);
    font-size: 0.85em;
  }

  .social-share-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
  }

  .social-share-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    min-block-size: 1.5rem;
    border: none;
    border-radius: var(--radius-pill);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }

  .social-share-buttons button svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    flex-shrink: 0;
  }

  .social-share-buttons button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .social-share-buttons .social-share-facebook {
    background-color: #1877f2;
  }

  .social-share-buttons .social-share-facebook:hover:not(:disabled) {
    background-color: #166fe5;
  }

  .social-share-buttons .social-share-twitter {
    background-color: #0f172a;
  }

  .social-share-buttons .social-share-twitter:hover:not(:disabled) {
    background-color: #1e293b;
  }

  /* Related / Topic / Newer / Older News */
  .news_column.panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-block-end: 1.25rem;
    overflow: clip;
  }

  .other-news {
    padding: 1.125rem 1.25rem;
  }

  .other-news .h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    color: var(--color-brand-900);
    padding-block-end: 0.5rem;
    margin-block: 1rem 0.65rem;
    border-block-end: 2px solid var(--color-brand-600);
  }

  .other-news > .h3:first-child,
  .other-news > .clearfix:first-child > .h3 {
    margin-block-start: 0;
  }

  .other-news .h3::before {
    content: "";
    inline-size: 0.3rem;
    block-size: 1rem;
    background-color: var(--color-accent-500);
    border-radius: var(--radius-pill);
  }

  .detail-related.related {
    margin-block-end: 0.75rem;
  }

  .detail-related.related li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    padding-block: 0.45rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .detail-related.related li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .detail-related.related li > em.fa-angle-right {
    color: var(--color-brand-600);
    flex-shrink: 0;
  }

  .detail-related.related li h4 {
    display: inline;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate-800);
  }

  .detail-related.related li h4 a:hover {
    color: var(--color-brand-700);
  }

  .detail-related.related li > em:not(.fa) {
    font-size: 0.78125rem;
    font-style: normal;
    color: var(--color-slate-500);
  }

  .other-news .text-right {
    text-align: end;
    margin-block-end: 0.75rem;
  }

  .other-news .text-right a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }

  .other-news .text-right a:hover {
    color: var(--color-accent-600);
  }

  /* Module Contact (.contact) */
  .contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
    margin-block-end: 1.25rem;
  }

  .contact > .well {
    background: linear-gradient(135deg, var(--color-brand-50) 0%, #ffffff 100%);
    border: 1px solid var(--color-brand-100);
    border-inline-start: 4px solid var(--color-brand-600);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    margin-block-end: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-slate-700);
    box-shadow: var(--shadow-xs);
  }

  .contact > .panel-primary:only-child,
  .contact > .row {
    grid-column: 1 / -1;
  }

  .contact > .well p:not(:last-child) {
    margin-block-end: 0.5rem;
  }

  .contact > .well a {
    color: var(--color-brand-700);
    font-weight: 600;
  }

  .contact > .well a:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
  }

  .contact > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-block-end: 1.25rem;
  }

  .contact .panel-default {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-block-end: 1.25rem;
    overflow: clip;
  }

  .contact .panel-default:last-child {
    margin-block-end: 0;
  }

  .contact .panel-default > .panel-heading {
    padding: 0.75rem 1.125rem;
    background: linear-gradient(to right, var(--color-brand-50), #ffffff);
    border-block-end: 2px solid var(--color-brand-600);
  }

  .contact .panel-default > .panel-heading h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    color: var(--color-brand-900);
    margin: 0;
  }

  .contact .panel-default > .panel-body {
    padding: 1.125rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-slate-700);
  }

  .contact .panel-default .img-thumbnail {
    inline-size: 100%;
    max-block-size: 14rem;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-200);
  }

  .contact .panel-default .margin-bottom {
    margin-block-end: 0.75rem;
    color: var(--color-slate-600);
  }

  .contact .panel-default p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    padding-block: 0.45rem;
    font-size: 0.875rem;
    color: var(--color-slate-600);
  }

  .contact .panel-default p:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .contact .panel-default p .fa-horizon {
    inline-size: 1.25rem;
    text-align: center;
    color: var(--color-brand-600);
    flex-shrink: 0;
  }

  .contact .panel-default p span {
    color: var(--color-slate-900);
    font-weight: 500;
  }

  .contact .panel-default p a {
    color: var(--color-brand-700);
    font-weight: 600;
  }

  .contact .panel-default p a:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
  }

  .contact .panel-primary {
    margin-block-end: 0;
    box-shadow: var(--shadow-sm);
  }

  .contact .panel-primary > .panel-heading {
    background: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-600));
    padding: 0.85rem 1.25rem;
    font-size: 0.9375rem;
  }

  .contact .panel-primary > .panel-heading::before {
    content: "\f0e0";
    font-family: FontAwesome;
    color: #fde047;
  }

  .contact .loadContactForm {
    padding: clamp(1rem, 2.5vw, 1.5rem);
  }

  /* Contact Form (.nv-fullbg) */
  .nv-fullbg {
    position: relative;
  }

  .nv-fullbg .form-group:not(:last-child) {
    margin-block-end: 0.875rem;
  }

  .nv-fullbg .input-group {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .nv-fullbg .input-group:focus-within {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .nv-fullbg .input-group-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    padding-inline: 0.625rem;
    background-color: var(--color-surface-subtle);
    border-inline-end: 1px solid var(--color-slate-200);
    color: var(--color-brand-600);
    font-size: 0.9375rem;
    flex-shrink: 0;
  }

  .nv-fullbg .input-group-addon:last-child {
    border-inline-end: none;
    border-inline-start: 1px solid var(--color-slate-200);
    color: var(--color-slate-600);
    cursor: pointer;
  }

  .nv-fullbg .input-group-addon:last-child:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-700);
  }

  .nv-fullbg .form-control {
    flex: 1 1 auto;
    min-inline-size: 0;
    inline-size: 100%;
    padding: 0.575rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-slate-800);
    background-color: transparent;
    border: none;
  }

  .nv-fullbg .form-control:focus {
    outline: none;
  }

  .nv-fullbg select.form-control {
    cursor: pointer;
    background-color: var(--color-surface);
  }

  .nv-fullbg :is(.form-control.disabled, .form-control:disabled) {
    background-color: var(--color-slate-100);
    color: var(--color-slate-500);
    cursor: not-allowed;
  }

  .nv-fullbg textarea.form-control {
    display: block;
    inline-size: 100%;
    min-block-size: 7.5rem;
    resize: vertical;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .nv-fullbg textarea.form-control:focus {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .nv-fullbg :is(.form-group.has-error .input-group, .input-group:has(:user-invalid)) {
    border-color: var(--color-red-600);
    background-color: var(--color-red-50);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
  }

  .nv-fullbg :is(.form-group.has-error .input-group-addon, .input-group:has(:user-invalid) .input-group-addon) {
    color: var(--color-red-600);
    border-inline-end-color: #fecaca;
  }

  .nv-fullbg :is(.form-group.has-error textarea.form-control, textarea.form-control:user-invalid) {
    border-color: var(--color-red-600);
    background-color: var(--color-red-50);
  }

  .nv-fullbg label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84375rem;
    color: var(--color-slate-700);
    cursor: pointer;
  }

  .nv-fullbg input[type="checkbox"] {
    inline-size: 1rem;
    block-size: 1rem;
    accent-color: var(--color-brand-600);
    cursor: pointer;
  }

  .nv-fullbg .middle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .nv-fullbg .middle.text-center {
    justify-content: center;
  }

  .nv-fullbg .captchaImg {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
  }

  .nv-fullbg .fa-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-slate-100);
    color: var(--color-brand-700);
    cursor: pointer;
  }

  .nv-fullbg .fa-refresh:hover {
    background-color: var(--color-brand-50);
  }

  .nv-fullbg .fcode.form-control {
    flex: 0 0 auto;
    inline-size: 7rem !important;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
  }

  .nv-fullbg .fcode.form-control:focus {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .nv-fullbg .text-center.form-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-block-start: 1rem;
  }

  .nv-fullbg .btn {
    flex: 0 1 auto;
    min-inline-size: 8.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.375rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .nv-fullbg .btn-default {
    background-color: var(--color-slate-100);
    border-color: var(--color-slate-200);
    color: var(--color-slate-700);
  }

  .nv-fullbg .btn-default:hover:not(:disabled) {
    background-color: var(--color-slate-200);
    color: var(--color-slate-900);
  }

  .nv-fullbg .btn-primary {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .nv-fullbg .btn-primary:hover:not(:disabled) {
    background-color: var(--color-brand-800);
    transform: translateY(-1px);
  }

  .nv-fullbg .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }

  .contact-result {
    display: none;
    margin-block-start: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .contact-result.alert-info {
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    border-inline-start: 4px solid var(--color-brand-600);
    color: var(--color-brand-900);
  }

  .contact-result.alert-danger {
    background-color: var(--color-red-50);
    border: 1px solid #fecaca;
    border-inline-start: 4px solid var(--color-red-600);
    color: #991b1b;
  }

  /* Contact Blocks (.contactList, block.department, #contactButton) */
  .contactList {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.84375rem;
    color: var(--color-slate-700);
  }

  .contactList li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
  }

  .contactList li em {
    color: var(--color-brand-600);
    inline-size: 1.1rem;
    text-align: center;
    flex-shrink: 0;
  }

  .contactList li a {
    color: var(--color-brand-700);
    font-weight: 500;
  }

  .contactList li a:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
  }

  .bcb_primary_body .table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.84375rem;
  }

  .bcb_primary_body .table td {
    padding: 0.5rem 0.625rem;
    border-block-end: 1px solid var(--color-slate-200);
    color: var(--color-slate-700);
    vertical-align: top;
  }

  .bcb_primary_body .table tr:last-child td {
    border-block-end: none;
  }

  .bcb_primary_body .table td.active {
    background-color: var(--color-brand-50);
    color: var(--color-brand-900);
    font-weight: 700;
    border-block-end: 2px solid var(--color-brand-600);
  }

  .bcb_primary_body hr {
    border: none;
    border-block-start: 1px dashed var(--color-slate-200);
    margin-block: 0.75rem;
  }

  #contactButton .ctb {
    background-color: var(--color-brand-700);
    border: 1px solid var(--color-brand-800);
    color: #ffffff;
    padding: 0.5rem 1rem;
    font-size: 0.84375rem;
    font-weight: 600;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }

  #contactButton .ctb:hover {
    background-color: var(--color-brand-800);
  }

  #contactButton .panel {
    margin-block-end: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
  }

  #contactButton .panel > .panel-heading {
    justify-content: space-between;
  }

  #contactButton .panel > .panel-heading .close {
    order: 2;
    color: #ffffff;
    opacity: 0.85;
    font-size: 1.25rem;
    text-shadow: none;
  }

  #contactButton .panel > .panel-heading .close:hover {
    opacity: 1;
  }

  #contactButton .panel > .panel-body {
    padding: 1rem;
  }

  /* Module Organs (.organs) */
  .organs {
    margin-block-end: 1.25rem;
  }

  .organs.organs-block,
  .organs.organs-search,
  .organs.organs-birthday {
    margin-block-end: 0;
  }

  .organs .panel-primary {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: clip;
    margin-block-end: 1.25rem;
  }

  .organs .panel-primary > .panel-heading,
  .organs .vieworg > .org {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.125rem;
    background: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-600));
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.015em;
  }

  .organs .panel-primary > .panel-heading::before,
  .organs .vieworg > .org::before {
    content: "";
    inline-size: 0.35rem;
    block-size: 1rem;
    background-color: #fde047;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  .organs .panel-body {
    padding: 1.125rem 1.25rem;
  }

  .organs .org-info-list {
    margin-block-end: 0.75rem;
  }

  .organs .org-info-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-block: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-slate-600);
  }

  .organs .org-info-list li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .organs .org-info-list li strong {
    color: var(--color-slate-800);
  }

  .organs .org-about {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-slate-600);
    margin-block-start: 0.5rem;
    text-wrap: pretty;
  }

  .organs .panel-body hr {
    border: none;
    border-block-start: 1px dashed var(--color-slate-200);
    margin-block: 1rem;
  }

  /* Organs Tables (vieworg_catelist, vieworg_catelist_full, vieworg_list, detaiper) */
  .organs .table-responsive {
    inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-block-end: 1.25rem;
  }

  .organs .table-org .table-responsive,
  .organs .table_org .table-responsive {
    border-radius: var(--radius-md);
    box-shadow: none;
    margin-block: 0 1rem;
    margin-inline: 1.25rem;
    inline-size: calc(100% - 2.5rem);
  }

  .organs .table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.84375rem;
    color: var(--color-slate-700);
  }

  .organs .table caption {
    padding: 0.85rem 1.125rem;
    text-align: start;
    background: linear-gradient(to right, var(--color-brand-50), #ffffff);
    border-block-end: 2px solid var(--color-brand-600);
    color: var(--color-slate-700);
    font-size: 0.8125rem;
    line-height: 1.55;
  }

  .organs .table caption > a {
    font-size: 0.96875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-brand-900);
  }

  .organs .table caption > a:hover {
    color: var(--color-accent-600);
  }

  .organs .org-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-block-start: 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-slate-600);
  }

  .organs .btn-group {
    position: relative;
    display: inline-flex;
  }

  .organs .pull-right {
    float: inline-end;
  }

  .organs .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    padding: 0.25rem 0.6rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    color: var(--color-brand-700);
    cursor: pointer;
  }

  .organs .dropdown-toggle:hover {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
  }

  .organs .caret {
    display: inline-block;
    inline-size: 0;
    block-size: 0;
    border-inline: 4px solid transparent;
    border-block-start: 5px solid currentColor;
  }

  .organs .dropdown-menu {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-end: 0;
    z-index: 20;
    min-inline-size: 13rem;
    padding: 0.35rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  .organs .btn-group.open > .dropdown-menu {
    display: block;
  }

  .organs .dropdown-menu li a {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-700);
  }

  .organs .dropdown-menu li a:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  .organs .table thead th {
    padding: 0.7rem 0.875rem;
    background-color: var(--color-brand-700);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
  }

  .organs .table thead th.text-center {
    text-align: center;
  }

  .organs .table tbody td {
    padding: 0.7rem 0.875rem;
    border-block-end: 1px solid var(--color-slate-200);
    vertical-align: middle;
    line-height: 1.5;
  }

  .organs .table tbody td:not(:last-child) {
    border-inline-end: 1px solid var(--color-slate-100);
  }

  .organs .table tbody tr:last-child td {
    border-block-end: none;
  }

  .organs .table-striped tbody tr:nth-child(even) {
    background-color: var(--color-surface-subtle);
  }

  .organs .table-hover tbody tr:hover {
    background-color: var(--color-brand-50);
  }

  .organs .table tbody tr.org-subcat-row {
    background-color: var(--color-brand-50);
  }

  .organs .table tbody tr.org-subcat-row a.org {
    font-weight: 700;
    color: var(--color-brand-800);
  }

  .organs .org-subcat-email {
    margin-inline-start: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-slate-600);
  }

  .organs .org-person-contact {
    margin-block-start: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-slate-600);
  }

  .organs .table a.name_org,
  .organs .table tbody td a {
    color: var(--color-slate-900);
    font-weight: 600;
  }

  .organs .table a.name_org:hover,
  .organs .table tbody td a:hover {
    color: var(--color-brand-700);
  }

  .organs .table img.img-thumbnail {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: auto;
    margin-inline: auto;
    padding: 0.15rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
  }

  /* Sub-organizations list */
  .organs .suborg {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-inline-start: 4px solid var(--color-brand-600);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-block-end: 1.25rem;
    box-shadow: var(--shadow-xs);
  }

  .organs .suborg > strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-brand-900);
    margin-block-end: 0.625rem;
  }

  .organs .suborg ol {
    list-style: decimal;
    padding-inline-start: 1.35rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.45rem 1.25rem;
    font-size: 0.875rem;
  }

  .organs .suborg ol a.org {
    color: var(--color-brand-700);
    font-weight: 600;
  }

  .organs .suborg ol a.org:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
  }

  /* Organs Grid & Search Results (vieworg_gird, viewsearch) */
  .organs .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
  }

  .organs .thumbnail {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    overflow: clip;
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .organs .thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand-500);
  }

  .organs .org-thumb-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    background-color: var(--color-surface-subtle);
    border-block-end: 1px solid var(--color-slate-100);
  }

  .organs .thumbnail img {
    max-inline-size: 100%;
    block-size: auto;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-inline: auto;
  }

  .organs .thumbnail .caption {
    padding: 0.75rem;
  }

  .organs .thumbnail .caption h3 {
    font-size: 0.875rem;
    font-weight: 700;
    margin-block-end: 0.25rem;
    color: var(--color-slate-900);
  }

  .organs .thumbnail .caption h3 a:hover {
    color: var(--color-brand-700);
  }

  .organs .thumbnail .caption p {
    font-size: 0.78125rem;
    color: var(--color-slate-500);
    line-height: 1.45;
  }

  /* Organs Search & Sidebar Blocks */
  .organs-search .organs-search-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.625rem;
    align-items: stretch;
  }

  .organs .form-group:not(:last-child) {
    margin-block-end: 0.75rem;
  }

  .organs .form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-700);
    margin-block-end: 0.3rem;
  }

  .organs .input-group {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .organs .input-group:focus-within {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .organs .input-group-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.25rem;
    background-color: var(--color-surface-subtle);
    border-inline-end: 1px solid var(--color-slate-200);
    color: var(--color-brand-600);
    font-size: 0.875rem;
    flex-shrink: 0;
  }

  .organs .form-control {
    flex: 1 1 auto;
    min-inline-size: 0;
    inline-size: 100%;
    padding: 0.475rem 0.65rem;
    font-size: 0.84375rem;
    color: var(--color-slate-800);
    background-color: transparent;
    border: none;
  }

  .organs .search_ograns .form-control,
  .organs select.form-control {
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
  }

  .organs .form-control:focus {
    outline: none;
  }

  .organs .search_ograns .form-control:focus {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .organs .btn-primary {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
  }

  .organs .btn-primary:hover:not(:disabled) {
    background-color: var(--color-brand-800);
    color: #ffffff;
  }

  .organs .btn-block {
    inline-size: 100%;
  }

  .organs .org-block-heading {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-900);
    margin-block-end: 0.5rem;
    padding-block-end: 0.35rem;
    border-block-end: 2px solid var(--color-brand-600);
  }

  .organs .org-block-list {
    margin-block-end: 0.75rem;
  }

  .organs .org-block-list li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .organs .org-block-list li a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.25rem;
    font-size: 0.84375rem;
    font-weight: 500;
    color: var(--color-slate-700);
  }

  .organs .org-block-list li a::before {
    content: "\f105";
    font-family: FontAwesome;
    color: var(--color-brand-600);
  }

  .organs .org-block-list li a:hover {
    color: var(--color-brand-800);
    padding-inline-start: 0.5rem;
  }

  .organs .divscroll {
    max-block-size: 22rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--color-slate-400) transparent;
    padding-inline-end: 0.25rem;
  }

  .organs-birthday-text {
    line-height: 28px;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }

  /* Module Photos (.photos) */
  .photos {
    margin-block-end: 1.5rem;
    color: var(--color-slate-800);
  }

  .photos.photos-block-list,
  .photos.photos-info-list,
  .photos.photo-detail,
  .photos.block_album_tab_new,
  .photos.tms_album {
    margin-block-end: 0;
  }

  .photos .page-header,
  .photos .category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block-end: 0.6rem;
    margin-block: 0 1.15rem;
    border-block-end: 2px solid var(--color-brand-600);
  }

  .photos .page-header.photos-detail-header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.55rem;
  }

  .photos .page-header :is(h1, h3, h4),
  .photos .category h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-brand-900);
    margin: 0;
    text-wrap: balance;
  }

  .photos .page-header h3 a.pull-left {
    float: none !important;
    color: inherit;
  }

  .photos .page-header :is(h1, h3, h4)::before,
  .photos .category h3::before {
    content: "";
    inline-size: 0.3rem;
    block-size: 1.05rem;
    background-color: var(--color-accent-500);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  .photos .page-header .pull-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .photos .page-header .pull-right a {
    padding: 0.22rem 0.65rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-700);
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .photos .page-header .pull-right a:hover {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .photos .photos-detail-desc {
    margin: 0;
    font-size: 0.90625rem;
    line-height: 1.6;
    color: var(--color-slate-600);
  }

  .photos .photos-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
  }

  .photos .photos-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    font-size: 0.78125rem;
    color: var(--color-slate-600);
  }

  .photos .photos-meta-item em {
    color: var(--color-brand-700);
  }

  .photos .photos-meta-item a {
    font-weight: 600;
    color: var(--color-brand-800);
  }

  .photos .photos-grid,
  .photos #album-gallery > .row,
  .photos #other-album.row,
  .photos .tab-pane > .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    padding: 0;
    margin-block-end: 1.25rem;
  }

  .photos :is(.album-album, #album-gallery > .row > div, #other-album.row > div) .panel-default {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    margin-block-end: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    overflow: clip;
    box-shadow: var(--shadow-xs);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .photos :is(.album-album, #album-gallery > .row > div, #other-album.row > div) .panel-default:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-brand-500);
  }

  .photos :is(.album-image, #album-gallery .panel-body, #other-album .panel-body) {
    position: relative;
    padding: 0;
    overflow: clip;
    background-color: var(--color-slate-900);
  }

  .photos :is(.album-image, #album-gallery .panel-body, #other-album .panel-body) > a {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: clip;
  }

  .photos :is(.album-image, #album-gallery .panel-body, #other-album .panel-body) img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, opacity 0.25s ease;
  }

  .photos :is(.album-album, #album-gallery > .row > div, #other-album.row > div) .panel-default:hover img {
    transform: scale(1.05);
    opacity: 0.94;
  }

  .photos .panel-footer.view_detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.65rem;
    padding: 0.75rem 0.875rem;
    flex: 1 1 auto;
    border-block-start: 1px solid var(--color-slate-100);
    background-color: var(--color-surface);
  }

  .photos .album-name {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .photos .album-name h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-slate-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }

  .photos .album-name h3 a {
    color: inherit;
  }

  .photos .album-name h3 a:hover {
    color: var(--color-brand-700);
  }

  .photos .album-name h4 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-slate-500);
  }

  .photos .album-name h4:empty {
    display: none;
  }

  .photos .btn-primary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    min-block-size: 1.9rem;
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
    font-size: 0.78125rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: background-color 0.18s ease, transform 0.15s ease;
  }

  .photos .btn-primary:hover:not(:disabled) {
    background-color: var(--color-brand-800);
    color: #ffffff;
  }

  .photos .panel-footer.view_detail .text-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-600);
  }

  .photos .panel-footer.view_detail > .clear {
    display: none;
  }

  .photos .album_description {
    padding: 0.8rem 1rem;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-inline-start: 3px solid var(--color-brand-600);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-slate-700);
    margin-block-end: 1.1rem;
    text-wrap: pretty;
  }

  .photos [id^="view_image_"] {
    position: relative;
    background-color: var(--color-slate-900);
    border-radius: var(--radius-lg);
    overflow: clip;
    padding: 1rem;
    margin-block-end: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
  }

  .photos [id^="view_image_"] img {
    max-inline-size: 100%;
    block-size: auto;
    margin-inline: auto;
    border-radius: var(--radius-sm);
  }

  .photos .arrow_left,
  .photos .arrow_right {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-pill);
    background-color: rgba(15, 23, 42, 0.58);
    color: #ffffff;
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  .photos .arrow_left {
    inset-inline-start: 0.75rem;
  }

  .photos .arrow_right {
    inset-inline-end: 0.75rem;
  }

  .photos :is(.arrow_left, .arrow_right):hover {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .photos :is(.arrow_left, .arrow_right) i {
    font-size: 1.5rem;
  }

  .photos :is(.nav-tabs, .tms-tabs) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-block-end: 2px solid var(--color-brand-600);
    margin-block-end: 0.875rem;
    padding: 0;
    list-style: none;
  }

  .photos :is(.nav-tabs, .tms-tabs) li a {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--color-slate-600);
    background-color: var(--color-slate-100);
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .photos :is(.nav-tabs, .tms-tabs) li a:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  .photos :is(.nav-tabs, .tms-tabs) li.active a {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .photos .tab-content > .tab-pane {
    display: none;
    padding: 0.25rem 0 0 !important;
  }

  .photos .tab-content > .tab-pane.active {
    display: block;
  }

  .photos .tab-pane > .row > div {
    margin: 0 !important;
  }

  .photos .tab-pane > .row a,
  .photos .photos-grid[class*="block-"] a {
    display: block;
  }

  .photos .tab-pane > .row img,
  .photos .photos-grid[class*="block-"] img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
    padding: 0;
    transition: transform 0.25s ease, box-shadow 0.2s ease;
  }

  .photos .tab-pane > .row a:hover img,
  .photos .photos-grid[class*="block-"] a:hover img {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }

  .photos .tab-pane > .row .m-bottom span,
  .photos .photos-grid[class*="block-"] span strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
    margin-block-start: 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-slate-800);
  }

  .photos .booking {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 0.5rem;
  }

  .photos .booking_bnt {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.95rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-600);
    color: var(--color-brand-800);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .photos .booking_bnt:hover {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .photos.tms_album .item {
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    overflow: clip;
    box-shadow: var(--shadow-xs);
  }

  .photos.tms_album .item img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .photos.tms_album .item:hover img {
    transform: scale(1.04);
  }

  .photos.photo-detail {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: 0.95rem 1.1rem;
    box-shadow: var(--shadow-xs);
    font-size: 0.84375rem;
  }

  .photos.photo-detail h3 {
    margin: 0 0 0.5rem;
    font-size: 0.96875rem;
    color: var(--color-brand-900);
  }

  .photos .photos-block-list,
  .photos .photos-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .photos .photos-block-list li:not(:last-child),
  .photos .photos-info-list li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
    padding-block-end: 0.55rem;
    margin-block-end: 0.55rem;
  }

  .photos .photos-block-list img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-block-end: 0.4rem;
  }

  .photos.form-horizontal,
  .photos.panel-default {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    padding: 1.125rem;
    margin-block-end: 1.25rem;
    box-shadow: var(--shadow-xs);
  }

  .photos.form-horizontal .form-group {
    display: grid;
    grid-template-columns: 11rem 1fr;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-block-end: 0.75rem;
  }

  .photos.form-horizontal .form-control {
    inline-size: 100%;
    padding: 0.475rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-slate-800);
  }

  .photos.form-horizontal .input-group {
    display: flex;
    align-items: stretch;
  }

  .photos.form-horizontal .input-group .btn {
    flex: 0 0 auto;
    background-color: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-700);
    margin-inline-start: 0.35rem;
  }

  /* Module Laws (.laws) */
  .laws {
    margin-block-end: 1.25rem;
  }

  .laws.laws-block,
  .laws.laws-search {
    margin-block-end: 0;
  }

  .laws :is(h3.pagetitle, h3.lawh3) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    color: var(--color-brand-900);
    padding-block-end: 0.5rem;
    margin-block: 0 0.875rem;
    border-block-end: 2px solid var(--color-brand-600);
  }

  .laws h3.lawh3:not(:first-child) {
    margin-block-start: 1.25rem;
  }

  .laws :is(h3.pagetitle, h3.lawh3)::before {
    content: "";
    inline-size: 0.3rem;
    block-size: 1rem;
    background-color: var(--color-accent-500);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  .laws h3.subtitle {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-brand-900);
    margin-block: 1.25rem 0.65rem;
    padding-block-end: 0.4rem;
    border-block-end: 1px solid var(--color-slate-200);
  }

  .laws h3.subtitle a {
    color: var(--color-brand-700);
  }

  .laws p {
    font-size: 0.90625rem;
    line-height: 1.7;
    color: var(--color-slate-700);
    margin-block-end: 0.875rem;
    text-wrap: pretty;
  }

  .laws p:last-child {
    margin-block-end: 0;
  }

  .laws > h3.lawh3:first-child + p {
    padding: 0.875rem 1.125rem;
    background: linear-gradient(135deg, var(--color-brand-50) 0%, #ffffff 100%);
    border: 1px solid var(--color-brand-100);
    border-inline-start: 4px solid var(--color-brand-600);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-slate-800);
    line-height: 1.65;
    margin-block-end: 1.125rem;
    box-shadow: var(--shadow-xs);
  }

  .laws > p.m-bottom {
    padding: 1rem 1.125rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    color: var(--color-slate-800);
    line-height: 1.75;
  }

  .laws > p.text-center.m-bottom {
    padding: 0.75rem 1rem;
    background-color: var(--color-surface-subtle);
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-md);
    color: var(--color-slate-500);
    font-style: italic;
    font-size: 0.84375rem;
  }

  .laws .comm_time p {
    font-size: 0.78125rem;
    line-height: 1.45;
    margin-block: 0.2rem 0;
  }

  .laws .comm_time p.start_comm {
    color: var(--color-brand-700);
  }

  .laws .comm_time p.end_comm {
    color: var(--color-accent-600);
  }

  .laws.laws-block p.text-right {
    text-align: end;
    font-size: 0.8125rem;
    color: var(--color-brand-800);
    padding-block-start: 0.5rem;
    border-block-start: 1px dashed var(--color-slate-200);
    margin-block: 0.5rem 0 0;
  }

  .laws .table-responsive {
    inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-block-end: 1.25rem;
  }

  .laws .table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.84375rem;
    color: var(--color-slate-700);
  }

  .laws .table th {
    padding: 0.7rem 0.875rem;
    background-color: var(--color-brand-700);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
  }

  .laws .table th.text-center {
    text-align: center;
  }

  .laws .table tbody td {
    padding: 0.7rem 0.875rem;
    border-block-end: 1px solid var(--color-slate-200);
    vertical-align: middle;
    line-height: 1.5;
  }

  .laws .table tbody td.text-center {
    text-align: center;
  }

  .laws .table tbody td.text-right {
    text-align: end;
  }

  .laws .table tbody td:not(:last-child) {
    border-inline-end: 1px solid var(--color-slate-100);
  }

  .laws .table tbody tr:last-child td {
    border-block-end: none;
  }

  .laws .table-striped tbody tr:nth-child(even) {
    background-color: var(--color-surface-subtle);
  }

  .laws .table-hover tbody tr:hover {
    background-color: var(--color-brand-50);
  }

  .laws .table tbody tr.hoatim > td:first-child {
    font-weight: 600;
    color: var(--color-slate-700);
    background-color: var(--color-surface-subtle);
    inline-size: 12.5rem;
  }

  .laws .table tbody td.warning {
    background-color: var(--color-brand-50);
    border-block: 1px solid var(--color-brand-100);
    font-weight: 700;
    color: var(--color-brand-900);
  }

  .laws .table tbody td a {
    color: var(--color-brand-800);
    font-weight: 500;
  }

  .laws .table tbody td a:hover {
    color: var(--color-accent-600);
    text-decoration: underline;
  }

  .laws .list-item {
    list-style: disc;
    padding-inline-start: 1.25rem;
  }

  .laws .laws-download-file {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    overflow: clip;
    margin-block-end: 1.125rem;
  }

  .laws .laws-download-file .list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    font-size: 0.84375rem;
  }

  .laws .laws-download-file .list-group-item:not(:last-child) {
    border-block-end: 1px solid var(--color-slate-200);
  }

  .laws .laws-download-file .badge {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.75rem;
    min-block-size: 1.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-600);
  }

  .laws .laws-download-file .badge a {
    color: #ffffff;
  }

  .laws .laws-download-file .collapse {
    display: none;
    flex-basis: 100%;
  }

  .laws .laws-download-file .collapse.in {
    display: block;
  }

  .laws .generate_page {
    text-align: center;
  }

  /* Laws Search Forms */
  .laws-search {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    padding: 1rem 1.125rem;
    box-shadow: var(--shadow-xs);
    margin-block-end: 1.25rem;
  }

  .laws-search .laws-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.625rem;
  }

  .laws-search .laws-search-input {
    flex: 1 1 16rem;
    min-inline-size: 0;
  }

  .laws-search .laws-advance-toggle {
    margin-block-start: 0.35rem;
    font-size: 0.8125rem;
  }

  .laws-search #btn-search {
    color: var(--color-brand-700);
    font-weight: 600;
    cursor: pointer;
  }

  .laws-search #btn-search:hover {
    color: var(--color-accent-600);
  }

  .laws-search .laws-search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .laws-search .form-group:not(:last-child) {
    margin-block-end: 0.75rem;
  }

  .laws-search #advance .form-group {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: center;
    gap: 0.4rem 0.875rem;
  }

  .laws-search.laws-search-vertical #advance .form-group {
    grid-template-columns: 1fr;
  }

  .laws-search .control-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-700);
  }

  .laws-search .form-control {
    inline-size: 100%;
    padding: 0.475rem 0.65rem;
    font-size: 0.84375rem;
    color: var(--color-slate-800);
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
  }

  .laws-search .form-control:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .laws-search .form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .laws-search .btn {
    flex: 0 1 auto;
    min-block-size: 2.1875rem;
    padding: 0.45rem 1rem;
  }

  .laws-search .btn-primary {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
  }

  .laws-search .btn-primary:hover:not(:disabled) {
    background-color: var(--color-brand-800);
    color: #ffffff;
  }

  .laws-search .btn-danger {
    background-color: var(--color-red-600);
    border-color: var(--color-red-600);
    color: #ffffff;
  }

  .laws-search .btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
  }

  .laws-search .laws-search-v-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .laws .laws-block-list li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .laws .laws-block-list li a {
    display: inline-block;
    padding-block: 0.45rem;
    font-size: 0.84375rem;
    font-weight: 500;
    color: var(--color-slate-700);
  }

  .laws .laws-block-list li a:hover {
    color: var(--color-brand-700);
  }

  /* ==========================================================================
     Shops (Sản phẩm OCOP / Cửa hàng) & Videos Modules
     ========================================================================== */
  :is(.shops, .videos) {
    color: var(--color-slate-800);
  }

  /* Shared module surfaces, buttons, forms, tables, tabs & collapse */
  :is(.shops, .videos) .panel-default {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    margin-block-end: 1.25rem;
    overflow: clip;
  }

  :is(.shops, .videos) .panel-primary {
    background-color: var(--color-surface);
    border: 1px solid var(--color-brand-600);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    margin-block-end: 1.25rem;
    overflow: clip;
  }

  :is(.shops, .videos) .panel-primary > .panel-heading {
    background: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-700));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.7rem 1rem;
  }

  :is(.shops, .videos) .panel-danger {
    background-color: var(--color-red-50);
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    margin-block-start: 0.75rem;
  }

  :is(.shops, .videos) .panel-body {
    padding: 1rem;
  }

  :is(.shops, .videos) .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block-end: 0.55rem;
    margin-block: 0 1rem;
    border-block-end: 2px solid var(--color-brand-600);
  }

  :is(.shops, .videos) .page-header :is(h1, h2, h3) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
    font-weight: 700;
    color: var(--color-brand-900);
    text-wrap: balance;
  }

  :is(.shops, .videos) .page-header :is(h1, h2, h3)::before {
    content: "";
    inline-size: 0.3rem;
    block-size: 1rem;
    background-color: var(--color-accent-500);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  :is(.shops, .videos) .btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-block-size: 2.125rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  }

  :is(.shops, .videos) .btn-xs {
    min-block-size: 1.75rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
  }

  :is(.shops, .videos) .btn-sm {
    min-block-size: 1.95rem;
    padding: 0.325rem 0.75rem;
    font-size: 0.8125rem;
  }

  :is(.shops, .videos) .btn-primary {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-primary:hover:not(:disabled) {
    background-color: var(--color-brand-800);
    border-color: var(--color-brand-800);
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-success {
    background-color: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-success:hover:not(:disabled) {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-danger {
    background-color: var(--color-red-600);
    border-color: var(--color-red-600);
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-danger:hover:not(:disabled) {
    background-color: #b91c1c;
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-warning {
    background-color: var(--color-accent-600);
    border-color: var(--color-accent-600);
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-warning:hover:not(:disabled) {
    background-color: #c2410c;
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-info {
    background-color: var(--color-blue-700);
    border-color: var(--color-blue-700);
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-info:hover:not(:disabled) {
    background-color: #075985;
    color: #ffffff;
  }

  :is(.shops, .videos) .btn-default {
    background-color: var(--color-surface);
    border-color: var(--color-slate-200);
    color: var(--color-slate-700);
  }

  :is(.shops, .videos) .btn-default:hover:not(:disabled) {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-500);
    color: var(--color-brand-800);
  }

  :is(.shops, .videos) .btn.disabled,
  :is(.shops, .videos) .btn:disabled {
    opacity: 0.58;
    cursor: not-allowed;
  }

  :is(.shops, .videos) .form-control {
    inline-size: 100%;
    padding: 0.475rem 0.7rem;
    font-size: 0.875rem;
    color: var(--color-slate-800);
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  :is(.shops, .videos) .form-control:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  :is(.shops, .videos) .input-group {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
  }

  :is(.shops, .videos) .input-group .form-control {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  :is(.shops, .videos) .input-group-btn {
    display: flex;
    flex-shrink: 0;
  }

  :is(.shops, .videos) .form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  :is(.shops, .videos) .form-inline .form-control {
    inline-size: auto;
    min-inline-size: 10rem;
  }

  :is(.shops, .videos) .well {
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    margin-block-end: 1rem;
  }

  :is(.shops, .videos) .alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-block-end: 1rem;
  }

  :is(.shops, .videos) .alert-success {
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    color: var(--color-brand-900);
  }

  :is(.shops, .videos) .alert-danger {
    background-color: var(--color-red-50);
    border: 1px solid #fecaca;
    color: #991b1b;
  }

  :is(.shops, .videos) .table-responsive {
    overflow-x: auto;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    margin-block-end: 1rem;
  }

  :is(.shops, .videos) .table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.84375rem;
    margin: 0;
  }

  :is(.shops, .videos) .table thead th {
    background-color: var(--color-brand-50);
    color: var(--color-brand-900);
    font-weight: 700;
    padding: 0.7rem 0.85rem;
    border-block-end: 2px solid var(--color-brand-600);
    vertical-align: middle;
  }

  :is(.shops, .videos) .table :is(td, tfoot th) {
    padding: 0.65rem 0.85rem;
    border-block-end: 1px solid var(--color-slate-200);
    vertical-align: middle;
  }

  :is(.shops, .videos) .table tbody tr:last-child td {
    border-block-end: none;
  }

  :is(.shops, .videos) .table-striped tbody tr:nth-child(even) {
    background-color: var(--color-surface-subtle);
  }

  :is(.shops, .videos) .table-hover tbody tr:hover {
    background-color: var(--color-brand-50);
  }

  :is(.shops, .videos) .label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  :is(.shops, .videos) .label-danger {
    background-color: var(--color-red-600);
    color: #ffffff;
  }

  :is(.shops, .videos) .label-success {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  :is(.shops, .videos) .label-info {
    background-color: var(--color-blue-700);
    color: #ffffff;
  }

  :is(.shops, .videos) .label-default {
    background-color: var(--color-slate-100);
    color: var(--color-slate-700);
    border: 1px solid var(--color-slate-200);
  }

  :is(.shops, .videos) .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-block-end: 2px solid var(--color-brand-600);
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
  }

  :is(.shops, .videos) .nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--color-slate-600);
    background-color: var(--color-slate-100);
    border: 1px solid transparent;
    border-block-end: none;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  :is(.shops, .videos) .nav-tabs > li > a:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  :is(.shops, .videos) .nav-tabs > li.active > a {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  :is(.shops, .videos) .tab-content > .tab-pane {
    display: none;
  }

  :is(.shops, .videos) .tab-content > .tab-pane.active {
    display: block;
  }

  :is(.shops, .videos) .collapse {
    display: none;
  }

  :is(.shops, .videos) .collapse.in {
    display: block;
  }

  :is(.shops, .videos) .text-center {
    text-align: center;
  }

  :is(.shops, .videos) .text-right {
    text-align: right;
  }

  :is(.shops, .videos) .text-danger,
  :is(.shops, .videos) .error {
    color: var(--color-red-600);
  }

  :is(.shops, .videos) .help-block {
    display: block;
    font-size: 0.78125rem;
    color: var(--color-slate-500);
    margin-block-start: 0.35rem;
  }

  /* --------------------------------------------------------------------------
     SHOPS Module
     -------------------------------------------------------------------------- */
  .shops .tms_sp {
    margin-block-end: 1.5rem;
  }

  .shops .tms_sp_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-end: 2px solid var(--color-brand-600);
    margin-block-end: 1rem;
  }

  .shops .tms_sp_title_cat {
    display: flex;
    align-items: center;
  }

  .shops .tms_sp_title_a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.05rem;
    background: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-700));
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    letter-spacing: 0.01em;
  }

  .shops .tms_sp_title_a i {
    color: var(--color-accent-100);
  }

  .shops a.tms_sp_title_a:hover {
    background: linear-gradient(135deg, var(--color-brand-900), var(--color-brand-800));
    color: #ffffff;
  }

  .shops .tms_sp > .panel-body {
    padding: 0;
  }

  /* Category panels header (main_procate) */
  .shops #category .panel-default > .panel-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, var(--color-brand-50), var(--color-surface));
    border-block-end: 2px solid var(--color-brand-600);
  }

  .shops #category .panel-default > .panel-heading > a.pull-left {
    font-size: 0.96875rem;
    font-weight: 700;
    color: var(--color-brand-900);
  }

  .shops #category .panel-default > .panel-heading > .pull-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .shops #category .panel-default > .panel-heading > .pull-right a {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border: 1px solid var(--color-brand-100);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }

  .shops #category .panel-default > .panel-heading > .pull-right a:hover {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  /* Viewcat / sort toolbar */
  .shops.viewcat {
    margin-block-end: 1rem;
  }

  .shops .viewcat > h1.pull-left,
  .shops.viewcat > h1 {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 700;
    color: var(--color-brand-900);
    margin: 0 0 0.5rem;
  }

  .shops .viewcat .viewtype {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .shops .viewcat .viewtype .pointer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
    background-color: var(--color-surface);
    color: var(--color-slate-600);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .shops .viewcat .viewtype .pointer.active,
  .shops .viewcat .viewtype .pointer:hover {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
  }

  /* Product Grids (viewgird + main_procate + main_product) */
  .shops .viewgrid,
  .shops .shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.25rem, 1fr));
    gap: 1rem;
    align-items: stretch;
  }

  .shops .viewgrid > .text-center,
  .shops .shops-grid > .text-center {
    grid-column: 1 / -1;
    margin-block-start: 0.5rem;
  }

  .shops .tms_sp_item {
    display: flex;
  }

  .shops .tms_col_body,
  .shops .shops-grid .thumbnail {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: clip;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .shops .tms_col_body:hover,
  .shops .shops-grid .thumbnail:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-500);
    box-shadow: var(--shadow-md);
  }

  .shops .tms_sp_item_img,
  .shops .shops-thumb-wrap {
    position: relative;
    background-color: var(--color-surface-subtle);
    border-block-end: 1px solid var(--color-slate-100);
    overflow: clip;
  }

  .shops .shops-thumb-wrap {
    block-size: auto !important;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  .shops .tms_sp_item_img > a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: clip;
  }

  .shops .tms_sp_item_img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }

  .shops .shops-thumb-wrap img.img-thumbnail {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100% !important;
    max-block-size: 100% !important;
    aspect-ratio: auto;
    object-fit: contain;
    border: none;
    padding: 0;
    background: transparent;
    transition: transform 0.3s ease;
  }

  .shops .tms_col_body:hover .tms_sp_item_img img,
  .shops .shops-grid .thumbnail:hover .shops-thumb-wrap img {
    transform: scale(1.04);
  }

  .shops .info_pro {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    z-index: 2;
    pointer-events: none;
  }

  .shops .tms_sp_item_title,
  .shops .shops-grid .caption {
    padding: 0.7rem 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    text-align: center;
  }

  .shops .tms_sp_item_title h3,
  .shops .shops-grid .caption h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }

  .shops .tms_sp_item_title h3 a,
  .shops .shops-grid .caption h3 a {
    color: var(--color-slate-800);
  }

  .shops .tms_sp_item_title h3 a:hover,
  .shops .shops-grid .caption h3 a:hover {
    color: var(--color-brand-700);
  }

  .shops .tms_money {
    padding-inline: 0.75rem;
    padding-block-start: 0.65rem;
  }

  .shops .price {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.84375rem;
  }

  .shops .money,
  .shops .money_home,
  .shops .tms_money .price span:first-child {
    color: var(--color-red-600);
    font-weight: 700;
    font-size: 0.9375rem;
  }

  .shops .discounts_money {
    color: var(--color-slate-400);
    font-size: 0.78125rem;
    font-weight: 500;
    text-decoration: line-through;
  }

  /* OCOP Star Rating (star-tms) */
  .shops .tms_danhgia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding-inline: 0.75rem;
    margin-block-start: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-slate-600);
  }

  .shops .star-tms {
    display: inline-block;
    font-style: normal;
    line-height: 1;
  }

  .shops .star-tms::before {
    font-family: "FontAwesome";
    content: "\f005";
    color: #f59e0b;
    font-size: 0.875rem;
  }

  .shops .shops-grid .caption > .clearfix {
    margin-block-start: auto;
    padding-block-start: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  /* Viewlist (horizontal product card) */
  .shops .viewlist .panel-default > .panel-body {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: 0.85rem 1.25rem;
    align-items: start;
  }

  .shops .viewlist .image {
    grid-row: 1 / span 6;
    block-size: auto !important;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-100);
    overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
  }

  .shops .viewlist .image img.img-thumbnail {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 100% !important;
    aspect-ratio: auto;
    object-fit: contain;
    border: none;
    padding: 0;
  }

  .shops .viewlist h3 {
    margin: 0;
    font-size: 1.03125rem;
    font-weight: 700;
  }

  .shops .viewlist h3 a {
    color: var(--color-brand-900);
  }

  .shops .viewlist .price {
    justify-content: flex-start;
  }

  .shops .viewlist .list-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Product Detail (.shops-detail) */
  .shops.shops-detail #detail > .panel > .panel-body > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .shops.shops-detail #detail .MagicSlideshow,
  .shops.shops-detail #detail #imageGallery {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-200);
    background-color: var(--color-surface-subtle);
    overflow: clip;
  }

  .shops.shops-detail #detail h1 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-brand-900);
    text-wrap: balance;
  }

  .shops.shops-detail #detail .col-md-10 > div {
    margin-block-end: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-slate-700);
  }

  .shops.shops-detail #detail .col-md-10 > div:has(> .money) {
    padding: 0.65rem 0.9rem;
    background: linear-gradient(135deg, var(--color-red-50), #fff7ed);
    border: 1px solid #fed7aa;
    border-radius: var(--radius-md);
    margin-block: 0.65rem 0.85rem;
  }

  .shops.shops-detail #detail .col-md-10 > div > .money {
    font-size: 1.25rem;
  }

  .shops.shops-detail ul.product_info {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0.75rem 0.9rem;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.84375rem;
  }

  .shops.shops-detail #detail .well {
    margin-block-start: 0.9rem;
    background: linear-gradient(180deg, var(--color-brand-50), var(--color-surface));
    border-color: var(--color-brand-100);
  }

  .shops.shops-detail #detail .well center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .shops.shops-detail #detail #pnum {
    inline-size: 4.5rem !important;
    min-block-size: 2.125rem;
    padding: 0.35rem 0.5rem;
    text-align: center;
    font-weight: 600;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
  }

  .shops.shops-detail #detail .btn-order {
    margin-block-start: 0 !important;
    min-block-size: 2.35rem;
    padding-inline: 1.1rem;
  }

  .shops.shops-detail #tms_bodytext {
    margin-block-start: 1.5rem;
  }

  .shops.shops-detail .tms_home_titlle {
    border-block-end: 2px solid var(--color-brand-600);
    margin-block: 1.25rem 0.85rem;
  }

  .shops.shops-detail .tms_home_titlle h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.45rem 1rem;
    background-color: var(--color-brand-700);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .shops.shops-detail #tms_bodytext > .panel-body a {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    margin: 0 0.25rem 0.25rem 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }

  .shops.shops-detail #tms_bodytext > .panel-body a:hover {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .shops.shops-detail .owl-carousel .owl-nav button {
    position: absolute;
    inset-block-start: 40%;
    inline-size: 2.15rem;
    block-size: 2.15rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--color-slate-200) !important;
    color: var(--color-brand-800) !important;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .shops.shops-detail .owl-carousel .owl-nav button.owl-prev {
    inset-inline-start: 0.35rem;
  }

  .shops.shops-detail .owl-carousel .owl-nav button.owl-next {
    inset-inline-end: 0.35rem;
  }

  /* Product reviews & star widgets */
  .shops .form-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 1.25rem;
  }

  .shops .rate-ex2-cnt {
    display: inline-flex;
    gap: 0.3rem;
  }

  .shops .rate-btn {
    cursor: pointer;
    font-style: normal;
  }

  .shops .rate-btn::before {
    font-family: "FontAwesome";
    content: "\f006";
    font-size: 1.15rem;
    color: var(--color-slate-400);
  }

  .shops .rate-btn-hover::before,
  .shops .star-icon::before {
    font-family: "FontAwesome";
    content: "\f005";
    color: #f59e0b;
  }

  .shops .star-icon {
    display: inline-block;
    margin-inline-end: 0.15rem;
  }

  .shops .review_row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 0.65rem;
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .shops .review_row:last-child {
    border-block-end: none;
  }

  /* Cart / Order Step Bar & Forms */
  .shops .step_bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
  }

  .shops .step_bar .step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-slate-500);
  }

  .shops .step_bar .step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    border-radius: 50%;
    background-color: var(--color-slate-200);
    color: var(--color-slate-700);
    font-weight: 700;
    font-size: 0.8125rem;
  }

  .shops .step_bar .step_current {
    color: var(--color-brand-800);
  }

  .shops .step_bar .step_current span {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .shops .info_icon::before {
    font-family: "FontAwesome";
    content: "\f05a";
    color: var(--color-brand-700);
    cursor: help;
  }

  .shops.shops-search .form-group,
  .shops.shops-order .form-group {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.45rem 1rem;
    align-items: center;
    margin-block-end: 0.85rem;
  }

  .shops.shops-search-all .well .row,
  .shops.shops-block-search .well .row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
  }

  .shops .panel-filter-product .sub-groups label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0.5rem 0.2rem 0;
    font-size: 0.84375rem;
    cursor: pointer;
  }

  .shops .panel-filter-product .label_group {
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-slate-200);
    background-color: var(--color-surface);
  }

  .shops .panel-filter-product .label_group.active {
    border-color: var(--color-brand-700);
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
    font-weight: 600;
  }

  /* Shops Blocks & #idmodals */
  .shops.shops-block .product_center_wrap {
    position: relative;
  }

  .shops.shops-block .controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    inset-block-start: 38%;
    inset-inline: 0.25rem;
    pointer-events: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .shops.shops-block .controls span {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-slate-200);
    color: var(--color-brand-700);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
  }

  .shops.shops-block .items,
  .shops.shops-block [class*="slider_"] > div {
    text-align: center;
    padding: 0.45rem;
  }

  .shops.shops-block .items img.thumbnail,
  .shops.shops-block [class*="slider_"] img.thumbnail {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
    margin-block-end: 0.45rem;
  }

  .shops.shops-block.others_product ul {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .shops.shops-block.others_product li {
    padding-block-end: 0.65rem;
    border-block-end: 1px dashed var(--color-slate-200);
    font-size: 0.84375rem;
  }

  .shops.shops-block.others_product li:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .shops.shops-block.others_product img.img-thumbnail {
    inline-size: 4.75rem;
    block-size: 4.75rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    float: left;
    margin: 0 0.65rem 0.25rem 0;
  }

  .shops.shops-block-cart p {
    margin: 0 0 0.45rem;
    font-size: 0.84375rem;
  }

  .shops.shops-block-cart #submit_send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    background-color: var(--color-brand-700);
    color: #ffffff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.8125rem;
  }

  .shops.shops-block-cart #submit_send:hover {
    background-color: var(--color-brand-800);
  }

  .shops #idmodals .modal-dialog {
    max-inline-size: min(36rem, calc(100vw - 2rem));
  }

  .shops #idmodals .modal-header {
    background: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-700));
    color: #ffffff;
    padding: 0.85rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .shops #idmodals .modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
  }

  .shops #idmodals .modal-header .close {
    order: 2;
    background: rgba(255, 255, 255, 0.16);
    border: none;
    color: #ffffff;
    inline-size: 1.85rem;
    block-size: 1.85rem;
    border-radius: 50%;
    font-size: 1.15rem;
    cursor: pointer;
  }

  .shops #idmodals .modal-body {
    padding: 1.15rem;
  }

  /* --------------------------------------------------------------------------
     VIDEOS Module
     -------------------------------------------------------------------------- */
  .videos .alert-info {
    background: linear-gradient(180deg, var(--color-brand-50), var(--color-surface));
    border: 1px solid var(--color-brand-100);
    border-inline-start: 4px solid var(--color-brand-600);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    margin-block-end: 1.15rem;
    display: flow-root;
  }

  .videos .alert-info :is(h1, h3) {
    margin: 0 0 0.4rem;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-brand-900);
  }

  .videos .alert-info .imghome {
    max-inline-size: 8rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin: 0 1rem 0.5rem 0;
  }

  .videos .panel-default > .panel-heading {
    padding: 0.65rem 1rem;
    background: linear-gradient(180deg, var(--color-brand-50), var(--color-surface));
    border-block-end: 2px solid var(--color-brand-600);
  }

  .videos ul.sub-list-icon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .videos ul.sub-list-icon h4 {
    margin: 0;
    font-size: 0.96875rem;
    font-weight: 700;
  }

  .videos ul.sub-list-icon li:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-brand-900);
  }

  .videos ul.sub-list-icon li:first-child a::before {
    content: "";
    inline-size: 0.28rem;
    block-size: 0.95rem;
    background-color: var(--color-accent-500);
    border-radius: var(--radius-pill);
  }

  .videos ul.sub-list-icon li:not(:first-child):not(.pull-right) a {
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border: 1px solid var(--color-brand-100);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }

  .videos ul.sub-list-icon li:not(:first-child):not(.pull-right) a:hover {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .videos ul.sub-list-icon li.pull-right {
    margin-inline-start: auto;
  }

  /* Video Grid Cards (viewcat_grid, viewgrid_by_cat, detail related, uploader) */
  .videos .videos-grid,
  .videos .related_new,
  .videos .related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
    gap: 1rem;
    align-items: stretch;
  }

  .videos .videos_list {
    display: flex;
  }

  .videos .videos_list .thumbnail,
  .videos .panel-body .videos_list:not(:has(> .thumbnail)) {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: clip;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .videos .videos_list .thumbnail:hover,
  .videos .panel-body .videos_list:not(:has(> .thumbnail)):hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-500);
    box-shadow: var(--shadow-md);
  }

  .videos .videos_list .videos-home-thumbnail > a,
  .videos .videos_list .thumbnail > a:first-child,
  .videos .videos_list > a:first-child {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--color-slate-900);
    overflow: clip;
  }

  .videos .videos_list img.video_img,
  .videos .videos_list img.imghome {
    inline-size: 100% !important;
    block-size: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.25s ease;
  }

  .videos .videos_list:hover img.video_img,
  .videos .videos_list:hover img.imghome {
    transform: scale(1.04);
    opacity: 0.92;
  }

  .videos .videos_list :is(h3, h4) {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }

  .videos .videos_list .thumbnail > h4 {
    padding: 0.65rem 0.75rem 0.35rem;
  }

  .videos .videos_list .videos-home-info {
    padding: 0.65rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
  }

  .videos .videos_list:not(:has(> .thumbnail)):not(:has(> .videos-home-info)) > h3 {
    padding: 0.65rem 0.75rem 0.35rem;
  }

  .videos .videos_list:not(:has(> .thumbnail)):not(:has(> .videos-home-info)) > .text-muted {
    padding: 0 0.75rem 0.75rem;
  }

  .videos .videos_list :is(h3, h4) a {
    color: var(--color-slate-800);
  }

  .videos .videos_list :is(h3, h4) a:hover {
    color: var(--color-brand-700);
  }

  .videos .videos_list .thumbnail > .text-muted {
    padding: 0 0.75rem 0.7rem;
    margin-block-start: auto;
  }

  .videos .videos_list .thumbnail > p.clear {
    padding: 0 0.75rem 0.65rem;
    margin: 0;
    font-size: 0.75rem;
  }

  .videos .videos_list .text-muted ul,
  .videos .videos-text .text-muted ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--color-slate-500);
  }

  .videos .videos_list .text-muted ul li:first-child {
    flex-basis: 100%;
  }

  .videos .videos_list .text-muted ul a {
    color: var(--color-brand-700);
    font-weight: 600;
  }

  .videos .spacer {
    display: inline-block;
    inline-size: 0.25rem;
    block-size: 0.25rem;
    border-radius: 50%;
    background-color: var(--color-slate-400);
  }

  /* Video Horizontal List View (viewcat_page, playlist_loop, tag) */
  .videos .panel-body:has(> .videos-thumbnail) {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: 0.85rem 1.25rem;
    align-items: start;
  }

  .videos .videos-thumbnail a {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background-color: var(--color-slate-900);
    overflow: clip;
  }

  .videos .videos-thumbnail img.img-thumbnail {
    inline-size: 100% !important;
    block-size: 100% !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: none;
    padding: 0;
  }

  .videos .videos-text h3,
  .videos .videos-thumbnail h3 {
    margin: 0 0 0.45rem;
    font-size: 1.03125rem;
    font-weight: 700;
    line-height: 1.38;
  }

  .videos .videos-text h3 a,
  .videos .videos-thumbnail h3 a {
    color: var(--color-brand-900);
  }

  .videos .videos-text h3 a:hover,
  .videos .videos-thumbnail h3 a:hover {
    color: var(--color-brand-700);
  }

  /* Video Detail & Player */
  .videos.videos-detail .detail_header h3.title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.125rem, 1.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-brand-900);
    text-wrap: balance;
  }

  .videos .videoplayer {
    border-radius: var(--radius-md);
    background-color: var(--color-slate-900);
    box-shadow: var(--shadow-md);
    overflow: clip;
    margin-block-end: 1rem;
  }

  .videos .uploader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    margin-block-end: 0.85rem;
  }

  .videos .uploader > div:first-child img {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    padding: 0;
    border: 2px solid var(--color-brand-100);
  }

  .videos .uploader p {
    margin: 0;
    font-size: 0.84375rem;
  }

  .videos .uploader .hitstotal {
    margin-inline-start: auto;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    color: var(--color-brand-800);
    font-size: 0.8125rem;
    font-weight: 700;
  }

  .videos .media-func {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1rem;
  }

  .videos .media-func .button-style-1 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.9rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-700);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }

  .videos .media-func .button-style-1:hover {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
  }

  .videos .add-playlist-region {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    margin-block-end: 1rem;
  }

  .videos .add-playlist-region ul.playlist-region {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
  }

  .videos .add-playlist-region ul.playlist-region li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
  }

  .videos .video-tags {
    margin: 0 0.25rem 0.25rem 0;
    border-radius: var(--radius-pill);
    font-size: 0.78125rem;
  }

  .videos.videos-detail .other-news > p.h3 {
    margin: 0.5rem 0 0.85rem;
    padding-block-end: 0.45rem;
    border-block-end: 2px solid var(--color-brand-600);
    font-size: 1rem;
    color: var(--color-brand-900);
  }

  /* Video Search, Playlist & Blocks */
  .videos.videos-search .form-group {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.45rem 1rem;
    align-items: center;
    margin-block-end: 0.85rem;
  }

  .videos.videos-playlist .PlaylistCont .list-group {
    list-style: none;
    margin: 0;
    padding: 0.65rem;
    background-color: var(--color-surface);
    display: grid;
    gap: 0.35rem;
  }

  .videos.videos-playlist .PlaylistCont .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
    font-size: 0.84375rem;
  }

  .videos.videos-playlist .PlaylistCont .list-group-item.active {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
    color: var(--color-brand-900);
    font-weight: 700;
  }

  .videos.videos-block .tms_video .item {
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    overflow: clip;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .videos.videos-block .tms_video .item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .videos.videos-block .tms_video img.img-thumbnail {
    inline-size: 100%;
    block-size: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: none;
    padding: 0;
  }

  .videos.videos-block .tms_video .tms_title_video h3 {
    margin: 0;
    padding: 0.55rem 0.65rem;
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-slate-800);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }

  .videos.videos-block ul.list-group,
  .videos.videos-block-list ul,
  .videos.videos-quickplay ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }

  .videos.videos-block :is(li.list-group-item, li.clearfix) {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-block-end: 0.55rem;
    border-block-end: 1px dashed var(--color-slate-200);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .videos.videos-block :is(li.list-group-item, li.clearfix):last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .videos.videos-block :is(li.list-group-item, li.clearfix) img.img-thumbnail {
    inline-size: 4.5rem !important;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    padding: 0;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }

  .videos.videos-block.videos-comment article {
    padding-block: 0.5rem;
    border-block-end: 1px dashed var(--color-slate-200);
    font-size: 0.8125rem;
  }

  .videos.videos-block.videos-comment article img.img-thumbnail {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    padding: 0;
    margin: 0 0.55rem 0.25rem 0;
  }

  /* --------------------------------------------------------------------------
     WORK-SCHEDULES (Lịch công tác)
     -------------------------------------------------------------------------- */
  .work-schedules {
    color: var(--color-slate-800);
  }

  .schedule-list-tool {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    margin-block-end: 1.15rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
  }

  .schedule-list-tool > .pull-left,
  .schedule-list-tool > .pull-right {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .schedule-list-tool .btn-group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }

  .schedule-list-tool .btn-group > .btn {
    border-radius: 0;
  }

  .schedule-list-tool .btn-group > .btn:first-child {
    border-start-start-radius: var(--radius-sm);
    border-end-start-radius: var(--radius-sm);
  }

  .schedule-list-tool .btn-group > .btn:last-child,
  .schedule-list-tool .btn-group > .btn-group:last-child > .btn {
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
  }

  .schedule-list-tool .btn-group > .btn:not(:first-child),
  .schedule-list-tool .btn-group > .btn-group {
    margin-inline-start: -1px;
  }

  .schedule-list-tool .btn,
  .work-schedules .btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-block-size: 2.15rem;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.84375rem;
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }

  .schedule-list-tool .btn-sm,
  .work-schedules .btn-sm {
    min-block-size: 2rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
  }

  .schedule-list-tool .btn-warning,
  .work-schedules .btn-warning {
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
  }

  .schedule-list-tool .btn-warning:hover,
  .schedule-list-tool .btn-group.open > .dropdown-toggle.btn-warning,
  .work-schedules .btn-warning:hover {
    background-color: var(--color-brand-800);
    border-color: var(--color-brand-800);
    color: #ffffff;
  }

  .schedule-list-tool .btn-info,
  .work-schedules .btn-info {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-slate-200);
    color: var(--color-slate-700);
  }

  .schedule-list-tool .btn-info:hover,
  .work-schedules .btn-info:hover {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
    color: var(--color-brand-800);
  }

  .work-schedules .btn-danger {
    background-color: var(--color-red-600);
    border-color: var(--color-red-600);
    color: #ffffff;
  }

  .work-schedules .btn-danger:hover {
    background-color: #b91c1c;
    color: #ffffff;
  }

  .schedule-list-tool .caret {
    display: inline-block;
    inline-size: 0;
    block-size: 0;
    margin-inline-start: 0.15rem;
    border-inline: 4px solid transparent;
    border-block-start: 5px solid currentColor;
  }

  .schedule-list-tool .dropdown-menu {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + 0.3rem);
    inset-inline-start: 0;
    z-index: 30;
    min-inline-size: max(100%, 19rem);
    max-block-size: 20rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .schedule-list-tool .btn-group.open > .dropdown-menu {
    display: block;
  }

  .schedule-list-tool .dropdown-menu li a {
    display: block;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-slate-700);
    text-decoration: none;
    white-space: nowrap;
  }

  .schedule-list-tool .dropdown-menu li a:hover {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  .schedule-list-tool .dropdown-menu li.bg-warning a {
    background-color: var(--color-brand-700);
    color: #ffffff;
    font-weight: 700;
  }

  .work-schedules .alert {
    padding: 0.9rem 1.15rem;
    border-radius: var(--radius-md);
    margin-block-end: 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .work-schedules .alert-warning {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-inline-start: 4px solid var(--color-accent-500);
    color: #92400e;
  }

  .work-schedules .alert-info {
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    border-inline-start: 4px solid var(--color-brand-600);
    color: var(--color-brand-900);
  }

  .work-schedules .alert-danger {
    background-color: var(--color-red-50);
    border: 1px solid #fecaca;
    border-inline-start: 4px solid var(--color-red-600);
    color: #991b1b;
  }

  .work-schedules .message-box-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.9375rem;
    margin-block-end: 0.35rem;
  }

  .work-schedules .schedule-list,
  .work-schedules .table {
    inline-size: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    font-size: 0.84375rem;
    margin-block-end: 1.25rem;
  }

  .work-schedules :is(.schedule-list, .table) thead th {
    background-color: var(--color-brand-700);
    color: #ffffff;
    font-weight: 700;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-brand-800);
    vertical-align: middle;
  }

  .work-schedules :is(.schedule-list, .table) :is(td, tbody th, tfoot td) {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-slate-200);
    vertical-align: middle;
  }

  .work-schedules .schedule-list .week-head {
    background-color: var(--color-brand-50);
    color: var(--color-brand-900);
    font-weight: 700;
    text-align: start;
  }

  .work-schedules .schedule-list-mobile {
    display: none;
  }

  .work-schedules .schedule-list-mobile .week-head {
    margin: 0 0 0.75rem;
    padding-block-end: 0.45rem;
    border-block-end: 2px solid var(--color-brand-600);
    font-size: 1.05rem;
    color: var(--color-brand-900);
  }

  .work-schedules .schedule-list-mobile .dayweek-head {
    margin: 0.85rem 0 0.45rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-brand-800);
  }

  .work-schedules .schedule-list-mobile .panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    margin-block-end: 0.65rem;
    overflow: clip;
  }

  .work-schedules .schedule-list-mobile .panel-body {
    padding: 0.75rem 0.9rem;
    font-size: 0.84375rem;
  }

  .work-schedules .table-responsive {
    overflow-x: auto;
    border-radius: var(--radius-md);
    margin-block-end: 1rem;
  }

  .work-schedules .form-control {
    inline-size: 100%;
    padding: 0.475rem 0.7rem;
    font-size: 0.875rem;
    color: var(--color-slate-800);
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
  }

  .work-schedules .form-control:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  /* --------------------------------------------------------------------------
     SEEK (Tìm kiếm toàn site)
     -------------------------------------------------------------------------- */
  .seek {
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-block-end: 1.5rem;
    color: var(--color-slate-800);
    overflow: clip;
  }

  .seek > .panel-body {
    padding: 1.25rem;
  }

  .seek .seek-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding-block-end: 0.55rem;
    border-block-end: 2px solid var(--color-brand-600);
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-brand-900);
  }

  .seek .seek-title::before {
    content: "";
    inline-size: 0.3rem;
    block-size: 1rem;
    background-color: var(--color-accent-500);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }

  .seek .seek-title em {
    color: var(--color-brand-700);
  }

  .seek .seek-form-card {
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-block-end: 1.25rem;
  }

  .seek .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .seek .seek-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(11.5rem, 0.85fr) auto;
    gap: 0.65rem;
    align-items: stretch;
  }

  .seek .seek-controls .form-group {
    margin: 0;
  }

  .seek .form-control {
    inline-size: 100%;
    min-block-size: 2.375rem;
    padding: 0.475rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-slate-800);
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .seek .form-control:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .seek .seek-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .seek .btn-primary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-block-size: 2.375rem;
    padding: 0.45rem 1.15rem;
    background-color: var(--color-brand-700);
    border: 1px solid var(--color-brand-700);
    color: #ffffff;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease;
  }

  .seek .btn-primary:hover:not(:disabled) {
    background-color: var(--color-brand-800);
    color: #ffffff;
  }

  .seek a.advSearch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.375rem;
    padding: 0.42rem 0.85rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-700);
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }

  .seek a.advSearch:hover {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
    color: var(--color-brand-800);
  }

  .seek .seek-logic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 0.85rem;
    margin: 0.75rem 0 0;
  }

  .seek .seek-logic label.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    font-size: 0.8125rem;
    color: var(--color-slate-700);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  }

  .seek .seek-logic label.radio-inline input {
    accent-color: var(--color-brand-700);
    margin: 0;
  }

  .seek .seek-logic label.radio-inline:has(:checked) {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
    color: var(--color-brand-900);
    font-weight: 600;
  }

  .seek .search_adv {
    margin-block: 0.75rem 1rem;
    text-align: center;
  }

  .seek .IntSearch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-800);
  }

  .seek .seek-results:empty {
    display: none;
  }

  .seek .seek-group:not(:last-child) {
    margin-block-end: 1.5rem;
  }

  .seek .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.85rem;
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0 0 0.55rem;
    border-block-end: 2px solid var(--color-brand-600);
  }

  .seek .nav-tabs li.active a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.96875rem;
    font-weight: 700;
    color: var(--color-brand-900);
  }

  .seek .nav-tabs .label-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.16rem 0.55rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-700);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .seek .nav-tabs li.pull-right {
    float: none !important;
    margin-inline-start: auto;
  }

  .seek .nav-tabs li.pull-right a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-100);
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--color-brand-700);
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .seek .nav-tabs li.pull-right a:hover {
    background-color: var(--color-brand-700);
    color: #ffffff;
  }

  .seek .seek-list {
    display: grid;
    gap: 0.75rem;
  }

  .seek .seek-item {
    padding: 0.85rem 1rem;
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-inline-start: 3px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  }

  .seek .seek-item:hover {
    background-color: var(--color-surface);
    border-color: var(--color-brand-500);
    border-inline-start-color: var(--color-brand-600);
    box-shadow: var(--shadow-xs);
  }

  .seek .seek-item h3 {
    margin: 0 0 0.35rem;
    font-size: 0.96875rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .seek .seek-item h3 a {
    color: var(--color-brand-900);
  }

  .seek .seek-item h3 a:hover {
    color: var(--color-brand-700);
  }

  .seek .seek-item-excerpt {
    font-size: 0.84375rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    margin: 0;
  }

  .seek .seek-item-excerpt :is(strong, .highlight) {
    color: var(--color-brand-800);
    background-color: var(--color-brand-50);
    padding-inline: 0.15rem;
    border-radius: 3px;
  }

  .seek .seek-pagination {
    margin-block-start: 1rem;
  }

  /* Multimedia Carousels: Video hoạt động & Hình ảnh hoạt động */
  .bcb_video {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
  }

  .bcb_video .item {
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    overflow: clip;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .bcb_video .item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }

  .bcb_video .video-thumb-link {
    position: relative;
    display: block;
    overflow: clip;
  }

  .bcb_video .video-thumb-link::after {
    content: "\f04b";
    font-family: FontAwesome;
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    padding-inline-start: 0.15rem;
    font-size: 1rem;
    color: #ffffff;
    background: rgba(234, 88, 12, 0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .bcb_video .video-thumb-link:hover::after {
    transform: scale(1.12);
    background: var(--color-brand-600);
  }

  .bcb_video .item img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .bcb_title_video {
    background-color: var(--color-surface);
    padding: 0.625rem 0.75rem;
    min-block-size: 3.75rem;
  }

  .bcb_title_video h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-slate-800);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: clip;
  }

  .bcb_title_video a:hover h3 {
    color: var(--color-brand-700);
  }

  /* Photo Gallery Grid */
  .bcb_album {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .bcb_album .item a {
    position: relative;
    display: block;
    overflow: clip;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-200);
  }

  .bcb_album .item a::after {
    content: "\f00e";
    font-family: FontAwesome;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 1.25rem;
    background: rgba(6, 78, 44, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .bcb_album .item a:hover::after {
    opacity: 1;
  }

  .bcb_album .item img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .bcb_album .item a:hover img {
    transform: scale(1.08);
  }

  /* Right Sidebar Blocks (.bcb_primary) */
  .bcb_primary {
    inline-size: 100%;
    margin-block-end: 1.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: visible;
  }

  .bcb_primary_title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-600));
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  }

  .bcb_primary_title::before {
    content: "";
    inline-size: 0.35rem;
    block-size: 1rem;
    background-color: #fde047;
    border-radius: 99px;
  }

  .bcb_primary_body {
    padding: 0.75rem;
    background-color: var(--color-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* Vertical Category Menu (.ddsmoothmenu-v) - Click Drop-down Menu */
  .ddsmoothmenu-v ul {
    font-weight: 600;
    font-size: 0.84375rem;
    inline-size: 100%;
  }

  .ddsmoothmenu-v ul li {
    position: relative;
  }

  .ddsmoothmenu-v > ul > li:not(:last-child) {
    border-block-end: 1px solid var(--color-slate-100);
  }

  .ddsmoothmenu-v > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.575rem 0.75rem;
    color: var(--color-slate-700);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, padding-inline-start 0.15s ease;
  }

  .ddsmoothmenu-v > ul > li > a i {
    color: var(--color-slate-400);
    font-size: 0.8125rem;
    transition: transform 0.25s ease, color 0.15s ease;
  }

  .ddsmoothmenu-v > ul > li > a:hover,
  .ddsmoothmenu-v > ul > li.open > a {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
  }

  .ddsmoothmenu-v > ul > li.open > a {
    font-weight: 700;
  }

  .ddsmoothmenu-v > ul > li > a:hover i,
  .ddsmoothmenu-v > ul > li.open > a i {
    color: var(--color-brand-700);
  }

  .ddsmoothmenu-v > ul > li.open > a i {
    transform: rotate(180deg);
  }

  .ddsmoothmenu-v ul li ul {
    position: static;
    inline-size: 100%;
    max-block-size: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background-color: var(--color-surface-subtle);
    border-inline-start: 3px solid var(--color-brand-600);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding-inline: 0.375rem;
    padding-block: 0;
    margin-block: 0;
    font-weight: 500;
    transition:
      max-block-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.22s ease,
      padding-block 0.22s ease,
      margin-block 0.22s ease,
      visibility 0.25s;
  }

  .ddsmoothmenu-v ul li.open > ul {
    max-block-size: 36rem;
    opacity: 1;
    visibility: visible;
    padding-block: 0.35rem;
    margin-block: 0.2rem 0.35rem;
  }

  .ddsmoothmenu-v ul li ul li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .ddsmoothmenu-v ul li ul li a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-slate-700);
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    transition: background-color 0.15s ease, color 0.15s ease, padding-inline-start 0.15s ease;
  }

  .ddsmoothmenu-v ul li ul li a::before {
    content: "\f105";
    font-family: "FontAwesome";
    font-size: 0.75rem;
    color: var(--color-brand-600);
  }

  .ddsmoothmenu-v ul li ul li a:hover {
    background-color: #ffffff;
    color: var(--color-brand-800);
    padding-inline-start: 0.9rem;
  }

  /* Vertical Scrolling Ticker (Tin tiêu điểm & Văn bản ban hành) */
  .vertical-ticker {
    block-size: 14.5rem; /* 232px */
    overflow: clip;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  }

  .vertical-ticker-track {
    animation: ticker-up 28s linear infinite;
  }

  .vertical-ticker:hover .vertical-ticker-track {
    animation-play-state: paused;
  }

  @keyframes ticker-up {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
  }

  /* Văn bản ban hành (.block-law) */
  .block-law .item {
    padding: 0.55rem 0.35rem;
  }

  .block-law .item:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .block-law .law-code {
    font-size: 0.8125rem;
    margin-block-end: 0.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .block-law .law-code a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-blue-700);
    background-color: var(--color-blue-50);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
  }

  .block-law .law-code a:hover {
    background-color: #e0f2fe;
    color: #0c4a6e;
  }

  .block-law .law-title {
    font-size: 0.8125rem;
    color: var(--color-slate-700);
    line-height: 1.45;
  }

  /* Audio Player: Hát về nông thôn mới */
  .ntm-audio-player {
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    overflow: clip;
  }

  .jp-interface {
    padding: 0.75rem;
    background: linear-gradient(135deg, #064e2c, #0b7a44);
    color: #ffffff;
  }

  .jp-now-playing {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fde047;
    margin-block-end: 0.5rem;
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
  }

  .jp-controls-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-end: 0.5rem;
  }

  .jp-btn {
    inline-size: 1.875rem;
    block-size: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 0.75rem;
  }

  .jp-btn:hover:not(:disabled) {
    background-color: var(--color-accent-500);
    border-color: var(--color-accent-500);
  }

  .jp-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .jp-seek-bar {
    flex: 1;
    block-size: 0.375rem;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    overflow: clip;
    cursor: pointer;
  }

  .jp-play-bar {
    block-size: 100%;
    inline-size: 0%;
    background-color: #fde047;
    transition: inline-size 0.15s linear;
  }

  .jp-time {
    margin-inline-start: auto;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
  }

  .jp-playlist ul li:not(:last-child) {
    border-block-end: 1px solid var(--color-slate-200);
  }

  .jp-playlist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    text-align: start;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: none;
    font-size: 0.8125rem;
    color: var(--color-slate-700);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .jp-playlist-item i {
    color: var(--color-slate-400);
  }

  .jp-playlist-item:hover,
  .jp-playlist-item.active {
    background-color: var(--color-brand-50);
    color: var(--color-brand-800);
    font-weight: 600;
  }

  .jp-playlist-item.active i {
    color: var(--color-brand-600);
  }

  /* ĐỌC NHIỀU NHẤT (.block_tophits) */
  .block_tophits {
    counter-reset: tophit;
  }

  .block_tophits li {
    counter-increment: tophit;
    position: relative;
    display: grid;
    grid-template-columns: 5.25rem 1fr;
    gap: 0.625rem;
    align-items: start;
    padding-block: 0.5rem;
  }

  .block_tophits li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .block_tophits li > a:first-child {
    position: relative;
    display: block;
    border-radius: var(--radius-sm);
    overflow: clip;
  }

  .block_tophits li > a:first-child::after {
    content: counter(tophit);
    position: absolute;
    inset-block-start: 0.2rem;
    inset-inline-start: 0.2rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: 4px;
    background-color: var(--color-brand-700);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  .block_tophits li:nth-child(-n+3) > a:first-child::after {
    background-color: var(--color-accent-600);
  }

  .block_tophits li img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .block_tophits li a.show {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-slate-700);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: clip;
  }

  .block_tophits li a.show:hover {
    color: var(--color-brand-700);
  }

  /* Thăm dò ý kiến (Poll) */
  .poll-form h4 {
    font-size: 0.875rem;
    color: var(--color-slate-800);
    margin-block-end: 0.625rem;
    line-height: 1.45;
  }

  .poll-form fieldset {
    border: none;
  }

  .poll-form :is(.radio, .checkbox) {
    margin-block-end: 0.45rem;
  }

  .poll-form :is(.radio, .checkbox) label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-subtle);
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .poll-form :is(.radio, .checkbox) label:hover {
    border-color: var(--color-brand-500);
  }

  .poll-form :is(.radio, .checkbox) input:is([type="radio"], [type="checkbox"]) {
    accent-color: var(--color-brand-700);
    margin-block-start: 0.15rem;
    flex-shrink: 0;
  }

  .poll-form :is(.radio, .checkbox) label:has(:checked) {
    background-color: var(--color-brand-50);
    border-color: var(--color-brand-600);
    font-weight: 600;
    color: var(--color-brand-900);
  }

  .poll-actions {
    display: flex;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
  }

  .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.125rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    color: #ffffff;
  }

  .btn-success {
    background-color: var(--color-brand-700);
  }

  .btn-success:hover:not(:disabled) {
    background-color: var(--color-brand-900);
  }

  .btn-primary {
    background-color: var(--color-slate-100);
    color: var(--color-slate-700);
    border-color: var(--color-slate-200);
  }

  .btn-primary:hover:not(:disabled) {
    background-color: var(--color-slate-200);
    color: var(--color-slate-900);
  }

  /* Voting Captcha & Result Modal Content */
  .voting-captcha-box {
    min-inline-size: min(100%, 18rem);
  }

  .voting-captcha-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.875rem;
  }

  .voting-captcha-row .rsec {
    flex: 1 1 8rem;
    min-inline-size: 0;
    padding: 0.475rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-slate-800);
  }

  .voting-captcha-row .rsec:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(15, 148, 82, 0.14);
  }

  .voting-captcha-media {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .voting-captcha-media .captchaImg {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slate-200);
  }

  .voting-captcha-media .fa-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-slate-100);
    color: var(--color-brand-700);
    cursor: pointer;
  }

  .voting-captcha-media .fa-refresh:hover {
    background-color: var(--color-brand-50);
  }

  .voting-captcha-box .btn-block {
    inline-size: 100%;
    background-color: var(--color-brand-700);
    border-color: var(--color-brand-700);
    color: #ffffff;
  }

  .voting-captcha-box .btn-block:hover:not(:disabled) {
    background-color: var(--color-brand-800);
    color: #ffffff;
  }

  #sitemodal .margin h3 {
    font-size: 1rem;
    color: var(--color-brand-900);
    margin-block-end: 0.875rem;
    text-wrap: balance;
  }

  #sitemodal .margin .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-block: 0.45rem;
    border-block-end: 1px dashed var(--color-slate-200);
    font-size: 0.84375rem;
    color: var(--color-slate-700);
  }

  #sitemodal .margin .progress {
    block-size: 1.25rem;
    background-color: var(--color-slate-100);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  #sitemodal .margin .progress-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    block-size: 100%;
    min-inline-size: 2.25rem;
    padding-inline: 0.45rem;
    background: linear-gradient(90deg, var(--color-brand-600), var(--color-brand-500));
    font-size: 0.75rem;
    font-weight: 700;
  }

  #sitemodal .margin .progress-bar .text-danger {
    color: #ffffff;
  }

  #sitemodal .margin > p.text-center {
    margin-block-start: 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-slate-500);
  }

  /* Thống kê (.counter) */
  .counter {
    inline-size: 100%;
  }

  .counter li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-slate-700);
  }

  .counter li:not(:last-child) {
    border-block-end: 1px dashed var(--color-slate-200);
  }

  .counter li span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .counter li span:first-child i {
    inline-size: 1.25rem;
    text-align: center;
    color: var(--color-brand-600);
  }

  .counter li span:last-child {
    font-weight: 700;
    color: var(--color-slate-900);
    background-color: var(--color-slate-100);
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
  }

  .counter li:last-child span:last-child {
    background-color: var(--color-brand-100);
    color: var(--color-brand-900);
  }

  /* Modern Footer */
  #footer {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-block-start: 4px solid var(--color-brand-700);
    padding-top: 28px;
    margin-block-start: 2rem;
    font-size: 0.875rem;
  }

  .footer-content-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
    max-inline-size: 56rem;
    margin-inline: auto;
    padding-bottom: 28px;
  }

  .footer_img img {
    inline-size: 5.5rem;
    block-size: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
  }

  .footer-org-info {
    line-height: 1.75;
    color: var(--color-slate-700);
  }

  .footer-org-info strong:first-child {
    font-size: 1rem;
    color: var(--color-brand-900);
    letter-spacing: 0.01em;
  }

  .footer_bottom {
    background-color: var(--color-brand-900);
    padding-block: 0.75rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
  }

  /* Floating Scroll to Top Button */
  .scrollup {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 900;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brand-700);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease;
  }

  .scrollup.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .scrollup:hover:not(:disabled) {
    background-color: var(--color-accent-600);
    transform: translateY(-2px);
  }

  /* Hover Article Preview Tooltip */
  .ntm-tooltip {
    position: fixed;
    z-index: 2000;
    max-inline-size: 19rem;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(8px);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.78125rem;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
  }

  .ntm-tooltip.visible {
    opacity: 1;
    visibility: visible;
  }

  .ntm-tooltip img {
    float: inline-start;
    inline-size: 5.75rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-inline-end: 0.625rem;
    margin-block-end: 0.25rem;
    border-radius: 4px;
  }

  /* Native Lightbox Dialog */
  dialog.lightbox-dialog {
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    max-inline-size: min(92vw, 56rem);
    background-color: var(--color-slate-900);
    color: #ffffff;
    box-shadow: var(--shadow-lg);
  }

  dialog.lightbox-dialog::backdrop {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
  }

  .lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.125rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  }

  .lightbox-header h4 {
    color: #ffffff;
    font-size: 0.9375rem;
  }

  .lightbox-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .lightbox-body {
    padding: 1rem;
    display: grid;
    place-items: center;
  }

  .lightbox-body img {
    max-block-size: 75dvh;
    inline-size: auto;
    border-radius: var(--radius-sm);
    object-fit: contain;
  }

  .chromeframe {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    width: 100% !important;
    z-index: 99999999999999 !important;
    background-color: #ffff00 !important;
    color: #000 !important;
    height: 25px;
    line-height: 25px;
    padding: 0.2em 0;
    text-align: center !important;
  }

  #timeoutsess {
      display: none;
  }

  #timeoutsess a {
      color: #2f70a7 !important;
  }
  /* Modals (.modal, #sitemodal, #sitemodalTerm) */
  .modal-open {
    overflow: hidden;
  }

  body.modal-open .marquee-track {
    animation-play-state: paused;
  }

  .modal-scrollbar-measure {
    position: absolute;
    inset-block-start: -9999px;
    inline-size: 50px;
    block-size: 50px;
    overflow: scroll;
  }

  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(15, 23, 42, 0.56);
  }

  .modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.14s linear;
  }

  .modal-backdrop.in {
    opacity: 1;
  }

  .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 1rem;
    outline: 0;
  }

  .modal.fade {
    opacity: 0;
    transition: opacity 0.14s linear;
  }

  .modal.fade.in {
    opacity: 1;
  }

  .modal-dialog {
    position: relative;
    inline-size: min(100%, 38rem);
    margin-inline: auto;
    margin-block: clamp(1rem, 6dvh, 3.5rem);
  }

  .modal.fade .modal-dialog {
    transform: translate3d(0, -0.5rem, 0);
    opacity: 0;
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.14s ease-out;
  }

  .modal.in .modal-dialog {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  .modal-content {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--color-slate-800);
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 2.5rem 0.875rem 1.25rem;
    background: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-600));
    color: #ffffff;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  }

  .modal-header .modal-title {
    font-size: 0.96875rem;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin: 0;
    text-wrap: balance;
  }

  .modal-body {
    padding: 1.25rem;
  }

  button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    appearance: none;
  }

  .close {
    float: right;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-slate-500);
    opacity: 0.75;
  }

  :is(#sitemodal, #sitemodalTerm) .modal-dialog {
    inline-size: auto;
    max-inline-size: min(94vw, 40rem);
    text-align: center;
  }

  :is(#sitemodal, #sitemodalTerm) .modal-content {
    display: inline-block;
    text-align: start;
    inline-size: auto;
    min-inline-size: min(100%, 19rem);
    max-inline-size: 100%;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  :is(#sitemodal, #sitemodalTerm) .modal-body {
    max-block-size: 78dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :is(#sitemodal, #sitemodalTerm) .modal-body img {
    max-inline-size: 100%;
    block-size: auto;
    margin-inline: auto;
    border-radius: var(--radius-sm);
  }

  :is(#sitemodal, #sitemodalTerm) .modal-body iframe {
    inline-size: 100%;
    max-inline-size: 100%;
    border: none;
    border-radius: var(--radius-sm);
  }

  :is(#sitemodal, #sitemodalTerm) .modal-body p:not(:last-child) {
    margin-block-end: 0.65rem;
  }

  :is(#sitemodal, #sitemodalTerm) .close {
    float: none;
    position: absolute;
    inset-block-start: -0.65rem;
    inset-inline-end: -0.65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    background-color: var(--color-slate-900);
    color: #ffffff;
    font-size: 0.875rem;
    opacity: 1;
    border: 2px solid #ffffff;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  :is(#sitemodal, #sitemodalTerm) .close:hover {
    background-color: var(--color-accent-600);
    transform: scale(1.06);
  }

  @media (prefers-reduced-motion: reduce) {
    .modal.fade,
    .modal.fade .modal-dialog,
    .modal-backdrop.fade {
      transition: none;
    }
  }

  @media (max-width: 619px) {
    .modal {
      padding: 1rem 0.625rem;
    }

    :is(#sitemodal, #sitemodalTerm) .modal-dialog {
      margin-inline: auto;
    }

    :is(#sitemodal, #sitemodalTerm) .modal-content {
      display: block;
      inline-size: 100%;
    }

    :is(#sitemodal, #sitemodalTerm) .close {
      inset-block-start: 0.5rem;
      inset-inline-end: 0.5rem;
    }
  }

#sb-container {
    z-index: 99999999 !important;
}
}

@layer utilities {
  :is(.hidden, .hide, .d-none) {
    display: none !important;
  }

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

  .m-bottom {
    margin-block-end: 0.625rem;
  }

  .text-uppercase {
    text-transform: uppercase;
  }

  .text-danger {
    color: var(--color-red-600);
  }

  .page h1{
    font-size: 20px;
  }

  @media (pointer: coarse) {
    .show-subs-breadcrumbs,
    .nv-fullbg .fa-refresh,
    .social-share-buttons button {
      min-inline-size: 2.25rem;
      min-block-size: 2.25rem;
    }

    :is(.shops, .videos, .work-schedules, .laws-search) .btn,
    .schedule-list-tool .btn,
    .videos .media-func .button-style-1,
    .shops .viewcat .viewtype .pointer {
      min-block-size: 2.375rem;
    }

    .shops .viewcat .viewtype .pointer {
      min-inline-size: 2.375rem;
    }
  }

  @media (max-width: 900px) {
    .contact,
    .contact > .row {
      grid-template-columns: 1fr;
    }

    .photos.form-horizontal .form-group,
    .laws-search #advance .form-group,
    .shops.shops-search .form-group,
    .shops.shops-order .form-group,
    .videos.videos-search .form-group {
      grid-template-columns: 1fr;
    }

    .shops.shops-detail #detail > .panel > .panel-body > .row,
    .shops .form-review,
    .shops.shops-search-all .well .row,
    .shops.shops-block-search .well .row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 1024px) {
    .wsmobileheader {
      display: flex;
    }

    body.wsactive {
      overflow: hidden;
    }

    body.wsactive .wsmenu-backdrop {
      display: block;
    }

    .wsmainfull {
      position: static;
      background: none;
      box-shadow: none;
    }

    .wsmainwp {
      display: flex;
      flex-direction: column;
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: min(86vw, 21rem);
      block-size: 100dvh;
      margin: 0;
      padding: 0;
      border-radius: 0;
      background-color: #ffffff;
      overflow-y: auto;
      overscroll-behavior: contain;
      z-index: 1200;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.32);
      transform: translateX(-104%);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.wsactive .wsmainwp {
      transform: translateX(0);
    }

    .wsdrawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.875rem 1rem;
      background: linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-700) 100%);
      color: #ffffff;
      position: sticky;
      inset-block-start: 0;
      z-index: 10;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(6, 78, 44, 0.18);
    }

    .wsdrawer-brand {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .wsdrawer-brand img {
      inline-size: 2.125rem;
      block-size: 2.125rem;
      object-fit: contain;
      flex-shrink: 0;
    }

    .wsdrawer-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 2.125rem;
      block-size: 2.125rem;
      border-radius: var(--radius-sm);
      background-color: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.24);
      color: #ffffff;
      font-size: 1rem;
      cursor: pointer;
      flex-shrink: 0;
    }

    .wsmenu-list {
      flex-direction: column;
      align-items: stretch;
      padding: 0.5rem 0.625rem 1.25rem;
      gap: 0;
    }

    .wsmenu-list > li:not(:last-child) {
      border-block-end: 1px solid var(--color-slate-100);
    }

    .wsmenu-list > li > a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      inline-size: 100%;
      box-sizing: border-box;
      padding: 0.775rem 0.75rem;
      color: var(--color-slate-800);
      font-size: 0.875rem;
      font-weight: 600;
      white-space: normal;
      line-height: 1.35;
      border-radius: var(--radius-sm);
    }

    .wsmenu-list > li > a::after {
      display: none;
    }

    .wsmenu-list > li > a:hover,
    .wsmenu-list > li.open > a:not(.menuhomeicon) {
      background-color: var(--color-brand-50);
      color: var(--color-brand-800);
    }

    .wsmenu-list > li > a.menuhomeicon {
      justify-content: flex-start;
      gap: 0.5rem;
      margin: 0.25rem 0 0.375rem;
      padding: 0.7rem 0.875rem;
      color: #ffffff;
    }

    .wsmenu-list > li > a .wsarrow {
      flex-shrink: 0;
      border-inline-start-width: 5px;
      border-inline-end-width: 5px;
      border-block-start-width: 5px;
      color: var(--color-slate-500);
      transition: transform 0.22s ease;
    }

    .wsmenu-list > li.open > a .wsarrow {
      color: var(--color-brand-700);
    }

    .wsmenu-list .sub-menu,
    .wsmenu-list .sub-menu .sub-menu {
      position: static;
      min-inline-size: 0;
      inline-size: calc(100% - 0.5rem);
      box-sizing: border-box;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      border-inline-start: 3px solid var(--color-brand-600);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      display: none;
      margin-block: 0.15rem 0.45rem;
      margin-inline-start: 0.5rem;
      padding: 0.25rem 0.35rem;
      background-color: var(--color-surface-subtle);
    }

    .wsmenu-list .sub-menu .sub-menu {
      border-inline-start: 2px dashed var(--color-brand-500);
      background-color: #ffffff;
      margin-inline-start: 0.5rem;
      inline-size: calc(100% - 0.5rem);
    }

    .wsmenu-list .sub-menu li:not(:last-child) {
      border-block-end: 1px dashed var(--color-slate-200);
    }

    .wsmenu-list .sub-menu a {
      padding: 0.55rem 0.625rem;
      font-size: 0.8125rem;
      color: var(--color-slate-700);
      white-space: normal;
      line-height: 1.4;
    }

    .wsmenu-list li.open > .sub-menu {
      display: block;
    }

    .wsmenu-list li.open > a .wsarrow {
      transform: rotate(180deg);
    }

    .wraper_timkiem {
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }

    .current-time {
      border-inline-end: none;
      padding-inline-end: 0;
      font-size: 0.78125rem;
    }

    .page-grid {
      grid-template-columns: 1fr;
      gap: 1.125rem;
    }
  }

  @media (max-width: 767px) {
    .wraper {
      padding-inline: 0.75rem;
    }

    .wraperheader {
      background-size: 19rem 19rem, 100% 100%;
      background-position: 78% 50%, center;
    }

    .bcb_header_brand {
      gap: 0.75rem;
      padding-block: 0.75rem;
    }

    .bcb_header_logo img {
      inline-size: 3.5rem;
    }

    .bcb_header_kicker {
      font-size: 0.6875rem;
    }

    .bcb_header_title {
      font-size: 0.95rem;
      line-height: 1.25;
    }

    .bcb_header_subtitle {
      font-size: 0.6875rem;
    }

    .wraper_timkiem {
      padding: 0.55rem 0.65rem;
      margin-block: 0.65rem 0.875rem;
    }

    .breadcrumbs-wrap {
      padding-block: 0.4rem;
      padding-inline: 0.65rem;
      margin-block-end: 0.875rem;
    }

    .breadcrumbs li:last-child a span {
      max-inline-size: 14rem;
    }

    .headerSearch .form-control {
      block-size: 2.375rem;
      font-size: 1rem;
    }

    .headerSearch .btn-info {
      inline-size: 2.375rem;
      block-size: 2.375rem;
      min-inline-size: 2.375rem;
    }

    .bcb_hot {
      grid-template-columns: 1fr;
      gap: 0.875rem;
      margin-block-end: 1rem;
    }

    .bcb_news_noibat {
      min-block-size: 16.5rem;
    }

    .bcb_tramy_caption {
      padding: 1.5rem 0.875rem 0.875rem;
    }

    .bcb_tramy_caption h2 a {
      font-size: 1.0625rem;
    }

    .bcb_news_focus {
      max-block-size: 17.5rem;
    }

    .news-categories-pair {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-block-end: 1rem;
    }

    .news_column .panel-body,
    .viewcat-page .panel-body,
    .news-detail > .panel-body,
    .other-news {
      padding: 0.875rem;
    }

    .ddsmoothmenu-v > ul > li > a {
      padding: 0.65rem 0.75rem;
    }

    .ddsmoothmenu-v ul li ul li a {
      padding: 0.55rem 0.65rem;
    }

    .bcb_video {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
      padding: 0.75rem;
    }

    .bcb_video > div:first-child {
      grid-column: 1 / -1;
    }

    .bcb_album {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
      padding: 0.75rem;
    }

    .footer-content-grid {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 0.875rem;
    }

    .footer_img {
      display: flex;
      justify-content: center;
    }

    .scrollup {
      inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
      inset-inline-end: 0.875rem;
      inline-size: 2.5rem;
      block-size: 2.5rem;
    }

    .work-schedules .schedule-list {
      display: none;
    }

    .work-schedules .schedule-list-mobile {
      display: block;
    }

    .schedule-list-tool {
      flex-direction: column;
      align-items: stretch;
      padding: 0.65rem 0.75rem;
      gap: 0.6rem;
    }

    .schedule-list-tool > .pull-left {
      inline-size: 100%;
    }

    .schedule-list-tool > .pull-left > .btn-group {
      display: flex;
      inline-size: 100%;
    }

    .schedule-list-tool #dropdown-selectweek {
      flex: 1 1 auto;
      min-inline-size: 0;
      display: flex;
    }

    .schedule-list-tool #dropdown-selectweek > .dropdown-toggle {
      inline-size: 100%;
      white-space: normal;
      text-align: center;
      font-size: 0.8125rem;
      line-height: 1.35;
      padding-inline: 0.6rem;
    }

    .schedule-list-tool .dropdown-menu {
      min-inline-size: 0;
      inline-size: min(22rem, calc(100vw - 2.25rem));
      inset-inline-start: 50%;
      transform: translateX(-50%);
      max-block-size: 60dvh;
    }

    .schedule-list-tool .dropdown-menu li a {
      white-space: normal;
      line-height: 1.4;
    }

    .schedule-list-tool > .pull-right {
      justify-content: center;
      inline-size: 100%;
    }

    .work-schedules .alert {
      padding: 0.75rem 0.875rem;
    }

    .work-schedules-form .row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
    }

    /* Responsive Inputs & Touch Ergonomics */
    :is(.shops, .videos, .work-schedules, .laws, .photos, .contact, .seek) :is(input.form-control, select.form-control, textarea.form-control, #pnum) {
      font-size: 1rem;
    }

    .seek > .panel-body {
      padding: 0.875rem;
    }

    .seek .seek-form-card {
      padding: 0.75rem;
    }

    .seek .seek-controls {
      grid-template-columns: 1fr;
    }

    .seek .seek-actions {
      flex-wrap: wrap;
    }

    .seek .btn-primary,
    .seek a.advSearch {
      flex: 1 1 auto;
    }

    .seek .seek-logic {
      justify-content: flex-start;
    }

    .seek .seek-logic label.radio-inline {
      flex: 1 1 auto;
      justify-content: center;
    }

    .seek .nav-tabs li.pull-right {
      margin-inline-start: 0;
    }

    /* Recent Modules Mobile Refinements */
    .contact .panel-body,
    .voting .panel-body,
    :is(.shops, .videos) .panel-body {
      padding: 0.85rem;
    }

    .social-share-container {
      gap: 0.45rem 0.75rem;
      padding: 0.6rem 0.75rem;
    }

    .organs .dropdown-menu {
      max-inline-size: calc(100vw - 2rem);
    }

    .organs .table :is(th, td),
    .laws .table :is(th, td),
    :is(.shops, .videos, .work-schedules) .table :is(thead th, tbody td, tfoot td) {
      padding: 0.55rem 0.65rem;
      font-size: 0.8125rem;
    }

    .table-responsive {
      -webkit-overflow-scrolling: touch;
    }

    /* Laws Mobile Stacked Cards Tables */
    .laws .table-responsive:has(> .laws-mobile-cards) {
      background: transparent;
      border: none;
      box-shadow: none;
      overflow: visible;
    }

    .laws table.laws-mobile-cards colgroup,
    .laws table.laws-mobile-cards thead {
      display: none;
    }

    .laws table.laws-mobile-cards tbody {
      display: grid;
      gap: 0.75rem;
    }

    .laws table.laws-mobile-cards tbody tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      background-color: var(--color-surface);
      border: 1px solid var(--color-slate-200);
      border-inline-start: 3px solid var(--color-brand-600);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-xs);
      padding: 0.65rem 0.85rem;
      gap: 0.25rem;
    }

    .laws table.laws-mobile-cards tbody tr:has(> td.warning) {
      border-inline-start: 0;
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
    }

    .laws table.laws-mobile-cards tbody td {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.25rem 0.75rem;
      inline-size: auto !important;
      padding: 0.35rem 0 !important;
      border: none !important;
      border-block-end: 1px dashed var(--color-slate-100) !important;
      text-align: start !important;
    }

    .laws table.laws-mobile-cards tbody td:last-child {
      border-block-end: none !important;
      padding-block-end: 0 !important;
    }

    .laws table.laws-mobile-cards tbody td[data-label]::before {
      content: attr(data-label);
      flex-shrink: 0;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-slate-500);
    }

    .laws table.laws-mobile-cards tbody td.warning {
      display: block;
      padding: 0.6rem 0.85rem !important;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-brand-100) !important;
      border-inline-start: 4px solid var(--color-brand-600) !important;
    }

    .laws table.laws-detail-table tbody {
      display: grid;
    }

    .laws table.laws-detail-table tbody tr {
      display: grid;
      grid-template-columns: 1fr;
      padding: 0.6rem 0.85rem;
      border-block-end: 1px solid var(--color-slate-200);
      gap: 0.2rem;
    }

    .laws table.laws-detail-table tbody tr:last-child {
      border-block-end: none;
    }

    .laws table.laws-detail-table tbody tr td {
      display: block;
      inline-size: 100% !important;
      text-align: start !important;
      padding: 0 !important;
      border: none !important;
      background: transparent !important;
    }

    .laws table.laws-detail-table tbody tr td:first-child {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-brand-800);
    }

    /* Organs Mobile Stacked Cards Tables */
    .organs .table-responsive:has(> .org-mobile-cards) {
      overflow: visible;
    }

    .organs table.org-mobile-cards caption {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.45rem 0.75rem;
    }

    .organs table.org-mobile-cards thead {
      display: none;
    }

    .organs table.org-mobile-cards tbody {
      display: grid;
      gap: 0.65rem;
      padding: 0.65rem;
      background-color: var(--color-surface-subtle);
    }

    .organs table.org-mobile-cards tbody tr:not(.org-subcat-row) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      padding: 0.7rem 0.85rem;
      background-color: var(--color-surface);
      border: 1px solid var(--color-slate-200);
      border-inline-start: 3px solid var(--color-brand-600);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-xs);
      gap: 0.25rem;
    }

    .organs table.org-mobile-cards tbody tr:not(.org-subcat-row) td {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.25rem 0.75rem;
      padding: 0.3rem 0 !important;
      border: none !important;
      border-block-end: 1px dashed var(--color-slate-100) !important;
      text-align: start !important;
    }

    .organs table.org-mobile-cards tbody tr:not(.org-subcat-row) td:last-child {
      border-block-end: none !important;
      padding-block-end: 0 !important;
    }

    .organs table.org-mobile-cards tbody tr:not(.org-subcat-row) td[data-label]::before {
      content: attr(data-label);
      flex-shrink: 0;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-slate-500);
    }

    .organs table.org-mobile-cards tbody td.org-photo-cell {
      order: -1;
      justify-content: center;
      border-block-end: none !important;
      padding-block: 0 0.35rem !important;
    }

    .organs table.org-mobile-cards tbody td.org-photo-cell::before {
      display: none;
    }

    .organs table.org-mobile-cards tbody tr.org-subcat-row {
      display: block;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-brand-100);
      background-color: var(--color-brand-50);
    }

    .organs table.org-mobile-cards tbody tr.org-subcat-row td {
      display: block;
      padding: 0.55rem 0.75rem !important;
      border: none !important;
    }

    .organs table.org-person-table colgroup {
      display: none;
    }

    .organs table.org-person-table tbody {
      display: block;
    }

    .organs table.org-person-table tbody tr:first-child {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.75rem;
      padding: 0.75rem 0.85rem;
      border-block-end: 1px solid var(--color-slate-200);
    }

    .organs table.org-person-table tbody tr:first-child td[rowspan] {
      flex: 0 0 100%;
      padding: 0 0 0.5rem !important;
      border: none !important;
      text-align: center !important;
    }

    .organs table.org-person-table tbody tr:first-child td:not([rowspan]) {
      padding: 0.15rem 0 !important;
      border: none !important;
    }

    .organs table.org-person-table tbody tr:first-child td:nth-child(2) {
      font-weight: 600;
      color: var(--color-slate-600);
      font-size: 0.8125rem;
    }

    .organs table.org-person-table tbody tr:not(:first-child) {
      display: grid;
      grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
      border-block-end: 1px solid var(--color-slate-200);
    }

    .organs table.org-person-table tbody tr:not(:first-child):last-child {
      border-block-end: none;
    }

    .organs table.org-person-table tbody tr:not(:first-child) td {
      padding: 0.5rem 0.85rem !important;
      border: none !important;
    }

    .organs table.org-person-table tbody tr:not(:first-child) td:first-child {
      font-weight: 600;
      color: var(--color-slate-600);
      background-color: var(--color-surface-subtle);
      border-inline-end: 1px solid var(--color-slate-100) !important;
    }

    .photos .photos-grid,
    .photos #album-gallery > .row,
    .photos #other-album.row,
    .photos .tab-pane > .row,
    .shops .viewgrid,
    .shops .shops-grid,
    .videos .videos-grid,
    .videos .related_new,
    .videos .related {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }

    /* Shops Mobile */
    .shops .viewcat > h1.pull-left,
    .shops .viewcat > .form-inline.pull-right {
      float: none !important;
    }

    .shops .viewcat > .form-inline.pull-right {
      inline-size: 100%;
      justify-content: space-between;
      margin-block-end: 0.5rem;
    }

    .shops .viewcat .form-inline .form-control {
      flex: 1 1 10rem;
      min-inline-size: 0;
    }

    .shops .viewlist .panel-default > .panel-body {
      grid-template-columns: 8.5rem minmax(0, 1fr);
      gap: 0.75rem 0.85rem;
    }

    .shops.shops-order #shipping_form .row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.65rem;
    }

    .shops #idmodals .modal-dialog {
      max-inline-size: calc(100vw - 1.25rem);
    }

    /* Videos Mobile */
    .videos .alert-info {
      padding: 0.75rem 0.875rem;
    }

    .videos .alert-info .imghome {
      float: none !important;
      display: block;
      max-inline-size: 100%;
      margin: 0 0 0.65rem;
    }

    .videos .panel-body:has(> .videos-thumbnail) {
      grid-template-columns: 10rem minmax(0, 1fr);
      gap: 0.75rem;
    }

    .videos .uploader {
      padding: 0.65rem 0.75rem;
      gap: 0.6rem 0.75rem;
    }

    .videos.videos-detail .other-news {
      padding: 0.85rem;
    }
  }

  @media (max-width: 480px) {
    .bcb_header_brand {
      gap: 0.625rem;
      padding-block: 0.65rem;
    }

    .bcb_header_logo img {
      inline-size: 3.125rem;
    }

    .bcb_header_title {
      font-size: 0.84375rem;
    }

    .bcb_header_subtitle {
      font-size: 0.625rem;
    }

    .bcb_news_noibat {
      min-block-size: 14.5rem;
    }

    .bcb_tramy_caption h2 a {
      font-size: 0.96875rem;
    }

    .bcb_tramy_caption p {
      font-size: 0.78125rem;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }

    .news-lead {
      grid-template-columns: 6.75rem 1fr;
      gap: 0.65rem;
    }

    .shops .viewgrid,
    .shops .shops-grid,
    .videos .videos-grid,
    .videos .related_new,
    .videos .related {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
    }

    .shops .tms_sp_title_a {
      padding: 0.45rem 0.85rem;
      font-size: 0.875rem;
    }

    .shops .tms_money {
      padding-inline: 0.55rem;
      padding-block-start: 0.5rem;
    }

    .shops .tms_sp_item_title,
    .shops .shops-grid .caption {
      padding: 0.55rem 0.6rem 0.7rem;
    }

    .shops .money,
    .shops .money_home,
    .shops .tms_money .price span:first-child {
      font-size: 0.875rem;
    }

    .shops .viewlist .panel-default > .panel-body,
    .videos .panel-body:has(> .videos-thumbnail),
    .shops .review_row {
      grid-template-columns: 1fr;
    }

    .shops .viewlist .image {
      grid-row: auto;
    }

    .shops.shops-detail #detail h1 {
      font-size: 1.125rem;
    }

    .shops.shops-detail #detail .well center {
      gap: 0.45rem;
    }

    .shops.shops-detail #detail .btn-order {
      flex: 1 1 calc(50% - 0.35rem);
    }

    .shops .step_bar {
      gap: 0.5rem 0.85rem;
      padding: 0.65rem 0.75rem;
    }

    .shops .step_bar .step {
      font-size: 0.8125rem;
    }

    .videos .videos_list .thumbnail > h4,
    .videos .videos_list .videos-home-info {
      padding-inline: 0.6rem;
    }

    .videos .videos_list .thumbnail > .text-muted {
      padding-inline: 0.6rem;
    }

    .videos .media-func .button-style-1 {
      flex: 1 1 auto;
      justify-content: center;
      padding: 0.45rem 0.65rem;
    }

    .videos .uploader .hitstotal {
      margin-inline-start: 0;
    }

    :is(.shops, .videos) .nav-tabs > li > a {
      padding: 0.45rem 0.65rem;
      font-size: 0.78125rem;
    }

    .schedule-list-tool .btn-sm {
      flex: 1 1 auto;
    }

    .organs table.org-person-table tbody tr:not(:first-child) {
      grid-template-columns: 1fr;
    }

    .organs table.org-person-table tbody tr:not(:first-child) td:first-child {
      padding-block: 0.45rem 0.15rem !important;
      font-size: 0.75rem;
      color: var(--color-brand-800);
      background: transparent;
      border-inline-end: none !important;
    }

    .organs table.org-person-table tbody tr:not(:first-child) td:last-child {
      padding-block: 0.1rem 0.55rem !important;
    }
  }

  @media (max-width: 360px) {
    .photos .photos-grid,
    .photos #album-gallery > .row,
    .photos #other-album.row,
    .photos .tab-pane > .row,
    .shops .viewgrid,
    .shops .shops-grid,
    .videos .videos-grid,
    .videos .related_new,
    .videos .related {
      grid-template-columns: 1fr;
    }
  }
}