/* =====================================================================
   Giao dien hien dai - Truong PTDTBT THCS Pa Ham
   Mot ngon ngu thiet ke duy nhat cho: khoi dau trang, cac chuyen muc (body) va cot phai
   ===================================================================== */
:root {
    --pm-blue: #1565c0; --pm-blue-dark: #0d3f8c; --pm-navy: #12296b; --pm-soft: #eef4fc;
    --pm-line: #e4ebf5; --pm-text: #26324b; --pm-muted: #7a8699;
    --pm-radius: 18px; --pm-shadow: 0 6px 22px rgba(15, 60, 130, .08);
}
body { background: #e9eff6 !important; }
/* khoang cach chung */
.row-home-top { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 14px; row-gap: 14px; }
.row-home-top > [class*="col-"] { display: flex; padding-top: 0; padding-bottom: 0; }
.row-home-top > [class*="col-"] > * { width: 100%; }
#body > .row { margin-top: 0; }
#body > .row:has(.slogan-banner) { margin: 18px 0 !important; }
#body > .row:has(.mainright-column) { margin-top: 0; }

/* ---------- THE (card) dung chung ---------- */
.photo-block, .panel, .mainright-card, .block_album_tab_new {
    background: #fff !important; border: 1px solid var(--pm-line) !important; border-radius: var(--pm-radius) !important;
    box-shadow: var(--pm-shadow) !important; overflow: hidden; margin-bottom: 0;
}
.panel { margin: 0 0 16px !important; }
.news_column { margin-bottom: 20px !important; }
.news_column:last-child { margin-bottom: 0 !important; }

/* ---------- Tieu de khoi: phang, 1 phong cach ---------- */
.panel > .panel-heading, .photo-block-head {
    display: flex !important; align-items: center; gap: 10px; padding: 13px 18px !important; margin: 0 !important;
    background: #fff !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--pm-line) !important;
    border-radius: 0 !important; box-shadow: none !important; color: var(--pm-navy) !important; min-height: 0 !important; position: relative;
}
.panel > .panel-heading::before, .photo-block-head::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: var(--pm-blue); flex: 0 0 4px; }
.panel > .panel-heading .heading-icon { display: none !important; }
.panel > .panel-heading .heading-text, .photo-block-title {
    flex: 1; margin: 0 !important; padding: 0 !important; font-size: 14.5px !important; font-weight: 800 !important; letter-spacing: .3px; text-transform: uppercase; color: var(--pm-navy) !important; text-shadow: none !important; line-height: 1.3;
}
.panel > .panel-heading .heading-arrow { color: var(--pm-muted) !important; font-size: 15px; }
.panel > .panel-body { padding: 14px 16px !important; background: transparent !important; }
.photo-block-body { padding: 14px 16px 16px; }
.photo-block-body .MagicSlideshow, .photo-block-body img { border-radius: 14px; overflow: hidden; }
/* mau nhan rieng cho tung khoi (chi la cham mau nho o thanh dung) */
.panel-noi-tru > .panel-heading::before { background: #f59e0b; }
.panel-van-ban > .panel-heading::before { background: #16a34a; }
.panel-video > .panel-heading::before { background: #e11d48; }
.panel-hop-tac > .panel-heading::before { background: #7c3aed; }
.panel-tin-moi > .panel-heading::before { background: #0891b2; }

/* ---------- Tin moi nhat / Van ban moi (hang tren) ---------- */
.news-ticker-item { border-bottom: 1px dashed var(--pm-line) !important; padding: 10px 0 !important; }
.news-ticker-item:last-child { border-bottom: 0 !important; }
.news-ticker-thumb img { border-radius: 8px; }
.news-ticker-title { color: var(--pm-text) !important; font-weight: 700; font-size: 13.5px; line-height: 1.45; }
.news-ticker-item a:hover .news-ticker-title { color: var(--pm-blue) !important; }
.panel-van-ban .panel-body { text-align: left; }
.panel-van-ban .panel-body * { text-align: left !important; }

/* ---------- Banner khau hieu: gon, bo goc ---------- */
.slogan-banner { width: 100%; height: 240px !important; object-fit: cover; object-position: center 58%; border-radius: var(--pm-radius) !important; box-shadow: var(--pm-shadow); display: block; }
.image-center { margin: 0 !important; padding: 0 !important; }

/* ---------- Cac chuyen muc (body) ---------- */
.mainright-card { padding: 0 !important; }
.edu-block-heading { padding: 0 !important; margin: 0 !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--pm-line) !important; }
.edu-block-head { display: flex !important; align-items: center; gap: 10px; padding: 13px 18px !important; background: none !important; margin: 0 !important; position: relative; }
.edu-block-head::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: var(--pm-blue); flex: 0 0 4px; }
.edu-block-head::before, .edu-block-title::before, .edu-block-title::after { background-image: none; }
.edu-block-logo, .edu-block-accent { display: none !important; }
.edu-block-title { background: none !important; clip-path: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; }
.edu-block-title a { color: var(--pm-navy) !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .3px; text-transform: uppercase; text-shadow: none !important; background: none !important; }
.edu-block-title a::after { content: "Xem tất cả \203A"; margin-left: 10px; font-size: 11.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--pm-blue); background: var(--pm-soft); padding: 3px 10px; border-radius: 999px; vertical-align: 2px; }
.news_column:nth-of-type(1) .edu-block-head::before { background: var(--pm-blue); }
.news_column:nth-of-type(2) .edu-block-head::before { background: #f59e0b; }
.news_column:nth-of-type(3) .edu-block-head::before { background: #16a34a; }
.news_column:nth-of-type(4) .edu-block-head::before { background: #e11d48; }
.news_column:nth-of-type(5) .edu-block-head::before { background: #7c3aed; }
.mainright-body { padding: 16px 18px 18px !important; background: #fff !important; }
.mainright-body > .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.mainright-body > .row > [class*="col-"] { padding: 0 8px; float: none; }
.mainright-featured-img { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: #dfe7f3; }
.mainright-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.mainright-featured-img:hover img { transform: scale(1.04); }
.mainright-featured-title { margin: 12px 0 6px !important; font-size: 18px; line-height: 1.4; font-weight: 800; }
.mainright-featured-title a { color: var(--pm-navy) !important; text-decoration: none; }
.mainright-featured-title a:hover { color: var(--pm-blue) !important; }
.mainright-featured-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--pm-muted); }
.mainright-featured-meta em { color: var(--pm-muted); }
.mainright-featured-text { margin-top: 8px; font-size: 13.5px; color: #4a566c; line-height: 1.55; }
.mainright-related-list { list-style: none; margin: 0; padding: 0; }
.mainright-related-list li { padding: 10px 0 !important; border-bottom: 1px solid var(--pm-line) !important; background: none !important; }
.mainright-related-list li:first-child { padding-top: 0 !important; }
.mainright-related-list li:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
.mainright-related-list a { display: flex; gap: 12px; text-decoration: none; align-items: flex-start; }
.mainright-related-thumb { flex: 0 0 92px; width: 92px; height: 64px; border-radius: 10px; overflow: hidden; background: #dfe7f3; display: block; }
.mainright-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mainright-related-title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--pm-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mainright-related-excerpt { display: none; }
.mainright-related-list a:hover .mainright-related-title { color: var(--pm-blue); }
/* mon tuyen sinh (muc con) */
.mainright-subcat, .mainright-subcats { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.mainright-subcats a, .mainright-subcat a { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--pm-soft); color: var(--pm-blue); font-size: 12.5px; font-weight: 700; text-decoration: none; }

/* ---------- Cot phai: cung ngon ngu, dinh (sticky) de khong bi trong ---------- */
.col-md-6:has(> .panel-hop-tac) { align-self: flex-start; }
.search-doc-field { border-radius: 12px !important; border: 1px solid var(--pm-line) !important; background: #f7f9fd !important; }
.search-doc-btn { border-radius: 12px !important; background: linear-gradient(135deg, #1565c0, #1e88e5) !important; box-shadow: 0 6px 14px rgba(21, 101, 192, .28) !important; }
.video-block-item { border-bottom: 1px solid var(--pm-line); }
.video-block-item:last-child { border-bottom: 0; }
.video-block-thumb { border-radius: 10px !important; }
.video-block-title { color: var(--pm-text) !important; font-weight: 700; }

/* ---------- Thu vien anh duoi trang ---------- */
.block_album_tab_new { margin-top: 20px; padding-bottom: 6px; }
@media (max-width: 991px) { .row-home-top > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } }
.photo-block-head::after { display: none !important; }
.photo-block-title::after, .photo-block-head .line { display: none !important; }
.mainright-featured-img { position: relative; }
.mainright-featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-block-info, .video-block-info * { text-align: left !important; }
.panel-tin-moi .panel-body *, .panel-van-ban .panel-body * { text-align: left !important; }
.news-ticker-title { text-align: left !important; }
.mainright-featured-img { height: auto !important; aspect-ratio: 16 / 10 !important; }
.mainright-featured-img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; }
.mainright-subbar { display: none !important; }

/* ===== Banner dau trang (da co san logo + ten truong) ===== */
.banner-logo { display: none !important; }
#sologan { position: absolute; left: -9999px; }

/* ===== Anh quang cao giua trang ===== */
.slogan-banner { height: auto !important; object-fit: initial !important; aspect-ratio: 2172 / 404; }

/* ===== Chan trang: anh nen moi + the kinh mo ===== */
footer.dtnt-footer#footer {
    background: #0b4aa8 url(../images/dtnt/footer-thcs-pa-ham.webp) center bottom / cover no-repeat !important;
    padding-top: 190px !important; border-top: 0 !important; position: relative;
}
footer.dtnt-footer#footer::before, footer.dtnt-footer#footer::after { display: none !important; }
footer.dtnt-footer#footer .dtnt-footer-main { background: transparent !important; padding: 0 !important; }
footer.dtnt-footer#footer .dtnt-footer-main > .dtnt-wrap {
    width: auto; max-width: none; margin: 0 16px; padding: 22px 28px 16px;
    background: rgba(7, 49, 132, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .22); border-bottom: 0; border-radius: 20px 20px 0 0;
}
footer.dtnt-footer#footer .dtnt-footer-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; gap: 28px; }
footer.dtnt-footer#footer, footer.dtnt-footer#footer a, footer.dtnt-footer#footer p, footer.dtnt-footer#footer small, footer.dtnt-footer#footer span { color: #eaf2ff !important; text-shadow: none !important; }
footer.dtnt-footer#footer h3 { color: #ffd54a !important; font-size: 14.5px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px; }
footer.dtnt-footer#footer h3::after { background: #ffd54a !important; }
footer.dtnt-footer#footer .dtnt-footer-links ul { columns: 2; column-gap: 18px; list-style: none; margin: 0; padding: 0; }
footer.dtnt-footer#footer .dtnt-footer-links li { break-inside: avoid; padding: 4px 0; border: 0 !important; }
footer.dtnt-footer#footer .dtnt-footer-links li a:hover { color: #fff !important; text-decoration: underline; }
footer.dtnt-footer#footer .dtnt-footer-logo img { background: #fff; border-radius: 50%; padding: 3px; width: 64px; height: 64px; }
footer.dtnt-footer#footer .dtnt-footer-logo strong { color: #fff !important; }
footer.dtnt-footer#footer .dtnt-footer-bottom { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 16px; }
footer.dtnt-footer#footer .dtnt-footer-bottom > .dtnt-wrap {
    width: auto; max-width: none; padding: 10px 28px; background: rgba(4, 33, 96, .94);
    border: 1px solid rgba(255, 255, 255, .22); border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0 0 20px 20px;
}
@media (max-width: 991px) { footer.dtnt-footer#footer { padding-top: 120px !important; } footer.dtnt-footer#footer .dtnt-footer-grid { grid-template-columns: 1fr; } }
footer.dtnt-footer#footer .dtnt-footer-main > .dtnt-wrap, footer.dtnt-footer#footer .dtnt-footer-bottom > .dtnt-wrap { box-sizing: border-box; width: 900px !important; max-width: calc(100% - 32px) !important; margin: 0 auto !important; }
footer.dtnt-footer#footer .dtnt-footer-bottom { margin: 0 !important; }
footer.dtnt-footer#footer .dtnt-footer-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 22px; }
footer.dtnt-footer#footer .dtnt-footer-main > .dtnt-wrap { padding: 20px 24px 14px; }
footer.dtnt-footer#footer { padding-top: 130px !important; }

/* ===== Menu ngang: lay mau nen tu banner (xanh #0a60b6 + vang) ===== */
.second-nav .bg, #menusite .navbar-default, #menusite .navbar { background: #0a60b6 !important; background-image: none !important; }
.second-nav .bg { border-radius: 0 0 16px 16px !important; border-bottom: 4px solid #fde030 !important; box-shadow: 0 8px 18px rgba(8, 60, 130, .22) !important; }
#menusite .navbar-default .navbar-nav > li > a { color: #fff !important; background: transparent !important; text-shadow: none !important; font-weight: 700; border-radius: 999px; margin: 6px 3px; padding-top: 9px !important; padding-bottom: 9px !important; line-height: 1.2; }
#menusite .navbar-default .navbar-nav > li > a::after { display: none !important; }
#menusite .navbar-default .navbar-nav > li > a:hover, #menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .active > a, #menusite .navbar-default .navbar-nav > .active > a:hover, #menusite .navbar-default .navbar-nav > .active > a:focus,
#menusite .navbar-default .navbar-nav > .open > a, #menusite .navbar-default .navbar-nav > .open > a:hover, #menusite .navbar-default .navbar-nav > .open > a:focus {
    background: #fde030 !important; color: #0b3a7a !important; box-shadow: 0 3px 8px rgba(0, 40, 100, .25);
}
#menusite .navbar-default .navbar-nav > li > a.home { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
#menusite .navbar-default .navbar-nav > li > a.home:hover { background: #fde030 !important; color: #0b3a7a !important; }
#menusite .dropdown-menu { border: 0; border-radius: 14px; box-shadow: 0 14px 30px rgba(8, 40, 100, .28); overflow: hidden; margin-top: 6px; }
/* sua loi mat hover khi di chuot xuong menu xo: khong de khoang ho giua muc menu va danh sach */
#menusite .dropdown-menu { margin-top: 0 !important; top: 100% !important; }
#menusite .navbar-nav > li.dropdown { position: relative; }
#menusite .navbar-nav > li.dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
#menusite .navbar-nav > li > .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

/* ===== Chan trang hoa vao phan tren: keo len, anh nen mo dan o mep tren ===== */
.section-body { position: relative; z-index: 2; }
footer.dtnt-footer#footer { background: none !important; margin-top: -150px !important; padding-top: 170px !important; position: relative; z-index: 1; }
footer.dtnt-footer#footer::before {
    content: "" !important; display: block !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none;
    background: url(../images/dtnt/footer-thcs-pa-ham.webp) center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 22%, #000 46%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 22%, #000 46%);
}
footer.dtnt-footer#footer > * { position: relative; z-index: 1; }
@media (max-width: 991px) { footer.dtnt-footer#footer { margin-top: -60px !important; padding-top: 90px !important; } }
footer.dtnt-footer#footer::before { height: 100% !important; top: 0 !important; bottom: 0 !important; width: 100% !important; }
.section-body, .section-body .wraper, .section-body section, .section-body #body { background: transparent !important; background-image: none !important; box-shadow: none !important; }
footer.dtnt-footer#footer { margin-top: -50px !important; padding-top: 130px !important; }