/*
Theme Name: PTIT - Đoàn Thanh Niên
Theme URI: https://doanthanhnien.ptit.edu.vn
Author: PTIT Youth Union Web Team
Author URI: https://ptit.edu.vn
Description: Theme tin tức dành cho cổng thông tin Đoàn Thanh niên Học viện Công nghệ Bưu chính Viễn thông (PTIT). Tông màu trắng - đỏ, bố cục báo điện tử, hỗ trợ tiếng Việt, tối ưu cho tin tức, hoạt động Đoàn - Hội và phong trào sinh viên.
Version: 1.1.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ptit-doan
Tags: news, blog, education, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. DESIGN TOKENS
   - Primary Red lấy cảm hứng từ màu cờ Đoàn TNCS Hồ Chí Minh
     và bộ nhận diện PTIT, phối với nền trắng/ngà.
   - Sao vàng (--color-gold) chỉ dùng làm điểm nhấn nhỏ
     (huy hiệu, gạch đầu dòng) - không lạm dụng.
   ========================================================= */
:root{
	--color-primary:#E2001A;        /* Đỏ PTIT - theo bộ nhận diện thương hiệu Học viện */
	--color-primary-dark:#B0000F;
	--color-primary-darker:#7A0A12;
	--color-primary-tint:#FCE8EA;
	--color-gold:#FFC72C;           /* Sao vàng - dùng tiết chế, gợi quốc kỳ */
	--color-white:#FFFFFF;
	--color-bg:#F7F7F8;
	--color-bg-alt:#F4F2F1;
	--color-surface:#FFFFFF;
	--color-text:#1F2024;
	--color-text-muted:#7C7D82;
	--color-border:#EBEAEC;
	--font-display:'Be Vietnam Pro', 'Segoe UI', sans-serif;
	--font-body:'Inter', 'Segoe UI', sans-serif;
	--container:1220px;
	--radius:6px;
	--shadow-card:0 2px 14px rgba(20,20,30,.06);
	--shadow-hover:0 10px 28px rgba(20,20,30,.12);
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
	margin:0;
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.7;
	color:var(--color-text);
	background:var(--color-bg);
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--color-primary);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--color-primary-dark);}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;}
button{font-family:inherit;cursor:pointer;}
table{width:100%;border-collapse:collapse;}

h1,h2,h3,h4,h5,h6{
	font-family:var(--font-display);
	font-weight:700;
	line-height:1.25;
	margin:0 0 .5em;
	color:var(--color-text);
}
h1{font-size:clamp(28px,4vw,40px);font-weight:800;}
h2{font-size:26px;}
h3{font-size:20px;}
h4{font-size:17px;}

p{margin:0 0 1.2em;}

.screen-reader-text{
	position:absolute !important;
	clip:rect(1px,1px,1px,1px);
	width:1px;height:1px;overflow:hidden;
	word-wrap:normal !important;
}

/* =========================================================
   2. LAYOUT
   ========================================================= */
.container{
	max-width:var(--container);
	margin:0 auto;
	padding:0 20px;
}
.site-grid{
	display:grid;
	grid-template-columns:1fr 340px;
	gap:36px;
	align-items:flex-start;
	padding:36px 0 60px;
}
.site-main{min-width:0;}

/* =========================================================
   3. SIGNATURE ELEMENTS - sao 5 cánh & cờ đuôi nheo
   ========================================================= */
.star{
	display:inline-block;
	width:.9em;height:.9em;
	background:var(--color-gold);
	clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
	vertical-align:middle;
	flex-shrink:0;
}
.star--red{background:var(--color-primary);}
.star--white{background:var(--color-white);}

/* Nút bấm chính - bo tròn, đỏ, viết hoa (giống CTA "Khám phá Fanpage") */
.btn-primary{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--color-primary);color:#fff;
	font-family:var(--font-display);font-weight:700;font-size:13px;
	text-transform:uppercase;letter-spacing:.08em;
	padding:13px 30px;border-radius:999px;
	border:0;transition:background .15s ease, transform .15s ease;
}
.btn-primary:hover{background:var(--color-primary-dark);color:#fff;transform:translateY(-1px);}
.btn-outline{
	display:inline-flex;align-items:center;gap:8px;
	background:transparent;color:var(--color-primary);
	font-family:var(--font-display);font-weight:700;font-size:13px;
	text-transform:uppercase;letter-spacing:.08em;
	padding:12px 28px;border-radius:999px;
	border:1.5px solid var(--color-primary);transition:all .15s ease;
}
.btn-outline:hover{background:var(--color-primary);color:#fff;}

/* Nhãn chuyên mục đơn giản (không nền) - đặt trên tiêu đề bài viết */
.cat-label{
	color:var(--color-primary);
	font-family:var(--font-display);
	font-weight:700;
	font-size:11.5px;
	text-transform:uppercase;
	letter-spacing:.12em;
}
.cat-label a{color:inherit;}
.cat-label a:hover{color:var(--color-primary-dark);}

/* Liên kết "Xem chi tiết" */
.read-more-link{
	display:inline-flex;align-items:center;gap:6px;
	font-family:var(--font-display);font-weight:700;
	font-size:13px;color:var(--color-primary);
	text-transform:uppercase;letter-spacing:.04em;
}
.read-more-link::after{content:"→";transition:transform .15s ease;}
.read-more-link:hover::after{transform:translateX(3px);}

/* =========================================================
   KHỐI NỘI DUNG TRANG CHỦ - tiêu đề, đoạn mở đầu, nền xen kẽ
   ========================================================= */
.section{padding:64px 0;}
.section--alt{background:var(--color-bg-alt);}
.section--brand{background:var(--color-primary);}

.section-header{
	max-width:720px;margin:0 auto 40px;text-align:center;
}
.section-header.has-action{
	max-width:none;display:flex;align-items:flex-end;justify-content:space-between;
	gap:20px;text-align:left;flex-wrap:wrap;
}
.section-eyebrow{
	display:block;color:var(--color-primary);
	font-family:var(--font-display);font-weight:700;
	font-size:12.5px;text-transform:uppercase;letter-spacing:.22em;
	margin-bottom:10px;
}
.section-title{
	font-size:clamp(24px,3vw,32px);
	margin:0 0 12px;
}
.section-intro{
	color:var(--color-text-muted);font-size:15px;margin:0;
}
.section-header .btn-outline,
.section-header .btn-primary{margin-top:18px;}
.section-header.has-action .section-eyebrow,
.section-header.has-action .section-title{margin-bottom:0;}

/* Tiêu đề nhỏ căn trái cho các khối phụ (vd: bài liên quan) */
.section-heading{
	display:flex;align-items:center;justify-content:space-between;
	gap:14px;margin:0 0 22px;padding-bottom:14px;
	border-bottom:2px solid var(--color-border);
}
.section-heading h2{
	margin:0;font-size:20px;
	padding-left:14px;border-left:5px solid var(--color-primary);
}
.section-heading .more-link{
	font-size:13px;font-weight:600;font-family:var(--font-display);
	white-space:nowrap;color:var(--color-primary-dark);
	border:1px solid var(--color-border);border-radius:999px;
	padding:6px 14px;transition:all .15s ease;
}
.section-heading .more-link:hover{
	background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);
}

/* =========================================================
   4. HEADER
   ========================================================= */
.top-bar{
	background:var(--color-primary);
	color:#fff;
	font-size:12.5px;
}
.top-bar .container{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	min-height:36px;
	flex-wrap:wrap;
	gap:18px;
}
.top-bar .top-bar__lang a{
	color:#fff;font-weight:700;letter-spacing:.06em;
	text-transform:uppercase;font-size:12px;
	font-family:var(--font-display);
}
.top-bar .top-bar__lang a:hover{color:var(--color-gold);}
.top-bar .social-links{display:flex;gap:10px;}
.top-bar .social-links a{
	display:flex;align-items:center;justify-content:center;
	width:24px;height:24px;border-radius:50%;
	background:rgba(255,255,255,.15);
	color:#fff;
}
.top-bar .social-links a svg{width:13px;height:13px;display:block;}
.top-bar .social-links a:hover{background:var(--color-gold);color:var(--color-primary-darker);}

.site-header{
	background:var(--color-white);
	border-bottom:1px solid var(--color-border);
	position:sticky;top:0;z-index:100;
	box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.site-branding{
	display:flex;
	align-items:center;
	gap:24px;
	padding:14px 0;
}
.site-branding__identity{
	display:flex;
	align-items:center;
	gap:14px;
	min-width:0;
}
.brand-logo{display:flex;align-items:center;flex-shrink:0;}
.brand-logo img,
.brand-logo.custom-logo-link img,
.site-branding__identity img.custom-logo{
	max-height:50px;width:auto;display:block;
}
.brand-divider{
	display:block;width:1px;height:38px;
	background:var(--color-border);flex-shrink:0;
}
.site-branding__text{min-width:0;overflow:hidden;}
.site-branding__text .site-title{
	margin:0;
	font-size:19px;
	line-height:1.2;
	font-weight:800;
	letter-spacing:.01em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.site-branding__text .site-title a{
	color:var(--color-primary);
}
.site-branding__text .site-description{
	margin:2px 0 0;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:var(--color-text-muted);
	font-weight:600;
	white-space:nowrap;
}

.header-search{
	margin-left:auto;
}
.search-form{
	display:flex;
	align-items:center;
	border:1px solid var(--color-border);
	border-radius:999px;
	overflow:hidden;
	background:var(--color-bg);
}
.search-form input[type="search"]{
	border:0;background:transparent;
	padding:10px 16px;
	font-size:14px;width:240px;flex:1;min-width:0;
	font-family:var(--font-body);
	color:var(--color-text);
}
.search-form input[type="search"]:focus{outline:none;}
.search-form .search-submit{
	display:flex;align-items:center;justify-content:center;
	border:0;background:var(--color-primary);color:#fff;
	width:42px;height:42px;flex-shrink:0;
	transition:background .15s ease;
}
.search-form .search-submit:hover{background:var(--color-primary-dark);}
.search-form .search-submit svg{display:block;}

.main-navigation{
	background:var(--color-primary);
}
.main-navigation .container{
	display:flex;align-items:center;justify-content:center;
}
.main-navigation ul.menu,
.main-navigation ul.nav-menu-fallback{
	display:flex;
	flex-wrap:nowrap;
	overflow-x:auto;
	scrollbar-width:none;
	max-width:100%;
}
.main-navigation ul.menu::-webkit-scrollbar,
.main-navigation ul.nav-menu-fallback::-webkit-scrollbar{display:none;}
.main-navigation ul.menu li a,
.main-navigation ul.nav-menu-fallback li a{
	display:block;
	color:#fff;
	font-family:var(--font-display);
	font-weight:600;
	font-size:13.5px;
	letter-spacing:.02em;
	text-transform:uppercase;
	white-space:nowrap;
	padding:14px 16px;
	transition:background .15s ease;
}
.main-navigation ul.menu li:hover > a,
.main-navigation ul.menu li.current-menu-item > a,
.main-navigation ul.menu li.current-menu-ancestor > a,
.main-navigation ul.menu li.current_page_item > a,
.main-navigation ul.menu li.current_page_ancestor > a{
	background:var(--color-primary-dark);
	color:var(--color-gold);
}
/* Mũi tên cho mục có menu con */
.main-navigation ul.menu li.menu-item-has-children > a{
	display:flex;align-items:center;gap:6px;
}
.main-navigation ul.menu li.menu-item-has-children > a::after{
	content:"";display:inline-block;
	width:6px;height:6px;flex-shrink:0;
	border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
	transform:rotate(45deg) translateY(-1px);
}
.main-navigation ul.menu .sub-menu li.menu-item-has-children > a::after{
	transform:rotate(-45deg) translateY(1px);
	margin-left:auto;
}
/* Submenu */
.main-navigation ul.menu li{position:relative;}
.main-navigation ul.menu ul.sub-menu{
	display:none;
	position:absolute;left:0;top:100%;
	min-width:230px;
	background:var(--color-white);
	box-shadow:var(--shadow-hover);
	border-top:3px solid var(--color-primary);
	z-index:50;
}
.main-navigation ul.menu li:hover > ul.sub-menu{display:block;}
.main-navigation ul.menu > li:nth-last-child(-n+2) > ul.sub-menu{left:auto;right:0;}
.main-navigation ul.menu ul.sub-menu li a{
	color:var(--color-text);
	text-transform:none;
	font-weight:500;
	font-size:14px;
	white-space:normal;
	padding:11px 18px;
	border-bottom:1px solid var(--color-border);
}
.main-navigation ul.menu ul.sub-menu li:last-child a{border-bottom:0;}
.main-navigation ul.menu ul.sub-menu li a:hover{
	background:var(--color-primary-tint);
	color:var(--color-primary-dark);
}
/* Menu con cấp 3 trở đi - trượt sang phải (flyout) */
.main-navigation ul.menu .sub-menu .sub-menu{
	top:-3px;left:100%;
	border-top:0;border-left:3px solid var(--color-primary);
}
/* Với 2 mục cuối cùng, trượt sang trái để không bị tràn ra ngoài màn hình */
.main-navigation ul.menu > li:nth-last-child(-n+2) .sub-menu .sub-menu{
	left:auto;right:100%;
	border-left:0;border-right:3px solid var(--color-primary);
}

/* Mục menu nổi bật dạng nút - thêm class "menu-cta" trong Giao diện → Menu (Tùy chọn màn hình → Class CSS) */
.main-navigation ul.menu li.menu-cta{
	display:flex;align-items:center;
}
.main-navigation ul.menu li.menu-cta > a{
	background:var(--color-gold);color:var(--color-primary-darker) !important;
	border-radius:999px;padding:9px 20px;margin:9px 0;
}
.main-navigation ul.menu li.menu-cta > a:hover{background:#fff;}

/* Nút mở menu dạng drawer (chỉ hiện trên di động) - luôn căn sát bên phải */
.menu-toggle{
	display:none;
	align-items:center;justify-content:center;
	width:42px;height:42px;flex-shrink:0;
	background:var(--color-primary);border:0;border-radius:50%;color:#fff;
	padding:0;margin-left:auto;
}
.menu-toggle .bars{
	display:flex;flex-direction:column;gap:4px;
	width:18px;
}
.menu-toggle .bars span{
	display:block;width:100%;height:2px;background:#fff;
	transition:transform .2s ease, opacity .2s ease;
}

/* =========================================================
   4B. DRAWER MENU - MÀN HÌNH ĐIỆN THOẠI
   ========================================================= */
.mobile-drawer-overlay{
	position:fixed;inset:0;
	background:rgba(20,10,12,.5);
	opacity:0;visibility:hidden;
	transition:opacity .25s ease, visibility .25s ease;
	z-index:998;
}
.mobile-drawer{
	position:fixed;top:0;left:0;bottom:0;
	width:300px;max-width:85vw;
	background:var(--color-white);
	box-shadow:10px 0 30px rgba(20,10,12,.18);
	transform:translateX(-100%);
	transition:transform .28s ease;
	z-index:999;
	display:flex;flex-direction:column;
	overflow-y:auto;
}
body.drawer-open{overflow:hidden;}
body.drawer-open .mobile-drawer{transform:translateX(0);}
body.drawer-open .mobile-drawer-overlay{opacity:1;visibility:visible;}

.mobile-drawer__head{
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;padding:16px 16px 14px;
	border-bottom:1px solid var(--color-border);
}
.mobile-drawer__logos{display:flex;align-items:center;gap:10px;min-width:0;}
.mobile-drawer__logos .brand-logo img{max-height:38px;}
.mobile-drawer__logos .brand-divider{height:28px;}
.mobile-drawer__close{
	width:36px;height:36px;border-radius:50%;flex-shrink:0;
	display:flex;align-items:center;justify-content:center;
	background:var(--color-bg);border:0;color:var(--color-text);
	transition:background .15s ease, color .15s ease;
}
.mobile-drawer__close:hover{background:var(--color-primary);color:#fff;}

.mobile-drawer__search{padding:16px;border-bottom:1px solid var(--color-border);}

.mobile-drawer__nav{flex:1;padding:6px 0;}
.mobile-drawer__nav ul.mobile-menu,
.mobile-drawer__nav ul.nav-menu-fallback{
	display:flex;flex-direction:column;
}
.mobile-drawer__nav ul.mobile-menu li a,
.mobile-drawer__nav ul.nav-menu-fallback li a{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:13px 18px;
	font-family:var(--font-display);font-weight:600;font-size:14px;
	text-transform:uppercase;letter-spacing:.03em;
	color:var(--color-text);
	border-bottom:1px solid var(--color-border);
}
.mobile-drawer__nav ul.mobile-menu li.current-menu-item > a,
.mobile-drawer__nav ul.mobile-menu li.current_page_item > a{color:var(--color-primary);}
.mobile-drawer__nav ul.mobile-menu li{position:relative;}
.mobile-drawer__nav ul.mobile-menu .sub-menu{display:none;background:var(--color-bg);}
.mobile-drawer__nav ul.mobile-menu li.submenu-open > .sub-menu{display:block;}
.mobile-drawer__nav ul.mobile-menu .sub-menu li a{
	padding-left:32px;text-transform:none;font-weight:500;font-size:13.5px;
}
.mobile-drawer__nav ul.mobile-menu .sub-menu .sub-menu li a{
	padding-left:48px;font-size:13px;
}
.mobile-drawer__nav ul.mobile-menu .sub-menu .sub-menu .sub-menu li a{
	padding-left:64px;font-size:12.5px;
}
.mobile-drawer__nav ul.mobile-menu .sub-menu .sub-menu .sub-menu .sub-menu li a{
	padding-left:80px;font-size:12px;
}
.mobile-drawer__nav ul.mobile-menu li.menu-cta > a{
	margin:10px 18px;border-radius:999px;
	background:var(--color-primary);color:#fff;
	border-bottom:0;justify-content:center;
}
.mobile-drawer__nav ul.mobile-menu li.menu-item-has-children > a .submenu-toggle{
	display:flex;align-items:center;justify-content:center;
	width:24px;height:24px;flex-shrink:0;
	font-size:16px;font-weight:800;line-height:1;
	color:var(--color-primary);
}
.mobile-drawer__nav ul.mobile-menu li.submenu-open > a .submenu-toggle{transform:rotate(45deg);}

.mobile-drawer__social{
	display:flex;gap:10px;padding:16px 18px;border-top:1px solid var(--color-border);
}
.mobile-drawer__social a{
	display:flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:50%;
	background:var(--color-bg);color:var(--color-primary);
}
.mobile-drawer__social a svg{width:15px;height:15px;display:block;}
.mobile-drawer__social a:hover{background:var(--color-primary);color:#fff;}

/* =========================================================
   5. HERO BANNER + GIỚI THIỆU
   ========================================================= */
.hero-banner{
	width:100%;
	aspect-ratio:16/5;
	max-height:460px;
	overflow:hidden;
	background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-darker) 100%);
	position:relative;
	display:flex;align-items:center;justify-content:center;
}
.hero-banner img{
	width:100%;height:100%;object-fit:cover;
}
.hero-banner__placeholder{
	display:flex;flex-direction:column;align-items:center;gap:14px;
	color:#fff;text-align:center;padding:0 20px;
}
.hero-banner__placeholder .star{width:42px;height:42px;}
.hero-banner__placeholder p{
	margin:0;font-family:var(--font-display);font-weight:700;
	text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:#FBC9CF;
}
.hero-banner__placeholder h2{color:#fff;margin:0;}

/* Khi Hero Banner lấy nội dung từ plugin slider (MetaSlider/Soliloquy):
   để plugin tự quản lý kích thước, không ép tỉ lệ/khung ảnh của theme. */
.hero-banner.hero-banner--plugin{
	aspect-ratio:auto;max-height:none;height:auto;
	overflow:visible;background:none;
	display:block;
}
.hero-banner.hero-banner--plugin img{
	width:auto;height:auto;object-fit:initial;
}
.hero-banner.hero-banner--plugin > div{width:100%;}

.intro-section{
	padding:50px 0;text-align:center;
}
.intro-section .section-eyebrow{justify-content:center;display:block;}
.intro-section h2{
	font-size:clamp(26px,3.4vw,38px);
	max-width:820px;margin:0 auto 16px;
}
.intro-section p{
	max-width:760px;margin:0 auto 24px;
	color:var(--color-text-muted);font-size:15.5px;
}

/* =========================================================
   6. KHỐI BAN CHẤP HÀNH / TỔ CHỨC (leader-grid)
   ========================================================= */
.leader-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.leader-card{
	display:block;
	background:var(--color-surface);border-radius:var(--radius);
	box-shadow:var(--shadow-card);padding:32px 26px;text-align:center;
	transition:box-shadow .2s ease, transform .2s ease;
	position:relative;
}
.leader-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);}
.leader-card .icon{
	width:56px;height:56px;border-radius:50%;
	background:var(--color-primary-tint);
	display:flex;align-items:center;justify-content:center;
	margin:0 auto 18px;
}
.leader-card .icon svg{width:24px;height:24px;color:var(--color-primary);}
.leader-card h3{font-size:17px;margin-bottom:8px;color:var(--color-text);}
.leader-card p{font-size:13.5px;color:var(--color-text-muted);margin:0;}

/* Khối có cấu hình liên kết - thêm mũi tên góc dưới phải, đổi màu khi hover */
.leader-card--link{color:inherit;text-decoration:none;padding-bottom:46px;}
.leader-card--link h3{transition:color .15s ease;}
.leader-card--link:hover h3{color:var(--color-primary);}
.leader-card__arrow{
	position:absolute;right:18px;bottom:16px;
	width:30px;height:30px;border-radius:50%;
	background:var(--color-primary-tint);color:var(--color-primary);
	display:flex;align-items:center;justify-content:center;
	transition:background .15s ease, color .15s ease, transform .15s ease;
}
.leader-card--link:hover .leader-card__arrow{
	background:var(--color-primary);color:#fff;transform:translateX(3px);
}

/* =========================================================
   7. THẺ SỰ KIỆN (event-card với date-badge)
   ========================================================= */
.event-grid{display:flex;flex-direction:column;gap:18px;}
.event-card{
	display:flex;gap:18px;align-items:center;
	background:var(--color-surface);border-radius:var(--radius);
	box-shadow:var(--shadow-card);padding:16px;
	transition:box-shadow .2s ease, transform .2s ease;
}
.event-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.event-card .date-badge{
	flex-shrink:0;width:64px;height:64px;border-radius:var(--radius);
	background:var(--color-primary);color:#fff;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	font-family:var(--font-display);
}
.event-card .date-badge .day{font-size:24px;font-weight:800;line-height:1;}
.event-card .date-badge .month{font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.event-card .thumb{
	width:96px;height:72px;flex-shrink:0;border-radius:4px;
	background:var(--color-border) center/cover no-repeat;
}
.event-card .body{min-width:0;flex:1;}
.event-card h3{font-size:15.5px;margin:0 0 6px;line-height:1.4;}
.event-card h3 a{color:var(--color-text);}
.event-card h3 a:hover{color:var(--color-primary);}
.event-card .event-meta{
	font-size:12.5px;color:var(--color-text-muted);
	display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.event-card .event-meta__location{
	display:inline-flex;align-items:center;gap:4px;
	color:var(--color-primary-dark);font-weight:600;
}
.event-card .event-meta__location svg{flex-shrink:0;}

/* =========================================================
   8. ENTRY META (dùng chung)
   ========================================================= */
.entry-meta{
	font-size:12.5px;
	color:var(--color-text-muted);
	display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.entry-meta a{color:inherit;}
.entry-meta a:hover{color:var(--color-primary);}
.entry-meta .cat-badge{
	font-family:var(--font-display);
	font-weight:700;color:var(--color-primary);
	text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;
}

/* =========================================================
   7. POST CARDS / GRID TIN TỨC
   ========================================================= */
.post-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}
.post-grid.post-grid--2{grid-template-columns:repeat(2,1fr);}

.card{
	background:var(--color-surface);
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow-card);
	display:flex;flex-direction:column;
	transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);}
.card .card-thumb{
	display:block;
	aspect-ratio:16/10;
	background:var(--color-border) center/cover no-repeat;
}
.card .card-body{
	padding:18px 20px 20px;
	display:flex;flex-direction:column;gap:10px;flex:1;
}
.card .card-meta{
	display:flex;align-items:center;gap:10px;
	font-size:12px;color:var(--color-text-muted);
}
.card .card-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--color-border);}
.card h3{
	font-size:16.5px;margin:0;line-height:1.4;
}
.card h3 a{color:var(--color-text);}
.card h3 a:hover{color:var(--color-primary);}
.card .card-excerpt{
	font-size:13.5px;color:var(--color-text-muted);
	margin:0;line-height:1.6;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .read-more-link{margin-top:auto;}

/* Tin tức dạng danh sách ngang (cho danh mục/sidebar) */
.list-post{
	display:flex;gap:14px;
	padding:14px 0;
	border-bottom:1px solid var(--color-border);
}
.list-post:first-child{padding-top:0;}
.list-post:last-child{border-bottom:0;padding-bottom:0;}
.list-post .thumb{
	width:96px;height:72px;flex-shrink:0;
	background:var(--color-border) center/cover no-repeat;
	border-radius:4px;
}
.list-post .body{min-width:0;}
.list-post h3,.list-post h4{
	font-size:14.5px;margin:0 0 6px;line-height:1.4;
}
.list-post h3 a,.list-post h4 a{color:var(--color-text);}
.list-post h3 a:hover,.list-post h4 a:hover{color:var(--color-primary);}

/* Tin nổi bật - ảnh đại diện + số thứ tự + ngày + tiêu đề */
.highlight-list{display:flex;flex-direction:column;}
.highlight-item{
	display:flex;gap:12px;align-items:flex-start;
	padding:12px 0;border-bottom:1px solid var(--color-border);
}
.highlight-item:first-child{padding-top:0;}
.highlight-item:last-child{border-bottom:0;padding-bottom:0;}
.highlight-item .thumb{
	position:relative;flex-shrink:0;
	width:68px;height:56px;border-radius:4px;
	background:var(--color-border) center/cover no-repeat;
	display:block;
}
.highlight-item .thumb .rank{
	position:absolute;top:0;left:0;
	background:var(--color-primary);color:#fff;
	font-family:var(--font-display);font-weight:800;font-size:11px;
	line-height:1;padding:2px 6px;border-radius:4px 0 4px 0;
}
.highlight-item .body{min-width:0;}
.highlight-item .date{
	display:block;font-size:11px;color:var(--color-text-muted);
	margin-bottom:4px;
}
.highlight-item h4{font-size:14px;margin:0;line-height:1.5;}
.highlight-item h4 a{color:var(--color-text);}
.highlight-item h4 a:hover{color:var(--color-primary);}

/* =========================================================
   8. SIDEBAR / WIDGETS
   ========================================================= */
.widget{
	background:var(--color-surface);
	border-radius:var(--radius);
	box-shadow:var(--shadow-card);
	padding:22px;
	margin-bottom:24px;
}
.widget-title{
	font-size:15px;
	text-transform:uppercase;
	letter-spacing:.06em;
	margin:0 0 16px;
	padding-bottom:12px;
	border-bottom:2px solid var(--color-border);
	display:flex;align-items:center;gap:8px;
}
.widget-title::before{
	content:"";display:block;width:8px;height:8px;
	background:var(--color-primary);
	clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.widget ul{display:flex;flex-direction:column;gap:10px;}
.widget select,
.widget input[type="text"],
.widget input[type="search"],
.widget input[type="email"]{
	width:100%;padding:9px 12px;border:1px solid var(--color-border);
	border-radius:4px;font-family:inherit;font-size:13.5px;background:var(--color-bg);
}
.widget_categories ul li,
.widget_archive ul li,
.widget_pages ul li,
.widget_meta ul li,
.widget_recent_comments ul li,
.widget_recent_entries ul li,
.widget_nav_menu ul li{
	display:flex;justify-content:space-between;align-items:center;
	font-size:14px;padding:9px 0;border-bottom:1px dashed var(--color-border);
	gap:8px;
}
.widget_categories ul li:last-child,
.widget_archive ul li:last-child,
.widget_pages ul li:last-child,
.widget_meta ul li:last-child,
.widget_recent_comments ul li:last-child,
.widget_recent_entries ul li:last-child,
.widget_nav_menu ul li:last-child{border-bottom:0;}
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_recent_comments ul li a,
.widget_recent_entries ul li a,
.widget_nav_menu ul li a{
	color:var(--color-text);font-weight:500;
}
.widget_categories ul li a::before,
.widget_nav_menu ul li a::before{
	content:"›  ";color:var(--color-primary);font-weight:800;
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_recent_comments ul li a:hover,
.widget_recent_entries ul li a:hover,
.widget_nav_menu ul li a:hover{color:var(--color-primary);}
.widget_categories .count,
.widget_archive .count{
	background:var(--color-primary-tint);color:var(--color-primary-dark);
	font-size:11px;font-weight:700;border-radius:999px;
	padding:2px 8px;
}
.widget_recent_entries ul li{
	display:block;
}
.widget_recent_entries ul li .post-date{
	display:block;font-size:11px;color:var(--color-text-muted);margin-top:2px;
}
.widget_search form{display:flex;gap:0;}

/* Khối thông tin Đoàn - widget khẩu hiệu */
.widget--union{
	background:linear-gradient(155deg,var(--color-primary) 0%,var(--color-primary-darker) 100%);
	color:#fff;text-align:center;
}
.widget--union .star{width:34px;height:34px;margin:0 auto 12px;}
.widget--union .widget-title{
	color:#fff;border-bottom-color:rgba(255,255,255,.25);
	justify-content:center;
}
.widget--union .widget-title::before{display:none;}
.widget--union p{color:#F6DDE1;font-size:13.5px;margin-bottom:14px;}
.widget--union .btn{
	display:inline-block;background:#fff;color:var(--color-primary-dark);
	font-family:var(--font-display);font-weight:700;font-size:13px;
	text-transform:uppercase;letter-spacing:.06em;
	padding:10px 22px;border-radius:999px;
}
.widget--union .btn:hover{background:var(--color-gold);color:var(--color-primary-darker);}

/* Lịch công tác Đoàn (table widget) */
.widget--schedule table{font-size:13px;}
.widget--schedule th,
.widget--schedule td{
	padding:8px 6px;border-bottom:1px solid var(--color-border);text-align:left;
}
.widget--schedule th{
	font-family:var(--font-display);text-transform:uppercase;
	font-size:11px;letter-spacing:.06em;color:var(--color-text-muted);
}
.widget--schedule .tag{
	display:inline-block;background:var(--color-primary-tint);
	color:var(--color-primary-dark);font-size:11px;font-weight:700;
	border-radius:4px;padding:2px 8px;
}

/* Tag cloud */
.tagcloud a{
	display:inline-block;margin:0 6px 8px 0;
	padding:6px 14px;border-radius:999px;
	border:1px solid var(--color-border);
	font-size:12px !important;color:var(--color-text);
}
.tagcloud a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}

/* =========================================================
   9. CONTENT TOÀN TRANG / BÀI VIẾT ĐƠN
   ========================================================= */
.page-header{margin-bottom:24px;}
.page-header .page-title{
	font-size:26px;
	text-transform:uppercase;
	border-left:6px solid var(--color-primary);
	padding-left:14px;
}
.page-header .archive-description{
	color:var(--color-text-muted);font-size:14px;margin-top:8px;
}

.single-post-header{margin-bottom:22px;}
.single-post-header .entry-title{
	font-size:clamp(24px,3.4vw,34px);
	margin-bottom:14px;
}
.single-post-header .entry-meta{
	padding-bottom:18px;border-bottom:1px solid var(--color-border);
}
.single-post-thumb{
	margin:20px 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
}

.entry-content{font-size:16px;max-width:100%;overflow-wrap:break-word;word-break:break-word;}
.entry-content > *:first-child{margin-top:0;}
.entry-content h2{
	font-size:22px;margin-top:1.6em;
	padding-left:14px;border-left:5px solid var(--color-primary);
}
.entry-content h3{font-size:18px;margin-top:1.4em;}
.entry-content a{text-decoration:underline;text-decoration-color:var(--color-primary-tint);}
.entry-content blockquote{
	margin:1.6em 0;padding:18px 22px;
	background:var(--color-primary-tint);
	border-left:5px solid var(--color-primary);
	font-style:italic;color:var(--color-primary-darker);
	border-radius:0 var(--radius) var(--radius) 0;
}
/* Ảnh & media: không bao giờ vượt quá chiều rộng nội dung, giữ tỉ lệ gốc */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object{
	max-width:100%;
	height:auto;
}
.entry-content img,
.entry-content figure{border-radius:var(--radius);}
.entry-content figure img{width:auto;margin:0 auto;}
.entry-content figcaption{
	font-size:13px;color:var(--color-text-muted);text-align:center;margin-top:8px;
}
/* Trung hoà margin âm của khối "wide"/"full" để không tạo cuộn ngang */
.entry-content .alignfull,
.entry-content .alignwide{
	margin-left:0;margin-right:0;max-width:100%;width:100%;
}
.entry-content .alignfull img,
.entry-content .alignwide img{width:100%;}
/* Ảnh canh trái/phải: giới hạn chiều rộng để không chiếm hết màn hình nhỏ */
.entry-content .alignleft,
.entry-content .alignright{
	max-width:100%;
}
@media (min-width: 600px){
	.entry-content .alignleft{float:left;margin:0 22px 16px 0;max-width:45%;}
	.entry-content .alignright{float:right;margin:0 0 16px 22px;max-width:45%;}
}
.entry-content ul:not(.menu),
.entry-content ol{
	margin:0 0 1.2em;padding-left:1.4em;list-style:revert;
}
/* Bảng rộng: cho phép cuộn ngang trong khung thay vì làm tràn trang */
.entry-content table{margin:1.4em 0;font-size:14px;}
.entry-content table th,.entry-content table td{
	border:1px solid var(--color-border);padding:8px 12px;
}
.entry-content table th{background:var(--color-primary-tint);}
@media (max-width: 640px){
	.entry-content table{display:block;overflow-x:auto;white-space:nowrap;border:1px solid var(--color-border);}
	.entry-content table th,
	.entry-content table td{border:0;border-bottom:1px solid var(--color-border);}
}
.entry-content pre{
	overflow-x:auto;max-width:100%;
	padding:14px;border-radius:var(--radius);background:var(--color-bg-alt);
}
.entry-footer{
	margin-top:30px;padding-top:18px;border-top:1px solid var(--color-border);
	display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.entry-footer .tags-links a{
	display:inline-block;margin:0 6px 6px 0;padding:5px 12px;
	border-radius:999px;border:1px solid var(--color-border);font-size:12px;
}
.entry-footer .tags-links a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}

.share-box{
	margin-top:24px;padding:18px;border-radius:var(--radius);
	background:var(--color-bg);border:1px dashed var(--color-border);
	display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.share-box span{font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;}
.share-box a{
	display:flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:50%;
	background:var(--color-primary);color:#fff;font-size:14px;
}
.share-box a:hover{background:var(--color-primary-dark);color:#fff;}

/* Author box */
.author-box{
	display:flex;gap:16px;align-items:center;
	background:var(--color-bg);border-radius:var(--radius);
	padding:18px;margin-top:24px;border:1px solid var(--color-border);
}
.author-box img{border-radius:50%;width:56px;height:56px;}
.author-box h4{margin:0 0 4px;font-size:14px;}
.author-box p{margin:0;font-size:13px;color:var(--color-text-muted);}

/* Related posts */
.related-posts{margin-top:40px;}

/* =========================================================
   10. PAGINATION
   ========================================================= */
.pagination,
.post-navigation{
	display:flex;justify-content:center;align-items:center;
	gap:8px;margin-top:34px;flex-wrap:wrap;
}
.pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:38px;height:38px;padding:0 10px;
	border-radius:4px;border:1px solid var(--color-border);
	background:var(--color-surface);
	font-family:var(--font-display);font-weight:600;font-size:13px;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover{
	background:var(--color-primary);border-color:var(--color-primary);color:#fff;
}
.pagination .page-numbers.dots{border:0;background:transparent;}

.post-navigation{justify-content:space-between;}
.post-navigation .nav-previous,
.post-navigation .nav-next{
	flex:1;max-width:48%;
	background:var(--color-surface);border:1px solid var(--color-border);
	border-radius:var(--radius);padding:14px 16px;font-size:13px;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.post-navigation .nav-next{text-align:right;}
/* Khi chỉ còn 1 bài (đầu/cuối danh sách) - mở rộng full width, giữ đúng hướng căn lề */
.post-navigation .nav-previous:only-child,
.post-navigation .nav-next:only-child{
	max-width:100%;
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a{
	font-weight:600;color:var(--color-text);
}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover{
	border-color:var(--color-primary);
	box-shadow:var(--shadow-card);
}
.post-navigation .nav-previous:hover a,
.post-navigation .nav-next:hover a{color:var(--color-primary);}
.post-navigation .nav-subtitle{
	display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
	color:var(--color-text-muted);margin-bottom:4px;
}

/* =========================================================
   11. COMMENTS
   ========================================================= */
.comments-area{margin-top:46px;}
.comments-title{
	font-size:20px;text-transform:uppercase;
	border-left:6px solid var(--color-primary);padding-left:14px;margin-bottom:20px;
}
.comment-list{display:flex;flex-direction:column;gap:18px;}
.comment-list .children{margin-top:18px;margin-left:36px;display:flex;flex-direction:column;gap:18px;}
.comment-body{
	display:flex;gap:14px;background:var(--color-surface);
	border:1px solid var(--color-border);border-radius:var(--radius);padding:16px;
}
.comment-body .avatar{border-radius:50%;width:46px;height:46px;flex-shrink:0;}
.comment-meta .fn{font-weight:700;font-size:14px;}
.comment-meta time{font-size:12px;color:var(--color-text-muted);margin-left:8px;}
.comment-content p{margin:8px 0 0;font-size:14px;}
.reply a{
	font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
	border:1px solid var(--color-primary);color:var(--color-primary);
	border-radius:999px;padding:4px 12px;
}
.reply a:hover{background:var(--color-primary);color:#fff;}

.comment-respond{
	margin-top:26px;background:var(--color-surface);border-radius:var(--radius);
	padding:22px;border:1px solid var(--color-border);
}
.comment-respond .comment-reply-title{font-size:18px;margin-bottom:14px;}
.comment-form p{margin-bottom:14px;}
.comment-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
	width:100%;padding:10px 14px;border:1px solid var(--color-border);
	border-radius:4px;font-family:inherit;font-size:14px;background:var(--color-bg);
}
.comment-form textarea{min-height:120px;}
.comment-form .form-submit input{
	background:var(--color-primary);color:#fff;border:0;
	font-family:var(--font-display);font-weight:700;font-size:13px;
	text-transform:uppercase;letter-spacing:.08em;
	padding:12px 28px;border-radius:999px;
}
.comment-form .form-submit input:hover{background:var(--color-primary-dark);}

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer{
	background:var(--color-primary-darker);
	color:#EFD3D8;
	margin-top:50px;
}
.footer-widgets{
	padding:50px 0 30px;
	display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;
}
.footer-widgets .footer-col h2,
.footer-widgets .footer-col h3{
	color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.06em;
	margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid rgba(255,255,255,.15);
}
.footer-widgets .footer-col p,
.footer-widgets .footer-col li,
.footer-widgets .footer-col a{
	color:#EFD3D8;font-size:13.5px;line-height:1.8;
}
.footer-widgets .footer-col a:hover{color:var(--color-gold);}
.footer-widgets .footer-col ul li{padding:4px 0;}

/* Menu "Liên kết nhanh" - icon tự nhận diện (Facebook, YouTube, Zalo, TikTok, website...) */
.footer-menu li a{
	display:flex;align-items:center;gap:10px;
}
.footer-menu .quick-link-icon{
	display:flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:50%;flex-shrink:0;
	background:rgba(255,255,255,.1);color:#fff;
	transition:background .15s ease, color .15s ease;
}
.footer-menu .quick-link-icon svg{display:block;}
.footer-menu a:hover .quick-link-icon{background:var(--color-gold);color:var(--color-primary-darker);}
.footer-menu .quick-link-text{color:inherit;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.footer-logo-badge{
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;border-radius:8px;
	background:#fff;flex-shrink:0;padding:4px;
}
.footer-logo-badge img,
.footer-logo-badge img.custom-logo{
	max-width:100%;max-height:100%;width:auto;height:auto;
}
.footer-brand strong{color:#fff;font-family:var(--font-display);font-size:16px;}
.footer-social{display:flex;gap:10px;margin-top:14px;}
.footer-social a{
	display:flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:50%;
	border:1px solid rgba(255,255,255,.25);color:#fff;
}
.footer-social a svg{width:15px;height:15px;display:block;}
.footer-social a:hover{background:var(--color-gold);border-color:var(--color-gold);color:var(--color-primary-darker);}

.site-info{
	border-top:1px solid rgba(255,255,255,.12);
	padding:18px 0;font-size:12.5px;
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
	color:#D9A9B0;
}
.site-info a{color:#fff;}

/* =========================================================
   13. UTILITIES & RESPONSIVE
   ========================================================= */
.skip-link{
	position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px;z-index:999;
}
.skip-link:focus{left:10px;}

@media (min-width: 769px){
	.mobile-drawer,
	.mobile-drawer-overlay{display:none;}
}

@media (max-width: 1024px){
	.site-grid{grid-template-columns:1fr;}
	.footer-widgets{grid-template-columns:1fr 1fr;}
	.post-grid{grid-template-columns:repeat(2,1fr);}
	.leader-grid{grid-template-columns:1fr;gap:18px;}
	.hero-banner{aspect-ratio:16/7;}
}

@media (max-width: 768px){
	.site-branding{gap:10px;}
	.site-branding__identity{gap:8px;}
	.site-branding__text{overflow:hidden;}
	.site-branding__text .site-title{
		font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw;
	}
	.site-branding__text .site-description{display:none;}
	.header-search{display:none;}
	.main-navigation{display:none;}
	.menu-toggle{display:flex;}
	.brand-logo img{max-height:36px;}
	.brand-divider{height:28px;}
	.post-grid{grid-template-columns:1fr;}
	.footer-widgets{grid-template-columns:1fr;padding:34px 0 16px;}
	.site-info{flex-direction:column;text-align:center;}
	.post-navigation{flex-direction:column;}
	.post-navigation .nav-previous,
	.post-navigation .nav-next{max-width:100%;text-align:left;}
	.hero-banner{aspect-ratio:4/3;}
	.section{padding:44px 0;}
	.section-header.has-action{flex-direction:column;align-items:flex-start;}
	.event-card{flex-wrap:wrap;}
	.event-card .thumb{display:none;}
}

/* =========================================================
   NÚT "LÊN ĐẦU TRANG" - nổi góc phải dưới, hiện khi cuộn xuống
   ========================================================= */
.scroll-to-top{
	position:fixed;right:22px;bottom:22px;
	width:46px;height:46px;border-radius:50%;
	background:var(--color-primary);color:#fff;border:0;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 18px rgba(122,10,18,.35);
	cursor:pointer;z-index:900;
	opacity:0;visibility:hidden;transform:translateY(12px);
	transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .15s ease;
}
.scroll-to-top.is-visible{
	opacity:1;visibility:visible;transform:translateY(0);
}
.scroll-to-top:hover{background:var(--color-primary-dark);}
body.drawer-open .scroll-to-top{opacity:0;visibility:hidden;pointer-events:none;}

@media (max-width:768px){
	.scroll-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}