/* ============================================================================
   Khối Media trang chủ BÁO — nằm trong một VỆT NỀN SÁNG (.mtabs-area) gồm 2 phần:
     1. Hàng tab  (__media_tabs.htm): .mt-video | .mt-podcast, 8 thẻ 16:9, 4/view desktop
     2. Dải Shorts (__short_video.htm): khuôn cũ .svod-*, luôn hiển thị, KHÔNG bọc tab
   Nền sáng để tương phản khối PTTH navy phía trên nên chữ dùng tông tối.
   Tỉ lệ thẻ đổi theo tab bằng --mt-ratio trên modifier class, không viết nhiều bản thumb.
   ========================================================================== */
/* Wrapper full-bleed nền sáng. TỰ ĐỊNH NGHĨA chứ không mượn .area.area--light của khuôn #dmul:
   lớp đó chỉ có trong bthcss-pc*.css, còn bthcss-mb*.css KHÔNG khai -> trên mobile wrapper sẽ
   thành div rỗng, mất cả nền lẫn padding (đã đo). Một rule ở đây phục vụ cả hai template. */
.mtabs-area {
    padding: 26px 0;
    margin: var(--bth-margin, 20px) 0;
    background: #a7c3f2 url(trongdong3.webp) center center/100% no-repeat
}

.mtabs { --mt-ratio: 16/9 }

.mtabs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    border-bottom: 2px solid rgba(0, 46, 68, .12)
}

/* min-width:0 là bắt buộc: không có nó, flex item không co được dưới kích thước nội dung nên
   overflow-x của chính nav vô hiệu, và tab cuối bị "Xem thêm" đẩy ra ngoài, cắt cụt chữ. */
.mtabs__nav { display: flex; align-items: flex-end; gap: 26px; min-width: 0; overflow-x: auto; scrollbar-width: none }
.mtabs__nav::-webkit-scrollbar { display: none }

.mtabs__tab {
    position: relative;
    padding: 0 0 12px;
    font-family: var(--font-family-bar);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    text-transform: uppercase;
    color: #6b7b86;
    white-space: nowrap
}

.mtabs__tab:hover { color: #002e44 }
.mtabs__tab.active { color: #c1041c }

/* Gạch chân tab đang chọn: dùng ::after để không đẩy layout khi đổi tab */
.mtabs__tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: #c1041c
}

.mtabs__more { flex-shrink: 0; font-size: 14px; font-weight: 500; color: #002e44; white-space: nowrap }
.mtabs__more::after { content: " ›" }
.mtabs__more:hover { color: #c1041c }

/* Pane ẩn phải là display:none — Swiper của pane ẩn KHÔNG được khởi tạo (lười), nên nếu chỉ
   dùng visibility/opacity thì slide vẫn chiếm chỗ và đẩy chiều cao khối. */
.mt-pane.is-hidden { display: none }
/* Cả 2 tab dùng 16:9 vì ảnh gốc của kho cms_News vốn ~16:9 (đo: media/auto/720 -> 720x414 =
   1.739). Khung 1:1 cho Podcast như bản đầu cắt mất mép trái/phải, xén cả chữ trên artwork. */
.mt-video { --mt-ratio: 16/9 }
.mt-podcast { --mt-ratio: 16/9 }

.mtcard { display: block }

.mtcard__thumb {
    position: relative;
    display: block;
    aspect-ratio: var(--mt-ratio);
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0, 46, 68, .12)
}

.mtcard__thumb>img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease }
.mtcard:hover .mtcard__thumb>img { transform: scale(1.05) }

.mtcard__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(193, 4, 28, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none
}

.mtcard__play>svg { width: 18px; height: 18px; fill: #FFF }
.mtcard:hover .mtcard__play { opacity: 1 }

.mtcard__title {
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #002e44;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.mtcard:hover .mtcard__title { color: #c1041c }
.mtcard__meta { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: #c1041c; text-transform: uppercase }

.mtabs .swiper-button-prev,
.mtabs .swiper-button-next {
    color: #FFF;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 46, 68, .55);
    transition: background-color .2s ease
}

.mtabs .swiper-button-prev:hover,
.mtabs .swiper-button-next:hover { background: #c1041c }
.mtabs .swiper-button-prev::after,
.mtabs .swiper-button-next::after { font-size: 15px; font-weight: 700 }
.mtabs .swiper-button-disabled { opacity: 0; pointer-events: none }
/* Nút canh giữa vùng ẢNH, không giữa cả thẻ (thẻ còn 2 dòng tiêu đề bên dưới) */
.mtabs .swiper-button-prev,
.mtabs .swiper-button-next { top: calc(50% - 22px) }

@media (max-width:1024px) { .mtabs__tab { font-size: 20px } .mtabs__nav { gap: 20px } }

@media (max-width:576px) {
    /* 3 nhãn tab + "Xem thêm" phải vừa 375px: ở 17px/gap16 thì PODCAST bị cắt cụt (đã đo) */
    .mtabs__tab { font-size: 15px; padding-bottom: 9px }
    .mtabs__nav { gap: 14px }
    .mtabs__more { font-size: 12px }
    .mtcard__title { font-size: 14px }
    /* Nút điều hướng vô dụng khi vuốt bằng ngón tay, lại che mất thẻ ở màn hẹp */
    .mtabs .swiper-button-prev,
    .mtabs .swiper-button-next { display: none }
}

/* --- Dải Shorts nằm TRONG vệt nền sáng ----------------------------------
   __short_video.htm giữ nguyên khuôn cũ (.svod-*) để thẻ to đúng bản cũ, nhưng khuôn đó vốn
   là một BĂNG ĐỘC LẬP: nền trắng riêng, viền dưới, và max-width 1400px thiết kế cho layout
   1400 — rộng hơn .container 1170px của site nên tràn 116px mỗi bên (đã đo).
   Ở đây chỉ trung hoà 3 thứ đó để dải hoà vào vệt nền và thẳng mép với hàng tab phía trên;
   KHÔNG đụng kích thước thẻ (calc((100%-90px)/4) desktop, 70vw mobile) — đó mới là phần làm
   nên "giao diện cũ". Phạm vi bó trong .mtabs-area nên box "Báo in" (dùng chung .svod-*)
   không bị ảnh hưởng. */
.mtabs-area .svod-container { background: transparent; border-bottom: 0; padding: 0; margin-top: 26px }
.mtabs-area .svod-header { max-width: none; margin: 0 0 16px; padding: 0 }
.mtabs-area .svod-swiper { max-width: none; margin: 0; padding: 0 0 30px !important }

/* Nhãn "Shorts Video": bỏ vạch trang trí, lấy đỏ thương hiệu cho khớp tab active phía trên
   (khuôn gốc để #222 — tông đen lạc trên vệt nền sáng). Selector 2 lớp nên thắng cả rule
   .svod-title lẫn bản @media mobile trong bth-shortvd1120-*.css mà không cần !important. */
.mtabs-area .svod-title { color: #c1041c; gap: 10px }
.mtabs-area .svod-title::before { display: none }
.mtabs-area .svod-title:hover { color: #8e0313 }

@media (max-width:576px) {
    /* Lề ngang đặt Ở WRAPPER, không đặt trên từng khối con: cả hàng tab lẫn dải Shorts đều
       nằm trong .container (bản mobile không khai width cho lớp này nên nó ăn trọn bề ngang)
       -> một chỗ duy nhất quyết định lề, hai khối không thể lệch nhau. Nền vẫn full-bleed vì
       background phủ cả padding box. */
    .mtabs-area { padding: 20px 12px }
    .mtabs-area .svod-container { margin-top: 20px }
    /* Nút điều hướng đã ẩn ở màn hẹp nên không cần chừa chỗ ở đáy như bản gốc */
    .mtabs-area .svod-swiper { padding: 0 0 10px !important }
}