/* === Vars === */
:root{
    --bgweb:#ffffff;
    --txthover:red;
    --red:#e60000;
    --b1:#0A6FFD;
    --b2:#2f80ed;
    --org:#ff5722;
    --border-cl:#f3eeee;
    --brand-red:var(--red);
    --brand-blue1:var(--b1);
    --brand-blue2:var(--b2);
    --brand-orange:var(--org)
}

/* === Base === */
body{background:#f3f5f7}
a{text-decoration:none}
p{font-size: 15px}
h2{font-size: 16px}
/* === Desktop navbar & dropdown === */
.main-nav{background:var(--red)}
.navbar{background:linear-gradient(to bottom,var(--b1),var(--b2));font-weight:700}
.navbar .nav-link,.navbar-nav .nav-link{color:#fff!important;padding:12px 18px;text-transform:uppercase;font-weight:600}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{background:var(--red)!important}
.dropdown-menu{border:1px solid #e9ecef;border-radius:6px;min-width:260px;overflow:hidden}
.dropdown-item{padding:2px 10px;border-bottom:1px dashed #e9ecef}
.dropdown-item:last-child{border-bottom:0}
.dropdown-item::before{content:"✺";color:orange;margin-right:8px}

/* Smooth dropdown (desktop) */
@media (min-width:992px){
    .navbar .dropdown{position:relative}
    .navbar .dropdown-menu{
        display:block;visibility:hidden;opacity:0;transform:translateY(12px) scale(.98);
        transition:opacity .26s ease,transform .26s cubic-bezier(.2,.65,.25,1),visibility 0s linear .26s;
        will-change:transform,opacity;border-radius:10px;
        box-shadow:0 10px 26px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.05)
    }
    .navbar .dropdown.show>.dropdown-menu,.navbar .dropdown-menu.show{
        visibility:visible;opacity:1;transform:translateY(0) scale(1);
        transition:opacity .28s ease,transform .28s cubic-bezier(.2,.65,.25,1),visibility 0s
    }
}
@media (prefers-reduced-motion:reduce){
    .navbar .dropdown-menu{transition:none!important;transform:none!important}
}

/* === FAB hamburger (mobile) === */
.menu-fab{position:sticky;top:10px;z-index:1040;display:none;width:max-content}
.menu-fab .btn-fab{background:#fff;border:3px solid #fff;display:flex;align-items:center;justify-content:center}
.menu-fab .btn-fab i{font-size:1.6rem;color:#333;line-height:1}
@media (max-width:991.98px){.menu-fab{display:block}.navbar.main-nav{display:none}}

/* === Mobile overlay panel === */
.m-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1050;display:none}
.m-panel{position:absolute;left:0;top:0;bottom:0;width:min(92vw,480px);background:#fff;transform:translateX(-100%);transition:transform .28s ease;display:flex;flex-direction:column}
.m-panel.open{transform:translateX(0)}
.m-head{background:var(--red);color:#fff;padding:.8rem .9rem;display:flex;align-items:center;gap:.6rem;justify-content:space-between}
.m-close{background:#fff;border:0;border-radius:8px;padding:.25rem .45rem}
.m-search{padding:.6rem .9rem;border-bottom:1px solid #e9ecef}
.m-search input{width:100%;padding:.55rem .7rem;border:1px solid #dfe3e7;border-radius:8px}
.m-body{overflow:auto;-webkit-overflow-scrolling:touch}
.m-menu{list-style:none;margin:0;padding:0}
.m-menu>li{border-bottom:1px solid #f1f3f5}
.m-link{display:flex;align-items:center;justify-content:space-between;padding:.9rem .95rem;font-weight:800;color:#222;text-transform:uppercase}
.m-caret{transform:rotate(0);transition:transform .2s ease}
.m-item.open>.m-link .m-caret{transform:rotate(90deg)}
.m-sub{display:none;padding:.25rem 0 .6rem .25rem}
.m-sub a{display:block;padding:.55rem 1.1rem;color:#333;text-transform:none;font-weight:600}
.m-sub a:hover{background:#f7f9fb}
.m-divider{height:10px;background:#f7f9fb;border-top:1px solid #eff2f5;border-bottom:1px solid #eff2f5}

/* === Demo === */
.demo-hero{background:#fff;height:220px;display:flex;align-items:center;justify-content:center;border:1px solid #eee;margin:12px 0}

/* === Search (button + expandable) === */
.search-container{position:relative}
.search-input{
    position:absolute;right:0;top:0;height:100%;width:0;opacity:0;transition:all .35s ease;
    border:none;padding:0 14px;background:var(--org);color:#fff;border-radius:6px
}
.search-input::placeholder{color:#fff;opacity:.9}
.search-container.active .search-input{width:260px;opacity:1}
.search-btn{background:var(--red);border:none;color:#fff;padding:8px 12px;border-radius:6px}
@media (max-width:991.98px){
    .search-input{position:static;width:100%!important;opacity:1!important;margin-top:6px}
}

/* === Bootstrap Carousel tweaks (#hero) === */
#hero .carousel-indicators{bottom:12px}
#hero .carousel-indicators [data-bs-target]{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid #fff}
#hero .carousel-indicators .active{background:red}
#hero .carousel-control-prev,#hero .carousel-control-next{
    width:44px;height:44px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border-radius:50%
}
#hero .carousel-control-prev-icon,#hero .carousel-control-next-icon{filter:invert(1) grayscale(100);width:20px;height:20px}

/* === Nivo slider === */

.slider-wrapper{margin:0 auto;box-shadow:0 2px 10px rgba(0,0,0,.08)}
#nivo,#nivo img{width:100%;height:auto;object-fit: fill}
.nivo-controlNav a{width:10px;height:10px;border-radius:50%}
.nivo-controlNav a.active{background:var(--red)}
.nivo-directionNav a{background:rgba(0,0,0,.25)}

/* === Ticker === */
.ticker-wrap{background:#fff;border-top:2px solid #e9ecef;border-bottom:2px solid #e9ecef;position:relative;z-index:2}
.ticker{display:flex;align-items:center;gap:12px;overflow:hidden;white-space:nowrap}
.ticker .label{background:var(--b2);color:#fff;font-weight:800;padding:.45rem .8rem;white-space:nowrap}
.ticker .track{display:inline-block;will-change:transform}
.ticker a{display:inline-block;color:#333;padding:.55rem 1.25rem}
.ticker a+a{border-left:1px dashed #e1e4e8}

/* === News ticker (alt) === */
.news-ticker{background:#fff;border:1px solid #e5e8eb;margin-top:10px;display:flex;align-items:center;overflow:hidden}
.news-ticker .label{background:var(--brand-blue1);color:#fff;font-weight:700;padding:.4rem .7rem;white-space:nowrap}
.news-ticker .items{padding:.35rem .8rem;white-space:nowrap}
.news-ticker .items a{color:#333;margin-right:2rem}

/* === Main / cards === */
.section-title{background:#fff;border-left:10px solid var(--brand-blue1);padding:.55rem .8rem;margin:0 0 2px;font-weight:800;color:#113d6c}
.article-card{background:#fff;border:1px solid #e5e8eb}
.article-card .thumb{height:210px;object-fit:cover;width:100%}
.list-daudong li{list-style: none;
    border-bottom: 1px dashed #ccc;
    padding: 5px 0;
}
.list-daudong li::before{content: "- ";}
.list-daudong li a:hover{
    text-decoration: underline;
    color:var(--b1);
}
.list-li-a-hover a:hover{
    text-decoration: underline;
}
.news-content-show-slide a{color:var(--b1)}
/* === Sidebar === */
.side-box{background:#fff;border:1px solid #e5e8eb;margin-bottom:14px}
.side-box .box-head{background:var(--brand-red);color:#fff;font-weight:800;padding:10px 10px;display:flex;align-items:center;gap:.5rem}
.side-box .box-body{padding:.6rem .7rem}
.side-list li{border-bottom:1px dashed #e5e8eb;padding:.45rem 0}
.side-list li:last-child{border:none}

/* === Photo gallery === */
.gallery .g-item{position:relative;overflow:hidden;border:1px solid #e5e8eb;background:#fff}
.gallery img{width:100%;height:150px;object-fit:cover;transition:transform .35s ease}
.gallery .g-item:hover img{transform:scale(1.05)}
.gallery .caption{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;padding:.35rem .5rem;font-size:.9rem}

/* === Footer === */
footer{background:var(--b1);color:#fff;margin-top:24px;padding:24px 0;background-image:linear-gradient(0deg,rgba(255,255,255,.05),rgba(255,255,255,0))}

/* Back to top + sticky shadow */
#backToTop{position:fixed;right:16px;bottom:16px;z-index:999;display:none}
.sticky-shadow{box-shadow:0 2px 10px rgba(0,0,0,.12)}

/* === News Feature Slider === */
.nf-list{max-height:560px;overflow:auto;background:#fff}
.nf-item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px dashed #e5e8eb;padding:3px;transition:background .2s ease}
.nf-item:last-child{border-bottom:0}
.nf-item img{width:85px;height:55px;object-fit:cover;border-radius:6px;flex:0 0 85px}
.news-content-show-slide{
    background: var(--bgweb);
}
#newsSlider #nf-link{
    height: 250px;
}
#newsSlider #nf-link #nf-image{
    height: 100%;
    object-fit: cover;
}
.nf-item .nf-text{color:var(--b1);font-size: 16px}
.nf-item.active .nf-text{color:var(--red)}
@media (max-width:991.98px){
    #newsSlider #nf-link{height: auto;}
    #newsSlider #nf-link #nf-image{max-height: 120px}
    #newsSlider .nf-title{font-size:1.25rem}
    .nf-item .nf-text{font-size:1rem}
    .nf-item img{width:120px;height:72px;flex-basis:120px}
}

/* === Search float on slider === */
.slider-wrap{position:relative}
.search-float{
    position:absolute;right:24px;top:0;z-index:50;opacity:0;transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease;pointer-events:none
}
.search-float.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.sf-bar{
    min-width:420px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);
    border:1px solid #dbe3ea;border-radius:999px;padding:6px 12px;box-shadow:0 10px 28px rgba(0,0,0,.18);
    backdrop-filter:saturate(120%) blur(2px);position:relative
}
.sf-bar::after{
    content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);
    width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #dbe3ea;box-shadow:0 8px 22px rgba(0,0,0,.12)
}
.sf-leading{color:#98a6b3;font-size:1.1rem}
#sfInput{flex:1;border:0;outline:0;background:transparent;font-size:15px;font-weight:600;color:#14324b}
#sfInput::placeholder{color:#9aa8b5}
.sf-go,.sf-clear{
    border:0;background:#f3f6f9;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .2s ease,transform .15s ease
}
.sf-go:hover,.sf-clear:hover{background:#e7edf3}
.sf-go:active,.sf-clear:active{transform:scale(.96)}
@media (max-width:991.98px){
    .search-float{right:12px;top:12px}
    .sf-bar{min-width:86vw}
}

/* === Banner === */
.banner-main img{width:100%}
.side-box .box-body .side-list .icon-filevanban{
    max-width:20px;
    margin-right: 3px;
    object-fit: contain ;
}
.side-box .box-body .side-list a{
    font-size: 14px;
}
.side-box .box-body .vbtl-thoigian{
    font-size: 12px;
    font-style: italic;
}

/*-------------*/
.npl-main-box-news-title>.npl-box-news-title{border-bottom: 2px solid #e50006}
.npl-main-box-news-title>.npl-box-news-title>a, .block .tandan-p-article-other{
    padding: 10px 5px 7px 55px;
    background: var(--b1);
    position: relative;
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
    display: inline-block;
    background-image: url('../images/icon/icon-title.png');
    background-position: left center;
    background-size: auto 100%;
    background-position-x: 0;
    background-repeat: no-repeat;
    font-family: arial;
}
.npl-main-box-news-title>.npl-box-news-title>a:after {
    top: 0;
    left: 100%;
    right: 0;
    position: absolute;
    content: '';
    height: 100%;
    width: 40px;
    background: url('../images/icon/bg-title.svg');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.home-main-menu-npl{

}
.home-main-menu-npl i{
    font-size:32px;
    color:#ffffff;
    padding-right:8px;
}
/*-------------thư viện ảnh----------------*/
.gallery-swiper .g-item {
    position: relative; overflow: hidden; border: 1px solid #e5e8eb; background: #fff;
}
.gallery-swiper img {
    width: 100%; height: 150px; object-fit: cover; transition: transform .35s ease;
}
.gallery-swiper .g-item:hover img { transform: scale(1.05); }
.gallery-swiper .caption {
    position:absolute; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.55); color:#fff; padding:.35rem .5rem;
    font-size:.9rem;
}

.tieude-lienhe {
    padding-top: 5px;
    padding-bottom: 15px;
    margin-bottom: 10px;
}
.tieude-lienhe::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 11px;
    bottom: 0;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    left: 50%;
    margin-left: -30px;
}
.tieude-lienhe::after {
    position: absolute;
    content: "";
    height: 1px;
    bottom: 5px;
    background: var(--b1);
    width: 120px;
    left: 50%;
    margin-left: -60px;
}
.tieude-lienhe .span-title-section{
    text-transform: uppercase;
    font-size: 22px;
    color:var(--b1);
}
.plus-list{
    padding-left:0;
}
.plus-list li{
    list-style: none;
}
.plus-list li::before {
    content: "+ ";   /* thêm dấu + */
    margin-right: 4px;
    color: #000000;  /* màu xanh Bootstrap (có thể đổi) */
}
.box-body .list-ul-gioithieu li{
    border-bottom: 1px dashed var(--border-cl);
    padding: 5px 0 5px 0;
}
span.posted-date {
    color: #888;
    margin: 6px 0;
    font-style: italic;
    font-size: 12px;
}

.bg-image-sidebar-npl { position: relative; }
.bg-image-sidebar-npl img { display:block; width:100%; height:auto; }
.bg-image-sidebar-npl > a { position:absolute; inset:0; display:block; }
.bg-image-sidebar-npl .mask { position:absolute; inset:0; }

/* Modal nền đen, bỏ shadow/bo tròn (phòng khi theme có style riêng) */
.video-fullscreen-content {
    background: #000;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

/* Iframe phủ kín khung fullscreen */
.video-iframe {
    display: block;
    width: 100%;
    height: 100vh;          /* phủ toàn màn hình theo chiều cao */
    border: 0;
}

/* Nút X lớn, cố định góc phải trên, luôn nổi trên video */
.video-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1056;          /* cao hơn modal backdrop & nội dung */
    filter: invert(1);      /* đảm bảo màu trắng nổi bật nếu theme thay đổi */
    opacity: 0.9;
}
.video-close:hover { opacity: 1; }

/* Nếu muốn thêm “nút tròn nền mờ” sau nút X (giống ảnh minh hoạ) */
.video-close::before {
    content: "";
    position: absolute;
    inset: -10px;           /* tạo vòng tròn to hơn nút X */
    border-radius: 999px;
    background: rgba(0,0,0,.35);  /* nền tròn mờ */
}
.nhatpl_error,.show-error-messenger-file{
    color:red;
}
.nhatpl_success{
    color:blue;
}