/* ==========================================================
Giao diện THPT Tuần Giáo - Kỷ niệm 60 năm (1966 - 2026)
Dựng theo mẫu "giao dien 2": nền sáng, thẻ bo tròn, menu nổi
========================================================== */
:root {
--tg-blue: #1450b5;
--tg-blue-d: #0b3d91;
--tg-navy: #12306b;
--tg-blue-l: #e8f0fc;
--tg-red: #e5252f;
--tg-red-d: #c8102e;
--tg-gold: #f5b301;
--tg-text: #27385f;
--tg-muted: #6b7690;
--tg-line: #e6edf8;
--tg-radius: 18px;
--tg-shadow: 0 4px 18px rgba(20, 80, 181, .10);
}
html, body { overflow-x: clip; }
body {
font-family: Roboto, "Segoe UI", Arial, sans-serif;
color: var(--tg-text);
background: linear-gradient(180deg, #e9f2fd 0, #eff5fd 500px, #f3f8fe 100%) fixed;
}
a { color: var(--tg-blue); }
a:hover, a:focus { color: var(--tg-red); text-decoration: none; }
.list-none, .list-none li { list-style: none; margin: 0; padding: 0; }
.tg-wrap { width: min(1220px, 100% - 40px); margin: 0 auto; }
#body.tg-wrap { width: min(1250px, 100% - 10px); padding: 0 15px; }
/* ---------- Thanh trên cùng ---------- */
.tg-topbar { background: linear-gradient(90deg, #0a3a8c, #0b47a6 55%, #0a3d95); color: #fff; font-size: 13px; }
.tg-topbar a { color: #fff; }
.tg-topbar a:hover { color: var(--tg-gold); }
.tg-topbar-in { display: flex; align-items: center; justify-content: space-between; min-height: 46px; flex-wrap: wrap; gap: 6px 22px; }
.tg-topbar-info { display: flex; gap: 0; flex-wrap: wrap; align-items: center; }
.tg-topbar-info li { padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, .28); }
.tg-topbar-info li:first-child { padding-left: 0; border-left: 0; }
.tg-topbar-info .fa { margin-right: 7px; font-size: 16px; vertical-align: -1px; }
.tg-topbar-right { display: flex; align-items: center; gap: 22px; }
.tg-toplinks { display: flex; align-items: center; }
.tg-toplinks li { padding: 0 14px; border-left: 1px solid rgba(255, 255, 255, .28); }
.tg-toplinks li:first-child { border-left: 0; }
.tg-topsearch { width: 240px; }
.tg-topsearch .input-group { display: flex; }
.tg-topsearch .form-control { height: 32px; padding: 2px 14px; font-size: 13px; border: 0; border-radius: 18px 0 0 18px; box-shadow: none; background: #fff; flex: 1; }
.tg-topsearch .input-group-btn { width: auto; }
.tg-topsearch .btn { height: 32px; padding: 0 14px 0 6px; border: 0; background: #fff; color: var(--tg-blue); border-radius: 0 18px 18px 0; }
.tg-topsearch .btn:hover { color: var(--tg-red); background: #fff; }
/* ---------- Banner + menu nổi ---------- */
.tg-hero { line-height: 0; background: #cfe3fb; }
.tg-hero-bg { display: block; width: 100%; height: clamp(170px, 33.3vw, 660px); background: url("../images/tg/hero4.jpg?v=1") center top / cover no-repeat; }
/* nút Trang chủ luôn đỏ */
/* ---------- Khung nội dung ---------- */
.section-body { background: transparent; padding-top: 18px; }
.section-body .wraper { background: transparent; }
.third-nav .bg { background: #fff; border-radius: 14px; box-shadow: var(--tg-shadow); padding: 6px 14px; margin-bottom: 14px; border: 0; }
.breadcrumbs-wrap .breadcrumbs li a { color: var(--tg-blue); }
.current-time { color: var(--tg-muted); font-size: 12.5px; }
body:has(.tg-home) .tg-contentrow, body:has(.tg-home) .third-nav { display: none; }
.section-body .panel, .section-body .panel-default { border: 0; border-radius: 16px; box-shadow: var(--tg-shadow); overflow: hidden; background: #fff; }
.section-body .panel-heading { background: #fff !important; border: 0; border-bottom: 2px solid var(--tg-line); padding: 13px 18px; position: relative; font-size: 17px; font-weight: 700; text-transform: none; }
.section-body .panel-heading::after { content: ""; position: absolute; left: 18px; bottom: -2px; width: 56px; height: 3px; background: var(--tg-red); border-radius: 2px; }
.section-body .panel-heading, .section-body .panel-heading * { color: var(--tg-blue) !important; text-shadow: none; }
.section-body .panel-heading .cat-icon, .section-body .panel-heading h4 { margin: 0; font-size: 17px; }
.section-body .panel-heading a:hover, .section-body .panel-heading a:hover span { color: var(--tg-red) !important; }
.section-body .panel-body { background: #fff; }
.section-body h2 a, .section-body h3 a { color: var(--tg-navy); }
.section-body h2 a:hover, .section-body h3 a:hover { color: var(--tg-red); }
.img-thumbnail { border-radius: 10px; border-color: var(--tg-line); }
.btn, .form-control { border-radius: 10px; }
.section-body .btn-info, .section-body .btn-primary { background: var(--tg-blue); border-color: var(--tg-blue); }
.section-body .btn-info:hover, .section-body .btn-primary:hover { background: var(--tg-red); border-color: var(--tg-red); }
/* ==========================================================
TRANG CHỦ
========================================================== */
.tg-home { padding-bottom: 0; }
.tg-top { display: grid; grid-template-columns: 1.9fr 1fr; gap: 16px; margin-bottom: 16px; }
/* Slider tiêu điểm */
.tg-slider { position: relative; height: 372px; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 22px rgba(20, 80, 181, .18); background: var(--tg-blue-d); }
.tg-slides, .tg-slide { position: absolute; inset: 0; }
.tg-slide { background-size: cover; background-position: center; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.tg-slide.active { opacity: 1; pointer-events: auto; }
.tg-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 16, 48, .94) 0%, rgba(5, 16, 48, .62) 32%, rgba(5, 16, 48, 0) 68%); }
.tg-slide-link { position: absolute; inset: 0; z-index: 2; }
.tg-slide-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 70px 20px 26px; color: #fff; pointer-events: none; }
.tg-slide-cap a { pointer-events: auto; }
.tg-slide-badge { display: inline-block; background: var(--tg-red); color: #fff; border-radius: 5px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.tg-slide-cap h3 { margin: 10px 0 8px; font-size: 27px; line-height: 1.25; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-slide-cap h3 a, .tg-slide-cap h3 a:hover { color: #fff !important; }
.tg-slide-cap p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #e7edfa; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tg-btn { display: inline-block; background: #fff; color: var(--tg-navy) !important; padding: 8px 20px; border-radius: 9px; font-size: 13.5px; font-weight: 600; transition: background .2s; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.tg-btn:hover { background: var(--tg-gold); color: #3b2a00 !important; }
.tg-btn .fa { margin-left: 6px; }
.tg-nav { position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1f5bd6; display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.tg-nav:hover { color: var(--tg-red); background: #fff; }
.tg-prev { left: 10px; }
.tg-next { right: 10px; }
.tg-dots { position: absolute; z-index: 4; right: 18px; bottom: 16px; display: flex; gap: 6px; }
.tg-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); cursor: pointer; }
.tg-dots span.active { background: #fff; width: 18px; border-radius: 5px; }
/* Thông báo / Sự kiện */
.tg-notice { background: #fff; border-radius: 18px; box-shadow: var(--tg-shadow); overflow: hidden; display: flex; flex-direction: column; height: 372px; }
.tg-tabs { display: flex; align-items: stretch; flex: 0 0 auto; border-bottom: 1px solid var(--tg-line); }
.tg-tab { position: relative; display: flex; align-items: center; gap: 9px; padding: 0 24px; height: 50px; font-size: 15px; font-weight: 700; color: #1f5bd6; background: #e8f1fd; }
.tg-tab .fa { font-size: 18px; }
.tg-tab.active { background: linear-gradient(180deg, #ee3640, #d81e2b); color: #fff; }
.tg-tab.active::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #d81e2b; z-index: 2; }
.tg-all { margin-left: auto; align-self: center; padding-right: 18px; font-size: 12.5px; font-weight: 600; color: #1f5bd6; white-space: nowrap; }
.tg-all .fa { margin-left: 4px; }
.tg-notice-body { flex: 1; overflow: hidden; }
.tg-notice-list { display: none; padding: 4px 16px 0; }
.tg-notice-list.active { display: block; }
.tg-notice-list li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--tg-line); }
.tg-notice-list li:last-child { border-bottom: 0; }
.tg-notice-list li a { flex: 1; font-size: 14px; line-height: 1.4; color: var(--tg-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-notice-list li a:hover { color: var(--tg-red); }
.tg-date { flex: 0 0 56px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #e8f0fc; border-radius: 9px; line-height: 1.1; }
.tg-date b { font-size: 21px; color: #1d4fa8; font-weight: 700; }
.tg-date i { font-style: normal; font-size: 10.5px; color: #5a76ab; }
.tg-new { background: var(--tg-red); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; padding: 3px 8px; border-radius: 5px; }
/* Ô truy cập nhanh */
.tg-quick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 10px; margin-bottom: 18px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); border-radius: 26px; box-shadow: var(--tg-shadow); }
.tg-quick-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; min-height: 84px; padding: 10px 6px; border-radius: 14px; color: #0f2f6b; font-weight: 700; font-size: 11.5px; text-transform: uppercase; line-height: 1.25; transition: transform .2s, box-shadow .2s; }
.tg-quick-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(20, 80, 181, .18); color: var(--tg-red); }
.tg-quick-ic { font-size: 32px; line-height: 1; height: 36px; display: flex; align-items: center; }
.tg-quick-ic img { height: 38px; width: 38px; border-radius: 50%; object-fit: cover; }
.q1 { background: #e5eefb; } .q1 .tg-quick-ic { color: #1e5fd6; }
.q2 { background: #ece9fb; }
.q3 { background: #fdf2de; } .q3 .tg-quick-ic { color: #1b7f86; }
.q4 { background: #e2eefc; } .q4 .tg-quick-ic { color: #2468e0; }
.q5 { background: #e2eefc; } .q5 .tg-quick-ic { color: #1f6fe5; }
.q6 { background: #fde8e7; } .q6 .tg-quick-ic { color: #d9262e; }
.q7 { background: #fde8e7; } .q7 .tg-quick-ic { color: #e0392b; }
.q8 { background: #e6ecfb; } .q8 .tg-quick-ic { color: #e0392b; }
/* Tin nổi bật + Hình ảnh - Video */
.tg-mid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 16px; align-items: stretch; }
.tg-card { background: #fff; border-radius: 18px; box-shadow: var(--tg-shadow); padding: 16px 20px 20px; }
.tg-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 11px; margin-bottom: 16px; border-bottom: 1px solid var(--tg-line); }
.tg-card-ic { flex: 0 0 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fde8ea; color: var(--tg-red); font-size: 18px; }
.tg-card-head h2 { flex: 1; margin: 0; font-size: 21px; font-weight: 700; color: var(--tg-blue); line-height: 1.2; }
.tg-card-head h2.tg-red { color: #e02b2b; }
.tg-more { font-size: 12.5px; font-weight: 600; color: var(--tg-blue); white-space: nowrap; }
.tg-more .fa { margin-left: 4px; }
.tg-news-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.tg-feat-img { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9.3; background: #dfe8f6; }
.tg-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.tg-feat-img:hover img { transform: scale(1.04); }
.tg-badge { position: absolute; left: 10px; bottom: 10px; background: var(--tg-red); color: #fff; border-radius: 6px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.tg-feat h3 { margin: 13px 0 8px; font-size: 19px; line-height: 1.35; font-weight: 700; }
.tg-feat h3 a { color: var(--tg-navy); }
.tg-feat p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: #5d6a85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tg-meta { display: flex; gap: 20px; font-size: 12.5px; color: var(--tg-muted); }
.tg-meta .fa { margin-right: 5px; }
.tg-news-list .tg-item { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--tg-line); }
.tg-news-list .tg-item:first-child { padding-top: 0; }
.tg-news-list .tg-item:last-child { border-bottom: 0; padding-bottom: 0; }
.tg-item-img { flex: 0 0 132px; height: 82px; border-radius: 8px; overflow: hidden; background: #dfe8f6; }
.tg-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-item h4 { margin: 0 0 8px; font-size: 14.5px; line-height: 1.38; font-weight: 700; }
.tg-item h4 a { color: var(--tg-navy); }
.tg-item h4 a:hover { color: var(--tg-red); }
.tg-seg { display: flex; background: #eceff4; border-radius: 9px; margin-bottom: 14px; }
.tg-seg a { flex: 1; text-align: center; padding: 7px 10px; font-size: 13.5px; font-weight: 600; color: #4a5878; border-radius: 9px; }
.tg-seg a.active { background: #1a7be8; color: #fff; }
.tg-grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tg-grid.active { display: grid; }
.tg-ph { position: relative; display: block; aspect-ratio: 5 / 6; border-radius: 10px; overflow: hidden; background: #dfe8f6; }
.tg-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.tg-ph:hover img { transform: scale(1.07); }
.tg-vid .fa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 38px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.tg-empty { grid-column: 1 / -1; text-align: center; color: var(--tg-muted); padding: 30px 0; }
.tg-empty .fa { display: block; font-size: 34px; color: var(--tg-red); margin-bottom: 6px; }
/* Dải thống kê (tràn hết chiều ngang) */
.tg-stats { position: relative; width: 100vw; margin: 28px 0 0 calc(50% - 50vw); padding: 5.2vw 0 70px;
background: url("../images/tg/strip.jpg?v=1") center top / 100% auto no-repeat, linear-gradient(180deg, #eef5fd 0, #eef5fd 6vw, #d6e7f9 100%); }
.tg-stats::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(180deg, #edf4fc, rgba(237, 244, 252, 0)); pointer-events: none; }
.tg-stats::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; background: url("data:image/svg+xml;utf8,") center bottom / 100% 100% no-repeat; }
.tg-stats-grid { position: relative; z-index: 2; width: min(1220px, 100% - 40px); margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tg-stat { text-align: center; padding: 18px 8px 16px; border-radius: 16px; background: rgba(255, 255, 255, .85); box-shadow: 0 4px 16px rgba(20, 80, 181, .12); border: 1px solid rgba(255, 255, 255, .9); }
.tg-stat .fa { font-size: 30px; margin-bottom: 6px; display: block; }
.tg-stat b { display: block; font-size: 23px; line-height: 1.2; font-weight: 700; }
.tg-stat span { font-size: 13.5px; color: #34456b; }
.s1 { background: linear-gradient(180deg, #ffe4e3, #fff); } .s1 .fa, .s1 b { color: #d3202a; }
.s2 { background: linear-gradient(180deg, #dcebff, #fff); } .s2 .fa { color: #1e6fd9; } .s2 b { color: #1d4fa8; }
.s3 { background: linear-gradient(180deg, #d6f7ea, #fff); } .s3 .fa { color: #12a37f; } .s3 b { color: #0f7a3a; }
.s4 { background: linear-gradient(180deg, #ffe9cf, #fff); } .s4 .fa, .s4 b { color: #f08a00; }
.s5 { background: linear-gradient(180deg, #e9defd, #fff); } .s5 .fa, .s5 b { color: #7a2fd0; }
.s6 { background: linear-gradient(180deg, #ffdfe8, #fff); } .s6 .fa, .s6 b { color: #d8336a; }
/* ---------- Chân trang ---------- */
#footer.section-footer-top { background: linear-gradient(180deg, #0b3f95, #072d6b); color: #dbe6fb; margin: 0; border: 0; padding: 20px 0 22px; }
#footer a { color: #e6eeff; }
#footer a:hover { color: var(--tg-gold); }
.tg-foot { display: grid; grid-template-columns: 1.35fr .6fr .6fr 1.3fr; gap: 30px; align-items: start; }
.tg-foot-school { display: flex; gap: 18px; align-items: flex-start; }
.tg-foot-logo { flex: 0 0 98px; width: 98px; height: 98px; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.tg-foot-school h3 { margin: 4px 0 10px; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: .3px; }
.tg-foot-school p { margin: 0 0 7px; font-size: 13px; color: #e6eeff; }
.tg-foot-school .fa { width: 20px; color: #fff; }
.tg-foot-col h4 { margin: 4px 0 12px; font-size: 16px; font-weight: 600; color: #fff; }
.tg-foot-col li { margin-bottom: 7px; font-size: 13px; }
.tg-foot-col li::before { content: "\203A"; margin-right: 8px; color: #fff; font-weight: 700; }
.tg-foot-art { position: relative; min-height: 130px; }
.tg-foot-slogan { position: relative; z-index: 2; font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive; font-style: italic; font-size: 25px; line-height: 1.3; color: #fff; padding-left: 16px; }
.tg-foot-slogan span { display: block; font-size: 25px; padding-left: 22px; }
.tg-foot-art svg { position: absolute; right: 0; bottom: -6px; width: 100%; max-width: 430px; }
.tg-foot-site .copyright { display: none; }
.tg-foot-site:empty { display: none; }
.section-footer-bottom { background: #05245c; color: #cfe0ff; font-size: 12.5px; padding: 10px 0; }
.tg-foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.tg-foot-bottom .qr-code-wraper .btn { font-size: 11px; padding: 1px 8px; background: rgba(255, 255, 255, .15); border: 0; color: #fff !important; }
.tg-foot-links { display: flex; }
.tg-foot-links li { padding: 0 16px; border-left: 1px solid rgba(255, 255, 255, .3); }
.tg-foot-links li:first-child { border-left: 0; }
.tg-foot-links li:last-child { padding-right: 0; }
.section-footer-bottom .bttop { position: fixed; right: 22px; bottom: 26px; z-index: 90; }
.section-footer-bottom .bttop a { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: #1a6fe6; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); font-size: 18px; }
.section-footer-bottom .bttop a:hover { background: var(--tg-red); }
/* ---------- Đáp ứng ---------- */
@media (max-width: 1199px) {
.tg-quick-item { font-size: 10.5px; }
}
@media (max-width: 991px) {
.tg-top, .tg-mid { grid-template-columns: 1fr; }
.tg-notice { height: auto; }
.tg-slider { height: 320px; }
.tg-quick { grid-template-columns: repeat(4, 1fr); }
.tg-stats-grid { grid-template-columns: repeat(3, 1fr); }
.tg-foot { grid-template-columns: 1fr 1fr; }
.tg-foot-school { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.tg-topbar-in { justify-content: center; }
.tg-topsearch { width: 100%; }
.tg-topbar-right { width: 100%; }
.tg-slider { height: 250px; }
.tg-slide-cap { padding: 0 14px 18px; }
.tg-slide-cap h3 { font-size: 17px; }
.tg-slide-cap p { display: none; }
.tg-quick { grid-template-columns: repeat(2, 1fr); border-radius: 18px; }
.tg-news-in { grid-template-columns: 1fr; }
.tg-stats-grid { grid-template-columns: repeat(2, 1fr); }
.tg-foot { grid-template-columns: 1fr; }
.tg-foot-bottom { justify-content: center; text-align: center; }
}
/* ---------- Thư viện ảnh trong bài viết tư liệu ---------- */
.tg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; padding: 14px; background: linear-gradient(135deg, #3a2410, #5b3a1c); border-radius: 12px; }
.tg-gallery figure { margin: 0; border: 4px solid #f1e6cf; background: #f1e6cf; overflow: hidden; aspect-ratio: 4 / 3; }
.tg-gallery img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.5); transition: transform .3s, filter .3s; }
.tg-gallery figure:hover img { transform: scale(1.07); filter: none; }
.section-footer-bottom a, .section-footer-bottom .tg-foot-links a { color: #cfe0ff; } .section-footer-bottom a:hover { color: var(--tg-gold); }
.section-footer-bottom .theme-change { display: flex; align-items: center; justify-content: center; gap: 8px; float: none; height: auto; margin: 0 auto; padding: 0 0 12px; }
.section-footer-bottom .theme-change a, .section-footer-bottom .theme-change span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #cfe0ff; font-size: 16px; transition: background .2s, color .2s; }
.section-footer-bottom .theme-change span { background: var(--tg-gold); color: #3b2a00; }
.section-footer-bottom .theme-change a:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.section-footer-bottom .theme-change .fa { position: static; transform: none; }
.section-footer-bottom .theme-change .fa-mobile { font-size: 22px; }
.tg-foot-slogan, .tg-foot-slogan span { font-size: 22px; white-space: nowrap; }
/* ---------- Ảnh tư liệu (khối đặc biệt) ---------- */
.tg-tulieu { margin: 8px 0 18px; padding: 22px 18px 20px; border-radius: 14px; color: #fff; position: relative; overflow: hidden;
background: radial-gradient(ellipse at top, rgba(245, 179, 1, .18), transparent 60%), linear-gradient(135deg, #3a2410, #5b3a1c 55%, #3a2410); box-shadow: 0 6px 20px rgba(58, 36, 16, .35); }
.tg-tulieu-head { text-align: center; margin-bottom: 14px; }
.tg-tulieu-badge { display: inline-block; background: var(--tg-gold); color: #3b2a00; font-weight: 700; font-size: 12px; padding: 3px 14px; border-radius: 20px; letter-spacing: .5px; }
.tg-tulieu-head h2 { margin: 8px 0 4px; font-size: 26px; font-weight: 700; color: #ffe9b3; letter-spacing: .3px; }
.tg-tulieu-head p { margin: 0; color: #e8d3aa; font-size: 14px; font-style: italic; }
.tg-film { position: relative; background: #1a1008; border-radius: 6px; padding: 18px 0; box-shadow: inset 0 0 18px rgba(0, 0, 0, .6); }
.tg-film::before, .tg-film::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, #d9c9a8 0 14px, transparent 14px 28px); opacity: .55; }
.tg-film::before { top: 4px; }
.tg-film::after { bottom: 4px; }
.tg-film-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 44px; scrollbar-width: none; }
.tg-film-track::-webkit-scrollbar { display: none; }
.tg-film-item { position: relative; flex: 0 0 auto; margin: 0; height: 190px; scroll-snap-align: start; cursor: zoom-in; border: 3px solid #f1e6cf; background: #f1e6cf; transition: transform .25s; }
.tg-film-item:hover { transform: scale(1.04); z-index: 2; }
.tg-film-item img { height: 100%; width: auto; display: block; filter: sepia(.55) contrast(1.05); transition: filter .25s; }
.tg-film-item:hover img { filter: none; }
.tg-film-no { position: absolute; left: 4px; bottom: 4px; background: rgba(0, 0, 0, .65); color: #ffd873; font-size: 11px; padding: 0 6px; border-radius: 3px; }
.tg-film-nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(245, 179, 1, .92); color: #3b2a00; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.tg-film-nav:hover { background: #fff; color: #3b2a00; }
.tg-film-prev { left: 6px; }
.tg-film-next { right: 6px; }
.tg-tulieu-foot { text-align: center; margin-top: 14px; }
.tg-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; }
.tg-lb[hidden] { display: none; }
.tg-lb img { max-width: 88vw; max-height: 86vh; border: 6px solid #f1e6cf; box-shadow: 0 0 30px rgba(0, 0, 0, .8); }
.tg-lb-close { position: absolute; top: 14px; right: 24px; color: #fff; font-size: 38px; cursor: pointer; line-height: 1; }
.tg-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 56px; padding: 0 18px; line-height: 1; }
.tg-lb-prev { left: 8px; } .tg-lb-next { right: 8px; }
.tg-lb-cnt { position: absolute; bottom: 14px; color: #ffd873; font-size: 14px; }
.tg-tulieu { width: calc(100% - 10px); margin: 26px auto 30px; }
.tg-film-track { scroll-snap-type: none; } .tg-film-item { scroll-snap-align: none; }
.tg-tulieu-head p { margin-top: 12px; } .tg-tulieu-badge { font-size: 14px; padding: 5px 18px; }
#footer.section-footer-top { position: relative; margin-top: 60px; }
#footer.section-footer-top::before { content: ''; position: absolute; left: 0; right: 0; top: -63px; height: 64px; background: url("data:image/svg+xml;utf8,") center bottom / 100% 100% no-repeat; pointer-events: none; }
.tg-tulieu { margin-top: 6px; margin-bottom: 0; }
.tg-hero { width: min(1220px, 100% - 40px); margin: 14px auto 0; border-radius: 18px; overflow: hidden; background: transparent; box-shadow: 0 6px 22px rgba(20, 80, 181, .18); }
.tg-hero-bg { height: auto; aspect-ratio: 1280 / 511; background-size: cover; background-position: center; }
@media (max-width: 767px) { .tg-hero { width: 100%; margin-top: 0; border-radius: 0; } }
.tg-hero { margin-top: 0; border-radius: 0 0 18px 18px; }
/* Slider: chữ gọn ở đáy, nhường chỗ cho ảnh */
.tg-slide::after { background: linear-gradient(0deg, rgba(5, 16, 48, .9) 0%, rgba(5, 16, 48, .55) 20%, rgba(5, 16, 48, 0) 42%); }
.tg-slide-badge { position: absolute; z-index: 3; top: 16px; left: 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.tg-slide-cap { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: end; padding: 0 64px 16px 22px; }
.tg-slide-cap h3 { grid-column: 1; grid-row: 1; margin: 0 0 4px; font-size: 21px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.tg-slide-cap p { grid-column: 1; grid-row: 2; margin: 0; font-size: 13px; -webkit-line-clamp: 1; }
.tg-slide-cap .tg-btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding: 7px 16px; white-space: nowrap; }
@media (max-width: 767px) { .tg-slide-cap { grid-template-columns: 1fr; padding: 0 14px 14px; } .tg-slide-cap .tg-btn { display: none; } .tg-slide-cap h3 { font-size: 16px; } }
.tg-dots { top: 22px; bottom: auto; right: 18px; }
/* ==========================================================
MENU NGANG (thiết kế lại): thanh xanh đậm, chữ trắng nổi bật,
điểm nhấn vàng, hiệu ứng ánh sáng quét + menu thả mượt
========================================================== */
.section-nav { position: sticky; top: 10px; z-index: 100; margin-top: -32px; background: transparent; }
.section-nav .bg, .section-nav .box-shadow {
position: relative; overflow: visible; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px;
background: linear-gradient(180deg, #1a5fd0 0%, #0f4aad 45%, #0a3a8a 100%);
box-shadow: 0 12px 30px rgba(8, 44, 108, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* vệt sáng quét ngang định kỳ */
.section-nav .bg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%) -160% 0 / 55% 100% no-repeat; animation: tgShine 6s ease-in-out infinite; }
@keyframes tgShine { 0%, 55% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
nav#menusite.second-nav .navbar { margin: 0; min-height: 0; background: transparent; border: 0; }
@media (min-width: 768px) {
nav#menusite.second-nav .navbar-collapse { padding: 0; display: block !important; height: auto !important; overflow: visible; }
nav#menusite.second-nav .navbar-nav { float: none; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; position: relative; z-index: 2; }
nav#menusite.second-nav .navbar-nav > li { float: none; position: relative; }
nav#menusite.second-nav .navbar-nav > li > a {
position: relative; display: flex; align-items: center; gap: 7px; padding: 13px 13px; border: 0; border-radius: 12px; background: transparent;
font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 20, 70, .45);
transition: background .25s, transform .25s, color .25s;
}
/* gạch chân vàng chạy từ giữa */
nav#menusite.second-nav .navbar-nav > li > a::before { content: ""; position: absolute; left: 50%; bottom: 5px; width: 0; height: 3px; border-radius: 3px; background: #ffc83d; box-shadow: 0 0 8px rgba(255, 200, 61, .9); transform: translateX(-50%); transition: width .3s cubic-bezier(.2, .8, .2, 1); }
nav#menusite.second-nav .navbar-nav > li:hover > a, nav#menusite.second-nav .navbar-nav > li.open > a { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); }
nav#menusite.second-nav .navbar-nav > li:hover > a::before, nav#menusite.second-nav .navbar-nav > li.open > a::before { width: 60%; }
nav#menusite.second-nav .navbar-nav > li.active > a { background: rgba(255, 255, 255, .2); color: #ffd666; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
nav#menusite.second-nav .navbar-nav > li.active > a::before { width: 60%; }
nav#menusite.is-home .navbar-nav > li.active:not(:first-child) > a { background: transparent; color: #fff; box-shadow: none; }
nav#menusite.is-home .navbar-nav > li.active:not(:first-child) > a::before { width: 0; }
nav#menusite.is-home .navbar-nav > li.active:not(:first-child):hover > a { background: rgba(255, 255, 255, .16); }
nav#menusite.is-home .navbar-nav > li.active:not(:first-child):hover > a::before { width: 60%; }
/* mũi tên chevron xoay */
nav#menusite.second-nav .navbar-nav > li > a .caret { display: inline-block; width: 7px; height: 7px; margin: -3px 0 0 1px; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .85; transition: transform .3s; }
nav#menusite.second-nav .navbar-nav > li:hover > a .caret { transform: rotate(225deg) translate(-2px, -2px); color: #ffc83d; }
/* nút Trang chủ: viên thuốc trắng, icon đỏ đập nhẹ */
nav#menusite.second-nav .navbar-nav > li:first-child > a { gap: 0; justify-content: center; padding: 11px 20px; border-radius: 14px; background: #fff; color: #0b3d91; text-shadow: none; box-shadow: 0 6px 14px rgba(0, 20, 70, .3); }
nav#menusite.second-nav .navbar-nav > li:first-child > a::before { display: none; }
nav#menusite.second-nav .navbar-nav > li:first-child > a:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 20, 70, .38); }
nav#menusite.second-nav .navbar-nav > li:first-child > a em { display: inline-block; width: 18px; overflow: hidden; white-space: nowrap; line-height: 1; color: #e5252f; font-size: 18px; animation: tgBeat 2.4s ease-in-out infinite; }
nav#menusite.second-nav .navbar-nav > li:first-child > a::after { content: "Trang chủ"; margin-left: 8px; font-size: 13.5px; font-weight: 800; text-transform: none; color: #0b3d91; }
@keyframes tgBeat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } 90% { transform: scale(1.05); } }
/* ---- Menu thả xuống ---- */
nav#menusite.second-nav .dropdown-menu {
display: block; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(12px) scale(.97); transform-origin: top left;
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
min-width: 270px; max-width: 340px; margin: 10px 0 0; padding: 8px; border: 0; border-radius: 16px; background: #fff;
box-shadow: 0 22px 48px rgba(8, 44, 108, .3), 0 0 0 1px rgba(20, 80, 181, .08);
}
nav#menusite.second-nav .navbar-nav > li:hover > .dropdown-menu, nav#menusite.second-nav .navbar-nav > li.open > .dropdown-menu,
nav#menusite.second-nav .dropdown-submenu:hover > .dropdown-menu {
visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s;
}
/* mũi nhọn chỉ lên + cầu nối chuột không bị mất hover */
nav#menusite.second-nav .navbar-nav > li > .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
nav#menusite.second-nav .navbar-nav > li > .dropdown-menu::after { content: ""; position: absolute; left: 26px; top: -6px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px 0 0 0; box-shadow: -2px -2px 4px rgba(20, 80, 181, .06); }
nav#menusite.second-nav .navbar-nav > li:nth-last-child(-n+3) > .dropdown-menu { left: auto; right: 0; transform-origin: top right; }
nav#menusite.second-nav .navbar-nav > li:nth-last-child(-n+3) > .dropdown-menu::after { left: auto; right: 26px; }
/* từng dòng hiện lần lượt */
nav#menusite.second-nav .dropdown-menu > li { opacity: 0; transform: translateX(-8px); }
nav#menusite.second-nav li:hover > .dropdown-menu > li, nav#menusite.second-nav li.open > .dropdown-menu > li { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
nav#menusite.second-nav li:hover > .dropdown-menu > li:nth-child(1) { transition-delay: .03s; } nav#menusite.second-nav li:hover > .dropdown-menu > li:nth-child(2) { transition-delay: .06s; }
nav#menusite.second-nav li:hover > .dropdown-menu > li:nth-child(3) { transition-delay: .09s; } nav#menusite.second-nav li:hover > .dropdown-menu > li:nth-child(4) { transition-delay: .12s; }
nav#menusite.second-nav li:hover > .dropdown-menu > li:nth-child(5) { transition-delay: .15s; } nav#menusite.second-nav li:hover > .dropdown-menu > li:nth-child(n+6) { transition-delay: .18s; }
}
/* dòng trong menu thả */
nav#menusite.second-nav .dropdown-menu > li > a {
position: relative; display: block; padding: 10px 16px 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; color: #1c2f58; white-space: normal;
transition: background .18s, color .18s, padding .18s;
}
nav#menusite.second-nav .dropdown-menu > li + li > a { margin-top: 1px; }
nav#menusite.second-nav .dropdown-menu > li > a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 0; margin-top: 0; border-radius: 4px; background: linear-gradient(180deg, #ffc83d, #e5252f); transition: height .2s, margin .2s; }
nav#menusite.second-nav .dropdown-menu > li > a:hover, nav#menusite.second-nav .dropdown-menu > li.active > a { background: linear-gradient(90deg, #e8f1ff, #f6f9ff); color: #0b3d91; padding-left: 24px; font-weight: 600; }
nav#menusite.second-nav .dropdown-menu > li > a:hover::before, nav#menusite.second-nav .dropdown-menu > li.active > a::before { height: 60%; margin-top: -30%; }
nav#menusite.second-nav .dropdown-submenu > a { padding-right: 34px; }
nav#menusite.second-nav .dropdown-submenu > a::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -4px; float: none; border: 0; border-right: 2px solid #8a98b8; border-top: 2px solid #8a98b8; transform: rotate(45deg); transition: transform .2s, border-color .2s; }
nav#menusite.second-nav .dropdown-submenu:hover > a::after { border-right-color: #0b3d91; border-top-color: #0b3d91; transform: rotate(45deg) translate(2px, -2px); }
nav#menusite.second-nav .dropdown-submenu { position: relative; }
nav#menusite.second-nav .dropdown-submenu > .dropdown-menu { top: -8px; left: 100%; margin: 0 0 0 6px; transform-origin: left top; }
nav#menusite.second-nav .dropdown-submenu > .dropdown-menu::before { content: ""; position: absolute; left: -10px; top: 0; width: 10px; height: 100%; }
nav#menusite.second-nav .navbar-nav > li:nth-last-child(-n+3) .dropdown-submenu > .dropdown-menu { left: auto; right: 100%; margin: 0 6px 0 0; transform-origin: right top; }
@media (max-width: 1199px) { nav#menusite.second-nav .navbar-nav > li > a { padding: 12px 9px; font-size: 12px; } }
@media (max-width: 767px) {
.section-nav { top: 0; margin-top: -14px; }
.section-nav .bg, .section-nav .box-shadow { border-radius: 14px; }
nav#menusite.second-nav .navbar-toggle { border-color: rgba(255, 255, 255, .7); margin: 6px 8px; }
nav#menusite.second-nav .navbar-toggle .icon-bar { background: #fff; }
nav#menusite.second-nav .navbar-collapse { border: 0; box-shadow: none; }
nav#menusite.second-nav .navbar-nav { margin: 6px 0; }
nav#menusite.second-nav .navbar-nav > li > a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #fff; }
nav#menusite.second-nav .navbar-nav > li > a:hover, nav#menusite.second-nav .navbar-nav > li.open > a { background: rgba(255, 255, 255, .16); color: #ffd666; }
nav#menusite.second-nav .navbar-nav > li:first-child > a { display: inline-block; background: #fff; color: #0b3d91; }
nav#menusite.second-nav .navbar-nav > li:first-child > a::after { content: " Trang chủ"; font-weight: 800; }
nav#menusite.second-nav .dropdown-menu { position: static; float: none; background: rgba(255, 255, 255, .08); box-shadow: none; margin: 2px 8px 6px; border: 0; }
nav#menusite.second-nav .dropdown-menu > li > a { color: #fff; }
nav#menusite.second-nav .dropdown-menu > li > a:hover { background: rgba(255, 255, 255, .15); color: #ffd666; }
}
/* ---- Ghi đè các !important của style.css gốc (màu xanh ngọc cũ) ---- */
nav#menusite.second-nav > .bg { background-color: #0f4aad !important; background-image: linear-gradient(180deg, #1a5fd0 0%, #0f4aad 45%, #0a3a8a 100%) !important; border-radius: 18px !important; }
nav#menusite.second-nav .navbar-default { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
nav#menusite.second-nav .navbar-default .navbar-nav > li { margin: 0; }
nav#menusite.second-nav .navbar-default .navbar-nav > li > a { color: #fff; }
nav#menusite.second-nav .navbar-default .navbar-nav > li > a:hover, nav#menusite.second-nav .navbar-default .navbar-nav > li > a:focus,
nav#menusite.second-nav .navbar-default .navbar-nav > .open > a, nav#menusite.second-nav .navbar-default .navbar-nav > .open > a:hover, nav#menusite.second-nav .navbar-default .navbar-nav > .open > a:focus,
nav#menusite.second-nav .navbar-default .navbar-nav > li:hover > a { background: rgba(255, 255, 255, .16) !important; color: #fff; }
nav#menusite.second-nav .navbar-default .navbar-nav > .active > a, nav#menusite.second-nav .navbar-default .navbar-nav > .active > a:hover, nav#menusite.second-nav .navbar-default .navbar-nav > .active > a:focus { background: rgba(255, 255, 255, .2) !important; color: #ffd666; }
nav#menusite.second-nav.is-home .navbar-default .navbar-nav > li.active:not(:first-child) > a { background: transparent !important; color: #fff; }
nav#menusite.second-nav.is-home .navbar-default .navbar-nav > li.active:not(:first-child):hover > a { background: rgba(255, 255, 255, .16) !important; }
nav#menusite.second-nav .navbar-default .navbar-nav > li:first-child > a, nav#menusite.second-nav .navbar-default .navbar-nav > li:first-child > a:hover, nav#menusite.second-nav .navbar-default .navbar-nav > li:first-child > a:focus { background: #fff !important; color: #0b3d91; }
nav#menusite.second-nav .dropdown-menu { background: #fff !important; border: 0 !important; border-radius: 16px !important; }
nav#menusite.second-nav .dropdown-menu > li { border: 0; }
nav#menusite.second-nav .dropdown-menu > li > a { color: #1c2f58; line-height: 1.35; }
nav#menusite.second-nav .dropdown-menu > li > a:hover, nav#menusite.second-nav .dropdown-menu > li > a:focus, nav#menusite.second-nav .dropdown-menu > .active > a, nav#menusite.second-nav .dropdown-menu > .active > a:hover,
nav#menusite.second-nav .navbar .navbar-nav .open .dropdown-menu > li > a:hover, nav#menusite.second-nav .navbar .navbar-nav .open .dropdown-menu > .active > a { background: linear-gradient(90deg, #e3eeff, #f6f9ff) !important; color: #0b3d91; }
nav#menusite.second-nav .dropdown-submenu { display: block; }
nav#menusite.second-nav .dropdown-submenu li a { color: #1c2f58; }
nav#menusite.second-nav .dropdown-submenu > .dropdown-menu { border-radius: 16px !important; }
/* ---- Sửa lỗi sau kiểm tra thực tế ---- */
#body.tg-wrap { width: min(1220px, 100% - 40px); }
body:has(.tg-home) #body.tg-wrap { padding: 0; background: transparent; box-shadow: none; }
@media (min-width: 768px) {
nav#menusite.second-nav .navbar-default .navbar-nav > li > a { padding: 12px 13px 16px; }
nav#menusite.second-nav .navbar-default .navbar-nav > li > a::before { bottom: 6px; }
nav#menusite.second-nav .navbar-default .navbar-nav > li:first-child > a { padding: 11px 20px; }
}
nav#menusite.second-nav .dropdown-menu > li > a { font-size: 14.5px; }
/* Bỏ dấu chevron (V) và các dấu đánh dấu/gạch chân ở menu ngang */
nav#menusite.second-nav .navbar-default .navbar-nav > li > a .caret { display: none !important; }
nav#menusite.second-nav .navbar-default .navbar-nav > li > a::before { display: none !important; }
nav#menusite.second-nav .navbar-default .navbar-nav > .active > a, nav#menusite.second-nav .navbar-default .navbar-nav > .active > a:hover, nav#menusite.second-nav .navbar-default .navbar-nav > .active > a:focus { background: transparent !important; color: #fff; box-shadow: none; }
nav#menusite.second-nav .navbar-default .navbar-nav > li.active:not(:first-child):hover > a { background: rgba(255, 255, 255, .16) !important; }
/* Thanh đánh dấu đầu dòng trong menu sổ xuống: đặt đúng giữa dòng */
nav#menusite.second-nav .dropdown-menu > li > a::before { content: ""; position: absolute; left: 7px; top: 20%; bottom: 20%; height: auto; width: 4px; margin: 0; border-radius: 4px; background: linear-gradient(180deg, #ffc83d, #e5252f); transform: scaleY(0); transform-origin: center; transition: transform .22s ease; }
nav#menusite.second-nav .dropdown-menu > li > a:hover::before, nav#menusite.second-nav .dropdown-menu > li.active > a::before { height: auto; margin: 0; transform: scaleY(1); }
/* ==========================================================
MODULE GIỚI THIỆU (about)
========================================================== */
:root { --ab-img: url("../images/tg/about"); }
.ab-nav { background: #fff; border-radius: 18px; box-shadow: var(--tg-shadow); overflow: hidden; margin-bottom: 18px; }
.ab-nav-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px; color: #fff; background: linear-gradient(135deg, #e5252f, #b30f25); }
.ab-nav-ic { flex: 0 0 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.ab-nav-head b { display: block; font-size: 18px; letter-spacing: .5px; line-height: 1.2; }
.ab-nav-head small { display: block; font-size: 11.5px; opacity: .92; letter-spacing: .3px; margin-top: 2px; }
.ab-nav ul { padding: 8px; }
.ab-nav li a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: #27385f; font-size: 14px; line-height: 1.3; transition: background .2s, color .2s, transform .2s; }
.ab-nav li a > .fa:first-child { flex: 0 0 26px; font-size: 19px; text-align: center; color: #1450b5; }
.ab-lb { flex: 1; display: block; }
.ab-l1, .ab-l2 { display: block; }
.ab-l1 { font-size: 12.5px; color: #6b7690; }
.ab-l2 { font-weight: 600; }
.ab-go { color: #9aa7c4; font-size: 20px; transition: transform .2s; }
.ab-nav li + li { border-top: 1px solid #eef2f9; }
.ab-nav li a:hover { background: #eef4fe; color: #0b3d91; transform: translateX(2px); }
.ab-nav li a:hover .ab-go { transform: translateX(3px); color: #1450b5; }
.ab-nav li.active a { background: linear-gradient(90deg, #fff0f1, #fff); color: #c8102e; box-shadow: inset 4px 0 0 #e5252f; }
.ab-nav li.active a > .fa:first-child, .ab-nav li.active .ab-go, .ab-nav li.active .ab-l1 { color: #e5252f; }
.ab-nav-foot { display: flex; justify-content: space-between; gap: 6px; padding: 38px 16px 14px; font: italic 600 13px "Segoe Script", "Brush Script MT", cursive; color: #1450b5;
background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, .2) 60%), url("../images/tg/about/a3.jpg") center / cover; border-top: 1px solid #eef2f9; }
/* Trang danh sách */
.ab-page { margin-bottom: 18px; }
.ab-top { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 150px; padding: 24px 28px; border-radius: 18px; color: #fff; overflow: hidden; margin-bottom: 16px;
background: linear-gradient(90deg, rgba(8, 44, 108, .88), rgba(20, 80, 181, .45) 60%, rgba(20, 80, 181, .1)), url("../images/tg/about/a1.jpg") center 40% / cover; box-shadow: var(--tg-shadow); }
.ab-top h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: .5px; text-shadow: 0 2px 10px rgba(0, 20, 70, .4); }
.ab-top p { margin: 4px 0 0; font-size: 15px; letter-spacing: 1.5px; opacity: .95; }
.ab-top-quote { text-align: right; font-family: "Segoe Script", "Brush Script MT", cursive; font-style: italic; line-height: 1.35; text-shadow: 0 2px 8px rgba(0, 20, 70, .5); }
.ab-top-quote b { display: block; font-size: 30px; font-weight: 600; }
.ab-top-quote span { display: block; font-size: 17px; }
.ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-card { position: relative; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--tg-shadow); min-height: 170px; transition: transform .25s, box-shadow .25s; }
.ab-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 80, 181, .22); }
.ab-card-link { position: absolute; inset: 0; z-index: 3; }
.ab-card-img { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .5s; }
.ab-card:hover .ab-card-img { transform: scale(1.06); }
.ab-card-body { position: relative; z-index: 2; height: 100%; padding: 14px 16px; display: flex; flex-direction: column; }
.ab-num { font: 700 34px/1 Georgia, "Times New Roman", serif; }
.ab-ttl { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.ab-ttl span { display: block; font-weight: 600; font-size: 15px; opacity: .95; }
.ab-desc { display: none; }
.ab-more { display: none; }
.ab-card:not(.ab-c1) .ab-card-body::after { content: "\f105"; font: normal 20px/34px FontAwesome; text-align: center; position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #1450b5; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.ab-card:not(.ab-c1) .ab-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ab-tint) 0%, var(--ab-tint) 28%, transparent 78%); opacity: .93; }
.ab-card:not(.ab-c1) .ab-ttl, .ab-card:not(.ab-c1) .ab-num { color: var(--ab-ink); }
.ab-card:not(.ab-c1) { --ab-tint: #fff; --ab-ink: #1c2f58; }
.ab-c2 { --ab-tint: #f3e3c6; --ab-ink: #7a4b12; } .ab-c3 { --ab-tint: #dbe8fb; --ab-ink: #0b3d91; } .ab-c4 { --ab-tint: #fbd9db; --ab-ink: #b30f25; }
.ab-c5 { --ab-tint: #d6f0e3; --ab-ink: #0d6b45; } .ab-c6 { --ab-tint: #e6dcfa; --ab-ink: #5a2bb5; } .ab-c7 { --ab-tint: #d8e6fb; --ab-ink: #0b3d91; }
.ab-c1 .ab-card-img, .ab-c1 .ab-card-body { position: static; }
.ab-c2 .ab-card-img { background-image: url("../images/tg/about/a2.jpg"); } .ab-c3 .ab-card-img { background-image: url("../images/tg/about/a3.jpg"); }
.ab-c4 .ab-card-img { background-image: url("../images/tg/about/a4.jpg"); } .ab-c5 .ab-card-img { background-image: url("../images/tg/about/a5.jpg"); }
.ab-c6 .ab-card-img { background-image: url("../images/tg/about/a6.jpg"); } .ab-c7 .ab-card-img { background-image: url("../images/tg/about/a7.jpg"); }
.ab-c2 .ab-num::before { content: "01"; } .ab-c3 .ab-num::before { content: "02"; } .ab-c4 .ab-num::before { content: "03"; } .ab-c5 .ab-num::before { content: "04"; } .ab-c6 .ab-num::before { content: "05"; }
.ab-c7 .ab-num::before { content: "\f201"; font: normal 26px/1 FontAwesome; }
/* thẻ Khái quát: ảnh trái, chữ phải */
.ab-c1 { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; background: linear-gradient(135deg, #fff, #f3f8ff); }
.ab-c1 .ab-card-img { display: block; min-height: 270px; background-image: url("../images/tg/about/a1.jpg"); position: relative; }
.ab-c1 .ab-card-body { padding: 26px 28px; justify-content: center; }
.ab-c1 .ab-num { display: none; }
.ab-c1 .ab-ttl { font-size: 26px; color: #0b3d91; padding-left: 52px; position: relative; margin-bottom: 12px; }
.ab-c1 .ab-ttl::before { content: "\f19c"; position: absolute; left: 0; top: -4px; width: 40px; height: 40px; border-radius: 50%; background: #e5252f; color: #fff; font: normal 19px/40px FontAwesome; text-align: center; }
.ab-c1 .ab-desc { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: #3c4a6b; }
.ab-c1 .ab-more { display: inline-block; align-self: flex-start; padding: 9px 20px; border-radius: 10px; background: #e5252f; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 6px 14px rgba(229, 37, 47, .3); }
.ab-admin { position: absolute; z-index: 4; right: 8px; top: 6px; margin: 0; font-size: 12px; }
.ab-admin a { background: rgba(255, 255, 255, .9); padding: 2px 8px; border-radius: 8px; margin-left: 4px; }
/* Trang chi tiết */
.ab-hero { position: relative; display: flex; align-items: flex-end; min-height: 170px; padding: 24px 30px; border-radius: 18px; color: #fff; overflow: hidden; margin-bottom: 16px; box-shadow: var(--tg-shadow);
background: linear-gradient(0deg, rgba(8, 30, 80, .82) 0%, rgba(8, 30, 80, .3) 70%), url("../images/tg/about/a1.jpg") center 35% / cover; }
.ab-d1 .ab-hero { background-image: linear-gradient(0deg, rgba(8, 30, 80, .82) 0%, rgba(8, 30, 80, .3) 70%), url("../images/tg/about/a1.jpg"); }
.ab-d2 .ab-hero { background-image: linear-gradient(0deg, rgba(60, 35, 10, .85) 0%, rgba(60, 35, 10, .3) 70%), url("../images/tg/about/a2.jpg"); }
.ab-d3 .ab-hero { background-image: linear-gradient(0deg, rgba(8, 30, 80, .85) 0%, rgba(8, 30, 80, .3) 70%), url("../images/tg/about/a3.jpg"); }
.ab-d4 .ab-hero { background-image: linear-gradient(0deg, rgba(120, 10, 30, .85) 0%, rgba(120, 10, 30, .3) 70%), url("../images/tg/about/a4.jpg"); }
.ab-d5 .ab-hero { background-image: linear-gradient(0deg, rgba(8, 80, 50, .85) 0%, rgba(8, 80, 50, .3) 70%), url("../images/tg/about/a5.jpg"); }
.ab-d6 .ab-hero { background-image: linear-gradient(0deg, rgba(60, 25, 120, .85) 0%, rgba(60, 25, 120, .3) 70%), url("../images/tg/about/a6.jpg"); }
.ab-d7 .ab-hero { background-image: linear-gradient(0deg, rgba(8, 30, 80, .85) 0%, rgba(8, 30, 80, .3) 70%), url("../images/tg/about/a7.jpg"); }
.ab-kicker { display: inline-block; font-size: 12px; letter-spacing: 1.2px; font-weight: 700; padding: 4px 12px; border-radius: 20px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px); }
.ab-hero h1.title { margin: 10px 0 0; font-size: 30px; font-weight: 800; line-height: 1.25; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.ab-article { background: #fff; border-radius: 18px; box-shadow: var(--tg-shadow); padding: 26px 30px; }
.ab-article .hometext { font-size: 16px; line-height: 1.7; color: #1c2f58; font-weight: 500; padding: 14px 18px; margin-bottom: 18px; border-left: 4px solid #e5252f; background: #f6f9ff; border-radius: 0 12px 12px 0; }
/* chuẩn hóa chữ trong nội dung nhập từ Word (Times New Roman 14pt...) */
.ab-body, .ab-body * { font-family: Roboto, "Segoe UI", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.75 !important; color: #27385f; }
.ab-body strong, .ab-body b { color: #0b3d91; }
.ab-body p { margin: 0 0 12px; text-align: justify !important; }
.ab-body img { max-width: 100%; height: auto; border-radius: 12px; }
.ab-body table { width: 100% !important; }
.ab-others { margin-top: 16px; padding: 16px 20px; background: #fff; border-radius: 18px; box-shadow: var(--tg-shadow); }
.ab-others h4 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #1450b5; }
.ab-others h4 .fa { color: #e5252f; margin-right: 6px; }
.ab-others ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.ab-others a { display: block; padding: 7px 4px; border-bottom: 1px dashed #e1e8f5; font-size: 14.5px; color: #27385f; }
.ab-others a:hover { color: #e5252f; padding-left: 8px; }
.ab-others .fa { color: #e5252f; margin-right: 6px; }
@media (max-width: 991px) { .ab-grid { grid-template-columns: repeat(2, 1fr); } .ab-c1 { grid-template-columns: 1fr; } .ab-c1 .ab-card-img { min-height: 220px; } .ab-others ul { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .ab-grid { grid-template-columns: 1fr; } .ab-top { flex-direction: column; align-items: flex-start; } .ab-top-quote { text-align: left; } .ab-article { padding: 18px 16px; } .ab-hero h1.title { font-size: 22px; } }
/* Trang chi tiết giữ nguyên khung với trang danh sách: chỉ đổi nội dung thân bài */
.ab-d1, .ab-d2, .ab-d3, .ab-d4, .ab-d5, .ab-d6, .ab-d7 { --ab-c: #1450b5; }
.ab-d2 { --ab-c: #8a5a1c; } .ab-d3 { --ab-c: #1450b5; } .ab-d4 { --ab-c: #c8102e; } .ab-d5 { --ab-c: #0d7a4d; } .ab-d6 { --ab-c: #6a35c9; } .ab-d7 { --ab-c: #1450b5; }
.ab-art-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid #e6edf8; position: relative; }
.ab-art-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 90px; height: 3px; background: var(--ab-c); border-radius: 3px; }
.ab-art-ic { flex: 0 0 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: var(--ab-c); }
.ab-art-head h2.title { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--ab-c); }
.ab-article { margin-top: 0; }
@media (max-width: 575px) { .ab-art-head h2.title { font-size: 20px; } }
.tg-media:has(.tg-reel) { align-self: start; }
.tg-reel { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0f1b3d; box-shadow: 0 4px 16px rgba(20, 80, 181, .18); }
.tg-reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tg-reel-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #0f1b3d; cursor: pointer; display: block; }
.tg-reel-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.tg-reel-play:hover img { transform: scale(1.04); }
.tg-reel-play .fa { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(229, 37, 47, .92); color: #fff; font-size: 26px; line-height: 64px; padding-left: 5px; text-align: center; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); transition: transform .2s; }
.tg-reel-play:hover .fa { transform: scale(1.12); }
.tg-reel-fb { position: absolute; inset: 0; background: #000; }
.tg-reel-fb .fb-video, .tg-reel-fb span, .tg-reel-fb iframe { width: 100% !important; height: 100% !important; }
.tg-reel-play.loading .fa { animation: tgspin 1s linear infinite; }
@keyframes tgspin { to { transform: rotate(360deg); } }
/* Sự kiện sắp diễn ra + đồng hồ đếm ngược */
.tg-card.tg-event { position: relative; margin-top: 18px; overflow: hidden; padding: 0; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; background: #0f1b3d; }
.tg-col { align-self: start; min-width: 0; }
.tg-event-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.tg-event::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(110, 8, 16, .92) 0, rgba(20, 30, 40, .55) 55%, rgba(0, 0, 0, .1) 100%); }
.tg-event-img { position: relative; z-index: 2; display: block; padding: 0 16px; }
.tg-event-img b { display: block; color: #fff; font-size: 16px; line-height: 1.35; text-align: center; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.tg-cd { position: relative; z-index: 2; margin-top: 10px; text-align: center; }
.tg-cd-boxes { display: flex; justify-content: center; gap: 8px; }
.tg-cd-boxes div { width: 54px; padding: 5px 2px 4px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #8b0d16; }
.tg-cd-boxes b { display: block; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tg-cd-boxes span { font-size: 11px; }
.tg-cd-done { display: none; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: #8b0d16; font-size: 15px; font-weight: 700; }
.tg-cd.done .tg-cd-boxes { display: none; }
.tg-cd.done .tg-cd-done { display: block; }
.tg-event-date { position: relative; z-index: 2; margin: 10px 0 14px; text-align: center; font-size: 14px; font-weight: 700; color: #fff; }
.tg-event-date .fa { margin-right: 6px; color: #ffd24d; font-size: 18px; }
@media (max-width: 480px) { .tg-event-img b { font-size: 13px; } .tg-cd-boxes div { width: 50px; } }
/* Menu sổ xuống: chữ thường, màu chữ luôn tương phản với nền */
nav#menusite.second-nav .dropdown-menu a, nav#menusite.second-nav .dropdown-menu > li > a { text-transform: none !important; letter-spacing: 0; }
@media (min-width: 992px) {
nav#menusite.second-nav .dropdown-menu > li > a, nav#menusite.second-nav .dropdown-menu > li > a:visited, nav#menusite.second-nav .dropdown-submenu li a { color: #1c2f58 !important; background-color: transparent; }
nav#menusite.second-nav .dropdown-menu > li > a:hover, nav#menusite.second-nav .dropdown-menu > li > a:focus, nav#menusite.second-nav .dropdown-menu > li:hover > a, nav#menusite.second-nav .dropdown-menu > li.open > a, nav#menusite.second-nav .dropdown-menu > li.active > a { color: #0b3d91 !important; background: linear-gradient(90deg, #e3eeff, #f6f9ff) !important; }
}