:root {
    --text-color: #090909;
    --text-color-soft: #555;
    --text-primary-color: #1b75bc;
    --highlight-color: #30a14a;
}

body {
    font-family: "Roboto", sans-serif;
    /* Prevent stray 1-2px horizontal overflow from edge-bleed patterns like `-mx-4` on grids.
       overflow-x: clip is used instead of overflow: hidden because it does NOT establish a
       new scroll container — so `position: sticky` elements still work correctly. */
    overflow-x: clip;
}

.roboto {
    font-family: "Roboto", ui-sans-serif;
}

.roboto\! {
    font-family: "Roboto", ui-sans-serif !important;
}

.noto {
    font-optical-sizing: auto;
    font-family: "Noto Serif", serif;
}

.noto\! {
    font-family: "Noto Serif", serif !important;
}

.merriweather {
    font-optical-sizing: auto;
    font-family: "Merriweather", serif;
}

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

.t\:container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    .t\:container {
        max-width: 900px !important;
    }
}

@media (min-width: 1200px) {
    .t\:container {
        max-width: 1100px !important;
    }
}

@media (min-width: 1400px) {
    .t\:container {
        max-width: 1280px !important;
    }
}

/* img */

.img-block {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
}

.img-block img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-block.lg {
    width: 260px;
    max-width: 50%;
}

.img-block.md {
    width: 192px;
    max-width: 50%;
}

.img-block.sm {
    width: 178px;
    max-width: 50%;
}

.img-block.ssm {
    width: 145px;
    max-width: 50%;
}

/* title */
.title {
    color: var(--text-color);
    font-weight: 600;
    margin-top: 4px;
    font-family: "Noto Serif", serif;
}

.title.l1 {
    font-size: 1.5rem;
}

.title.l2 {
    font-size: 1.125rem;
}

.title.l3 {
    font-size: 1rem;
}

.title.l4 {
    font-size: 0.875rem;
}

@media (max-width: 1000px) {
    .title.l1 {
        font-size: 1.25rem;
    }

    .title.l2 {
        font-size: 1.125rem;
    }
}

.desc {
    color: var(--text-color-soft);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-top: 8px;
    font-size: 1rem;
    overflow-wrap: break-word;
}

a:hover {
    color: var(--highlight-color);
}

/* Giữ nguyên màu chữ khi hover (ghi đè a:hover ở trên) */
.no-hover-color:hover,
.no-hover-color:hover span {
    color: inherit !important;
}

/* swiper */
.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #67b2eb;
    transition: all 0.3s ease;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: #30a14a;
    width: 67px !important;
    border-radius: 9999px !important;
}

/* swiper-control — wrapper for prev/next buttons with fade-out gradient.
   Usage:
     <div class="swiper" data-swiper ...>
       <div class="swiper-wrapper">...</div>
       <div class="swiper-control">
         <button type="button" class="swiper-button-prev"></button>
         <button type="button" class="swiper-button-next"></button>
       </div>
     </div>
*/

/* Reserve right padding on the swiper so the last slide clears the wrapper.
   !important needed because swiper-bundle.css's `.swiper { padding: 0 }` is loaded later. */
.swiper:has(.swiper-control .swiper-button-next:not(.swiper-button-lock)) {
    padding-right: 110px !important;
}

.swiper-control {
    --swiper-navigation-color: #c4c4c4;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 40px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.5) 10%,
        #fff 40%
    );
}

/* Auto-hide the whole control when the swiper has no overflow (Swiper adds
   .swiper-button-lock to both buttons in that case). */
.swiper-control:has(.swiper-button-lock) {
    display: none !important;
}

/* Override Swiper's default absolute positioning so the buttons flow inside
   the flex wrapper as static items. */
.swiper-control .swiper-button-prev,
.swiper-control .swiper-button-next {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: auto;
    height: auto;
}

.swiper-control .swiper-button-prev {
    margin-right: 6px;
}

.swiper-control .swiper-button-next {
    margin-left: 6px;
}

.swiper-control .swiper-button-prev::after,
.swiper-control .swiper-button-next::after {
    font-size: 14px;
}

.swiper-control .swiper-button-prev:hover,
.swiper-control .swiper-button-next:hover {
    --swiper-navigation-color: #212636;
}

.swiper-control .swiper-button-prev:disabled,
.swiper-control .swiper-button-next:disabled,
.swiper-control .swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* sub-cate-swiper — horizontal pill nav with left-border dividers.
   Pair with .swiper-control for prev/next buttons.
   Usage:
     <div class="swiper sub-cate-swiper t:mt-2"
          data-swiper data-swiper-slides-per-view="auto"
          data-swiper-space-between="0" data-swiper-free-mode="true">
       <div class="swiper-wrapper">
         <div class="swiper-slide"><a href="" class="t:whitespace-nowrap">…</a></div>
         …
       </div>
       <div class="swiper-control">
         <button type="button" class="swiper-button-prev"></button>
         <button type="button" class="swiper-button-next"></button>
       </div>
     </div>
*/

.sub-cate-swiper {
    font-size: 0.875rem;
    font-weight: 500;
    color: #8a94a6;
}

.sub-cate-swiper .swiper-wrapper {
    align-items: center;
}

.sub-cate-swiper .swiper-slide {
    width: auto !important;
    padding-left: 12px;
    padding-right: 12px;
    border-left: 1px solid #dcdfe4;
}

.sub-cate-swiper .swiper-slide:first-child {
    padding-left: 0;
    border-left: 0;
}

/* CSS Grid items default to min-width: auto, sized to their intrinsic min-content.
   That min-content size includes the natural width of children like images or the
   full slide chain of a swiper — which can push the column past its grid track and
   cause horizontal page scroll on narrow viewports. Force min-width: 0 on every
   grid item so columns respect the grid track sizing. */
.t\:grid > * {
    min-width: 0;
}

/* cate-label */
.cate-label {
    padding-bottom: 6px;
    border-bottom: 1px dashed #d9d9d9;
    flex-wrap: wrap;
}

.cate-label h2,
.cate-label h3 {
    color: #30a14a;
    font-weight: 700;
    font-size: 1.35rem;
    text-transform: uppercase;
    font-family: "Noto Serif", serif;
}

.header-main {
    transition:
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.header-main.header-main--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 100;
    background-color: #fff;
}

.logo-header.logo-header--compact {
    max-height: 40px;
    width: auto;
    height: auto;
}

.article-date {
    font-size: 0.8rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}

.t\:break-words {
    overflow-wrap: break-word;
}

.t\:flow-root .title {
    margin-top: 0px;
    transform: translateY(-4px);
}

figcaption {
    margin-top: 0px;
    margin-bottom: 0px;
}

figcaption * {
    margin: 0px !important;
}

.article-prose p {
    overflow-wrap: break-word;
}

img.loading {
    filter: blur(6px);
}