﻿.hidden{display:none !important}
.timeline-item{background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:3px;padding:12px;margin:10px auto;min-height:138px}@keyframes placeHolderShimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.animated-background{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#eeeeee 8%,#dddddd 18%,#eeeeee 33%);background-size:800px 104px;height:130px;position:relative}.background-masker{background:#fff;position:absolute}.background-masker.header-top{top:0;left:33.3333%;right:0;height:10px}.background-masker.header-left{top:10px;left:33.3333%;width:15px;height:20px}.background-masker.header-right{top:10px;left:90%;right:0;height:20px}.background-masker.header-bottom{top:30px;left:33.3333%;right:0;height:10px}.background-masker.header-2-left{top:40px;left:33.3333%;width:15px;height:20px}.background-masker.header-2-right{top:40px;left:65%;right:0;height:20px}.background-masker.header-2-bottom{top:60px;left:33.3333%;right:0;height:15px}.background-masker.meta-left{top:75px;left:33.3333%;width:15px;height:8px}.background-masker.meta-right{top:75px;left:55%;right:0;height:8px}.background-masker.meta-bottom{top:83px;left:33.3333%;right:0;height:15px}.background-masker.description-left{top:98px;left:33.3333%;width:15px;height:12px}.background-masker.description-right{top:98px;left:95%;right:0;height:12px}.background-masker.description-bottom{top:110px;left:33.3333%;right:0;height:8px}.background-masker.description-2-left{top:118px;left:33.3333%;width:15px;height:12px}.background-masker.description-2-right{top:118px;left:87%;right:0;height:12px}.background-masker.description-2-bottom{top:130px;left:33.3333%;right:0;height:8px}.background-masker.description-3-left{top:138px;left:33.3333%;width:15px;height:4px}.background-masker.description-3-right{top:138px;left:100%;right:0;height:12px}.background-masker.description-3-bottom{top:150px;left:33.3333%;right:0;bottom:0}
.popUp.binhLuan{border:1px solid red}.popUp.active{pointer-events:auto;opacity:1}.popUp{pointer-events:none;opacity:0;z-index:301;position:fixed;transition:.5s ease-in-out}.popUp .bg{position:fixed;z-index:333;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,.6)}.popUp.binhLuan .popupContent{width:600px;top:65px;padding:25px 30px 30px;border:1px solid red;background-color:#fff}.popUp .popupContent{left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);position:absolute;z-index:5;z-index:999;position:fixed}.popUp.binhLuan .popupContent .title{font:20px/28px RobotoBold;color:red;font-family:"Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700}.popUp.binhLuan .popupContent .form{margin:25px -30px 0;padding:15px 30px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}.popUp.binhLuan .popupContent .btnClick{margin-top:15px;font-size:0;text-align:right}.popUp.binhLuan .popupContent .btnClick a{display:inline-block;width:85px;height:40px;text-align:center;font:15px/40px RobotoMedium;border:1px #e5e5e5 solid;margin-left:10px;border-radius:5px;font-weight:700;font-family:"Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif}.popUp.binhLuan .popupContent .btnClick a:last-child{background-color:red;border-color:red;color:#fff;font-weight:700}.popUp.binhLuan .popupContent .form .box input{height:40px;font:15px/40px;border:1px solid #e5e5e5;border-radius:5px;width:100%;padding:0 10px;font-family:"Asap Condensed",Arial,"Helvetica Neue",Helvetica,sans-serif}.has-error em{color:red}.btn-close-comment{display:inline-block;height:31px;font-size:13px;color:#fff;padding:6px 20px;background-color:#b30013;margin-top:-10px;border-radius:4px;}.btn-send-comment{display:inline-block;height:31px;font-size:13px;color:#fff;padding:6px 20px;background-color:#0056b3;margin-top:-10px;border-radius:4px;}.btn-send-comment:hover,.btn-close-comment:hover{color:#fff}
.c-share-scroll{z-index:98}/* 500 la rac cua giao dien cu: thanh cong cu de len mega menu (101) va header sticky (200). 98 van noi tren noi dung bai nhung nam duoi l-nav(100)/mega menu(101)/sticky(200); dat z-index tren chinh .c-share-scroll con tao stacking context de nut chinh co chu (.c-font-box__btn z-index 200) khong thoat len tren mega menu. */.qr-share{position:relative}.qr-share .btn-qr{display:flex;align-items:center;justify-content:center}.qr-share .btn-qr .icon-qr{display:block;margin:0}.qr-share--up .icon-qr{width:16px;height:16px}.qr-share--right .icon-qr{width:20px;height:20px}.qr-share__pop{position:absolute;width:200px;padding:10px;background-color:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18);text-align:center;z-index:99;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease}.qr-share__pop::after{content:"";position:absolute;border:7px solid transparent}.qr-share__img{width:180px;height:180px;margin:0 auto}.qr-share__img img{display:block;width:180px;height:180px}.qr-share__cap{display:block;margin-top:8px;font-size:12px;line-height:1.3;color:#666}.qr-share--up .qr-share__pop{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(6px)}.qr-share--up:hover .qr-share__pop,.qr-share--up:focus-within .qr-share__pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.qr-share--up .qr-share__pop::after{top:100%;left:50%;transform:translateX(-50%);border-top-color:#fff}.qr-share--right .qr-share__pop{left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px)}.qr-share--right:hover .qr-share__pop,.qr-share--right:focus-within .qr-share__pop{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}.qr-share--right .qr-share__pop::after{right:100%;top:50%;transform:translateY(-50%);border-right-color:#fff}
/*add css new*/
a { 
    text-decoration:none !important;
    cursor:pointer;
}
/* respensive iframe*/
.onecms_video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.onecms_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.c-widget__title__name > a {
    color: inherit;
}
.c-cat-list__current > a {
    color: inherit;
}
video, audio {
    width: 100%;
}
.c-header-inner h1 {
    margin-bottom: inherit;
}
.c-video-head__text h1 {
    font-size: 16px;
    margin-bottom: inherit;
}
.c-video-head__text a {
    color:#fff;
}
.bottom40 {
    margin-bottom: 40px
}
.c-video-head__cat li.active a{
    color: #ED1C24;
}
@charset "UTF-8";

.bg-detail.is-single .l-sidebar {
    display: none;
}

.bg-detail.is-single .l-main {
    margin-left: auto;
    margin-right: auto;
    width: auto ;
    max-width: 600px;
}

    .bg-detail.is-single .l-main .c-detail-head {
        padding: 0;
    }

    .bg-detail.is-single .l-main .c-news-detail {
        padding: 0;
    }

.onecms_live {
    padding-left: 0 !important;
}

@media (min-width: 992px) {
    .bg-detail.is-single .c-share-scroll.has-fixed {
        /*position: absolute;*/
    }

    .entry .sc-longform-header-no-bg-img {
        padding-top: 150px;
    }
}

.invisible-box {
    opacity: 0;
    pointer-events: none;
}

/*new - Loading skeleton effect*/
.onecms_load_view {
    position: relative;
    transition: opacity 0.3s ease-out;
}

.onecms_load_view.fadeout {
    opacity: 1;
}

.onecms_load_view.fadeout::after {
    animation: skeletonWave 1.4s ease infinite;
    background: linear-gradient(
        90deg,
        #efefef 25%,
        #fafafa 50%,
        #efefef 75%
    );
    background-size: 400% 100%;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease-out;
    will-change: opacity;
}

.onecms_load_view.loaded {
    opacity: 1;
}

.onecms_load_view.loaded::after {
    display: none;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
@keyframes skeletonWave {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.select2-results__option.level1 {
    font-weight: bold;
}

.select2-results__option.level2 {
    padding-left: 30px;
}

.preview-mode {
    padding-top: 50px;
}

    .preview-mode:before {
        content: "Bạn đang xem phiên bản XEM THỬ của bài viết.";
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);
        display: block;
        padding: 10px;
        text-align: center;
        color: #e30000;
        font-size: 22px;
        height: 50px;
    }
.js-sticky-scroll .c-news-topmore{
    max-width:300px;
}
@media(max-width:767px) {
    .preview-mode:before {
        content: "Phiên bản XEM THỬ";
    }
}
/*Xóa khoảng trống ở header khi nó được chèn trong content vì web này đã có sẵn khoảng trống*/
.entry .sc-longform-header-top-normal,
.entry .sc-longform-header-top-normal-small,
.entry .sc-longform-header-no-bg-img-normal,
.entry .sc-longform-header-default-normal,
.entry .sc-longform-header-top-normal .sc-longform-header-text,
.entry .sc-longform-header-top-normal-small .sc-longform-header-text,
.entry .sc-longform-header-no-bg-img-normal .sc-longform-header-text,
.entry .sc-longform-header-default-normal .sc-longform-header-text {
    padding-top: 0 !important;
}

.entry:not(.longform) .sc-longform-header-top-normal .sc-longform-header-text .sc-longform-header-title,
.entry:not(.longform) .sc-longform-header-top-normal-small .sc-longform-header-text .sc-longform-header-title,
.entry:not(.longform) .sc-longform-header-no-bg-img-normal .sc-longform-header-text .sc-longform-header-title,
.entry:not(.longform) .sc-longform-header-default-normal .sc-longform-header-text .sc-longform-header-title {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*Chỉnh thông tin tác giả, ngày xuất bản*/
.entry:not(.longform) .sc-longform-header-meta {
    font-family: "Roboto",Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    font-size: 14px !important;
    margin-top: 15px !important;
}

.entry:not(.longform) .sc-longform-header-author {
    color: #424242 !important;
}

.entry:not(.longform) .sc-longform-header-date {
    color: #888 !important;
}

.entry:not(.longform) .sc-text {
    font-size: 0;
}

.entry:not(.longform) .sc-text:after {
    font-size: 14px;
    display: inline;
    content: "|";
}
.sc-related-articles img {
    height: stretch !important;
}
.c-theme-video .sc-related-articles {
    background-color: inherit !important;
}
@media (max-width: 991px) {
    .c-detail-head {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

        .c-detail-head .c-share-scroll {
            top: -34px !important;
        }
}

@media (max-width: 762px) {
    .binhluancomment, .popUp.binhLuan .popupContent {
        width: 100%;
    }
}

/* Box "Hội đồng biên tập" (c-staff-list) nằm trên nền đỏ bg-primary.
   Bộ style gốc chỉ tô trắng cho ".b-grid__title a", nhưng danh sách này không có
   link nên tên và học hàm rơi về màu mặc định #333 -> chìm vào nền đỏ.
   Tô trắng cho cả trường hợp không bọc thẻ a. */
.c-staff-list .b-grid .b-grid__content .b-grid__title,
.c-staff-list .b-grid .b-grid__content .b-grid__title b {
    color: #fff;
}

/* Box gồm 2 khối: Hội đồng biên tập và lãnh đạo toà soạn. Không đặt tiêu đề cho
   khối thứ hai (nội dung toà soạn cung cấp không có), chỉ kẻ một đường phân cách. */
.c-staff-list + .c-staff-list {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .35);
}

/* Chức danh đứng TRÊN tên nên cần nhạt và nhỏ hơn tên để không tranh chấp thứ bậc. */
.c-staff-list .b-grid .b-grid__content .b-grid__row.b-grid__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

/* Bộ style gốc dành riêng cho mục ĐẦU TIÊN một ô ảnh chân dung 80px và chừa 12px
   padding-left cho nó. Box này không dùng ảnh nữa nên phần chừa đó làm mục đầu của
   mỗi khối thụt vào so với các mục bên dưới. Trả về 0 cho thẳng hàng. */
.c-staff-list > ul > li:first-child .b-grid .b-grid__content {
    padding-left: 0;
}

/* Tiêu đề chuyên mục / tiêu đề bài: bộ style gốc đặt màu cho chính thẻ tiêu đề
   (#AB2421) nhưng KHÔNG đặt màu cho thẻ a bên trong, vì file mẫu để chữ trần.
   View nào bọc link thì chữ rơi về màu link mặc định của Bootstrap (#007bff) -> xanh.
   Cho thẻ a kế thừa màu của tiêu đề để mọi trang đều ra đúng màu đỏ. */
.c-cat-title-box__current a,
.c-cat-list__current a,
.c-detail-head__title a,
.c-video-detail__title a {
    color: inherit;
    text-decoration: none;
}

/* ---------- c-epaper: trang chuyên mục "Tạp chí qua các năm" ------------------
   View Views/Category/Epaper.cshtml và template epaper trong custom.js được clone
   từ bộ mã gốc nhưng bộ CSS của thiết kế a.vjst.vn không có nhóm class này, nên
   trang render ra không có kiểu dáng. Bổ sung ở đây, dùng đúng ngôn ngữ thị giác
   sẵn có của site: bìa tỷ lệ 3:4 như .c-newspaper-item, tiêu đề Cambria, hover đỏ #AB2421. */
.c-epaper-grid > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.c-epaper-item__img {
    overflow: hidden;
    padding-top: 133.3333%; /* khung bìa 3:4 */
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.c-epaper-item__img a {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.c-epaper-item__img img {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.c-epaper-item__row {
    line-height: 1.5;
}

.c-epaper-item__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: "Cambria", serif;
}

.c-epaper-item__title a {
    display: block;
    text-decoration: none;
    color: #000;
    transition: all 0.2s ease;
}

.c-epaper-item__title a:hover {
    color: #AB2421;
}

/* Mọi ấn phẩm cùng cỡ, không có ô lớn đầu lưới: 2 cột mobile -> 4 cột từ 992px. */
@media (min-width: 768px) {
    .c-epaper-grid > ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .c-epaper-grid > ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}
