/**
 * PHPH Theme — main stylesheet.
 * Bảng màu/typography lấy từ brand reference (mediaonlinevn.com):
 * accent #264C84, text #5E5E5E, body Arial, heading Roboto, menu Titillium Web.
 */

/* ---------- Variables ---------- */
:root {
	--phph-color-primary: #264C84;
	--phph-color-primary-dark: #1e3d6a;
	--phph-color-text: #000000;
	--phph-color-text-strong: #232323;
	--phph-color-bg-menu: #F6F6F6;
	--phph-color-bg-page: #E7DFC9;
	--phph-color-bg-content: #FFFFFF;
	--phph-font-body: Verdana, Arial, Helvetica, sans-serif;
	--phph-font-heading: Verdana, Arial, sans-serif;
	/* Tít bài (h1) và tít phụ (h2-h4) — mặc định (Style 1) dùng chung font heading như
	   cũ; Style 2 override 2 biến này riêng (xem inc/enqueue.php). */
	--phph-font-title: var(--phph-font-heading);
	--phph-font-subheading: var(--phph-font-heading);
	--phph-font-menu: sans-serif;
	--phph-max-width: 1024px;
	/* Giao diện bám bản tham chiếu — ảnh nền ở assets/images/ */
	--phph-header-h: 110px;      /* chiều cao dải nền gỗ */
	--phph-subheader-h: 40px;    /* chiều cao dải vân đá */
	--phph-content-bg: #FAF3F3;  /* nền khối nội dung */
}

/* ---------- Reset cơ bản ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	/* Nền trang: hoa văn trống đồng lát kín, màu nền dự phòng khi ảnh chưa tải. */
	background-color: var(--phph-color-bg-page);
	background-image: url('../images/bkvn.jpg');
	background-repeat: repeat;
	color: var(--phph-color-text);
	font-family: var(--phph-font-body);
	/* Bản gốc: 15px / màu #000 / Verdana. */
	font-size: 15px;
	line-height: 1.5;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.phph-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 999;
	padding: 10px 16px;
	background: var(--phph-color-primary);
	color: #FFFFFF;
	text-decoration: none;
}
.phph-skip-link:focus {
	position: fixed;
	top: 0;
}

h1, h2, h3, h4 {
	color: var(--phph-color-primary);
	font-weight: 700;
	margin: 0 0 12px;
}
h1 {
	font-family: var(--phph-font-title);
}
h2, h3, h4 {
	font-family: var(--phph-font-subheading);
}

/* ---------- Layout chung ---------- */
.phph-nav__menu,
.phph-site-content,
.phph-layout {
	max-width: var(--phph-max-width);
	margin-left: auto;
	margin-right: auto;
}

.phph-site-content {
	background: var(--phph-content-bg);
	/* Bản gốc: #container rộng 1024, padding 0 — cột nội dung bắt đầu đúng mép khung.
	   Phần chữ thụt vào 20px là do padding của từng khối bên trong, không phải của khung. */
	padding: 20px 0;
}

.phph-layout {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	/* Không padding ngang — khớp bản gốc. Khoảng hở 14px bên phải sinh ra tự nhiên do
	   cộng chiều rộng: cột nội dung 680 + gap 30 + sidebar 300 = 1010 < 1024. */
}

.phph-layout--with-sidebar .phph-main {
	/* Bản gốc: #content rộng đúng 680px -> sidebar bắt đầu ở x=831. Cho phép co lại
	   (flex-shrink 1) để màn hẹp hơn 1024 không bị tràn. */
	flex: 0 1 680px;
	max-width: 680px;
	min-width: 0;
	/* Khung .phph-site-content không còn padding ngang, nên nội dung single/archive
	   tự thụt 20px ở đây — tương ứng padding của .post bên bản gốc. */
	padding: 0 20px;
}

.phph-sidebar {
	flex: 0 0 300px;
	width: 300px;
}

@media (max-width: 900px) {
	.phph-layout { flex-direction: column; }
	.phph-layout--with-sidebar .phph-main,
	.phph-homepage { flex-basis: auto; max-width: none; }
	/* Xếp dọc: sidebar tự lo lề 20px vì không còn cột bên cạnh để canh theo. */
	.phph-sidebar { width: 100%; flex-basis: auto; padding: 0 20px; }
}

/* ---------- Header: dải nền gỗ (bám bản tham chiếu) ----------
 * #header bản gốc: bg-php.png repeat-x, cao 110px; bên trong .wrap rộng 1024px canh giữa.
 * Logo chữ ký float trái (415x100, lệch xuống 7px); cột phải cách logo 50px, gồm menu phụ
 * ở trên (y=10) và con dấu đỏ 56x56 ở dưới (y=56).
 */
.phph-header {
	background-image: url('../images/bg-php.png');
	background-repeat: repeat-x;
	background-position: 0 0;
	height: var(--phph-header-h);
}
.phph-header__wrap {
	max-width: var(--phph-max-width);
	margin: 0 auto;
	height: var(--phph-header-h);
	display: flex;
	align-items: flex-start;
	gap: 50px;
	padding: 0 16px;
}
.phph-header__branding {
	/* Bản gốc: khối .logo rộng 420px (ảnh 415px + 5px chừa), lệch xuống 7px. */
	flex: 0 0 420px;
	padding: 7px 0 0;
	line-height: 0;
}
.phph-header__logo-link { display: inline-block; }
.phph-header__logo,
.phph-header__branding .custom-logo {
	display: block;
	width: 415px;
	max-width: 100%;
	height: auto;
}
.phph-header__right {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 10px;
	display: flex;
	flex-direction: column;
}
/* Con dấu đỏ — dùng làm background để không thêm <img> trang trí vào DOM. */
.phph-header__seal {
	width: 56px;
	height: 56px;
	margin-top: 25px;
	background-image: url('../images/php-seal-header.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 56px 56px;
}

/* Menu phụ trong header (Home / It's PHPH) — nền trong suốt để lộ vân gỗ. */
.phph-topbar-row {
	background: none;
	border: 0;
}
.phph-topbar-row__inner {
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	/* Bản gốc cho khối menu này float right: đo trên phamhongphuoc.net thì khối 1024px
	   kết thúc ở 1145 còn chữ cuối "It's PHP" kết thúc ở 1136 — tức cách mép phải 9px.
	   Ở đây .phph-header__wrap có padding 0 16px nên mép trong chỉ tới 1129, phải thò ra
	   7px mới khớp. Không dùng padding của wrap được vì nó còn canh cả logo bên trái. */
	justify-content: flex-end;
	margin-right: -7px;
}
/* Mục cuối còn 8px padding phải thì chữ bị đẩy vào trong, canh phải sẽ hụt đúng 8px. */
.phph-topbar-row .phph-nav__menu li:last-child a { padding-right: 0; }
.phph-topbar-row__inner .phph-widget { margin-bottom: 0; }
.phph-topbar-row a {
	color: #663333;
	font-size: 14px;
	text-decoration: none;
}
/* Ghi đè padding/line-height của widget menu để hàng này cao ~21px như bản gốc —
   nếu để mặc định (28px line-height) thì con dấu bên dưới bị đẩy lệch 11px. */
.phph-topbar-row .phph-nav__menu a {
	padding: 0 8px 0 0;
	line-height: 21px;
	font-family: var(--phph-font-body);
	font-size: 14px;
	/* Bản gốc: computed style của hai link này là 700, không phải 400. */
	font-weight: 700;
	text-transform: none;
	color: #663333;
	text-shadow: none;
}
.phph-topbar-row .phph-nav__menu a:hover,
.phph-topbar-row .phph-nav__menu .current-menu-item > a {
	background: none;
	color: #663333;
	text-decoration: underline;
}
.phph-topbar-row a:hover { text-decoration: underline; }

/* ---------- Subheader: dải nền vân đá chứa menu chính + tìm kiếm ---------- */
.phph-subheader {
	background-image: url('../images/subheader-php.png');
	background-repeat: repeat-x;
	background-position: 0 0;
	min-height: var(--phph-subheader-h);
}
.phph-subheader__wrap {
	max-width: var(--phph-max-width);
	margin: 0 auto;
	min-height: var(--phph-subheader-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 16px;
}

/* Màn hẹp: bản tham chiếu là theme cố định 1024px không responsive, nên phần này tự
 * xử lý — bỏ chiều cao cố định 110px, cho logo co lại theo màn, xếp con dấu cạnh menu
 * phụ thay vì nằm dưới. Không làm vậy thì logo 415px gây tràn ngang trên điện thoại.
 */
@media (max-width: 900px) {
	.phph-header { height: auto; }
	.phph-header__wrap {
		height: auto;
		flex-wrap: wrap;
		gap: 10px;
		padding: 8px 16px;
	}
	.phph-header__branding {
		flex: 1 1 100%;
		padding-top: 0;
	}
	.phph-header__logo,
	.phph-header__branding .custom-logo {
		width: auto;
		max-width: 100%;
	}
	.phph-header__right {
		flex: 1 1 100%;
		padding-top: 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.phph-header__seal { margin-top: 0; flex: 0 0 56px; }
	/* Ở mobile khối này nằm trong flex row space-between — thò ra ngoài là lệch. */
	.phph-topbar-row__inner { margin-right: 0; justify-content: flex-start; }
	.phph-subheader { min-height: 0; }
	.phph-subheader__wrap {
		min-height: 0;
		flex-wrap: wrap;
		padding: 6px 16px;
	}
}

/* Ô tìm kiếm nằm bên phải dải vân đá. */
.phph-header__widget {
	flex: 0 0 auto;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: right;
}
.phph-header__widget .phph-widget {
	margin-bottom: 0;
	display: inline-block;
}

/* ---------- Nav menu ----------
 * Nav nằm bên trong .phph-subheader (dải vân đá) nên không tự vẽ nền và không sticky —
 * nếu sticky thì lúc cuộn nó sẽ tách khỏi dải vân đá và trôi nổi trên nền trong suốt.
 */
.phph-nav {
	background: none;
	flex: 1 1 auto;
	min-width: 0;
}

.phph-nav__menu-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	/* Không padding ngang: .phph-subheader__wrap bao ngoài đã có padding 0 16px rồi,
	   để cả hai thì menu chính bị thụt vào 32px trong khi logo chỉ thụt 16px. */
	padding: 0;
}

/* Widget trong Top Bar nằm ngang, không có margin-bottom mặc định của widget */
.phph-nav__menu-wrap .phph-widget {
	margin-bottom: 0;
}

/* Widget "PHPH: Menu điều hướng" chiếm phần còn lại, đẩy search/date sang phải */
.phph-nav__menu-wrap [id^="phph_nav_menu-"] {
	flex: 1 1 auto;
	min-width: 0;
}
.phph-nav__menu-wrap [id^="phph_search-"],
.phph-nav__menu-wrap [id^="phph_date-"] {
	flex: 0 0 auto;
}
.phph-nav__menu-wrap [id^="phph_date-"] {
	font-size: 13px;
	color: var(--phph-color-text);
	padding: 0 8px;
}
.phph-nav__menu-wrap [id^="phph_search-"] .phph-search {
	max-width: 240px;
}

.phph-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.phph-nav__menu li { position: relative; }

.phph-nav__menu a {
	display: block;
	/* Số đo lấy từ bản tham chiếu: 14px/700, uppercase, padding 2px 20px, line-height 28px. */
	padding: 2px 20px;
	line-height: 28px;
	font-family: var(--phph-font-menu);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #373737;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Nền sáng mờ thay vì khối xanh đặc — để vẫn thấy vân đá bên dưới. */
.phph-nav__menu a:hover,
.phph-nav__menu .current-menu-item > a {
	color: #000000;
	background: rgba(255, 255, 255, 0.45);
}

.phph-nav__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #FFFFFF;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	display: none;
	z-index: 41;
}

.phph-nav__menu li:hover > ul { display: block; }

.phph-nav__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 12px 16px;
	cursor: pointer;
}
.phph-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--phph-color-text-strong);
	margin: 4px 0;
}

@media (max-width: 782px) {
	.phph-nav__toggle { display: block; }
	.phph-nav__menu-wrap { display: none; }
	.phph-nav__menu-wrap.is-open { display: block; }
	.phph-nav__menu { flex-direction: column; }
	.phph-nav__menu ul { position: static; box-shadow: none; }
}

/* ---------- Breadcrumb ---------- */
.phph-breadcrumb {
	font-size: 13px;
	color: var(--phph-color-text);
	margin-bottom: 12px;
}
.phph-breadcrumb a { color: var(--phph-color-primary); text-decoration: none; }
.phph-breadcrumb__sep { margin: 0 4px; }
.phph-breadcrumb__current { color: var(--phph-color-text); }

.phph-article__date-top {
	font-size: 13px;
	color: var(--phph-color-text);
	margin-bottom: 12px;
}

/* Breadcrumb nhỏ/mờ ở đầu bài single post — phục vụ SEO (khớp với BreadcrumbList
   schema, Google yêu cầu structured data phải khớp nội dung HIỂN THỊ trên trang),
   không làm rối giao diện vì đã có date-top + title ngay bên dưới. */
.phph-article__breadcrumb {
	margin-bottom: 6px;
}
.phph-article__breadcrumb .phph-breadcrumb {
	font-size: 12px;
	opacity: 0.7;
	margin-bottom: 0;
}

/* ---------- Entry meta ---------- */
.phph-entry-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	color: var(--phph-color-text);
	margin-bottom: 12px;
}
/* Múi giờ nơi đăng: phụ trợ cho ngày tháng nên nhạt và nhỏ hơn, không cạnh tranh
   với chính con số ngày. Nằm trong <time> nên trôi theo dòng, không dính gap của flex. */
.phph-entry-meta__tz {
	margin-left: 4px;
	font-size: 12px;
	color: #777777;
}
.phph-entry-meta__category {
	color: #FFFFFF;
	background: var(--phph-color-primary);
	padding: 2px 8px;
	border-radius: 3px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
}

/* ---------- Article (single/page) ---------- */
.phph-article__title {
	font-size: 32px;
}
.phph-article__thumbnail {
	margin-bottom: 16px;
	aspect-ratio: 800 / 450;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
}
.phph-article__thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 800 / 450;
	object-fit: cover;
}
.phph-article__content { color: #000000; }
.phph-article__content p { margin: 0 0 16px; }

/* ---------- Ảnh trong nội dung (core Image block) — nút "Xem full size" khi hover +
   icon máy ảnh trước caption. Nút do inc/content-image-zoom.php chèn qua the_content
   filter; icon máy ảnh thuần CSS (::before + mask-image SVG), không đụng nội dung
   caption gốc. ---------- */
.phph-article__content .wp-block-image {
	position: relative;
}
/* Rule global "img { max-width:100%; height:auto; }" chỉ THU NHỎ ảnh lớn hơn khung
   chứa, không PHÓNG TO ảnh nhỏ hơn khung chứa — nếu ảnh gốc hẹp hơn cột content (vd do
   plugin tối ưu ảnh resize file gốc nhỏ lại), sẽ để lại khoảng trống bên phải. Rule này
   cụ thể hơn (2 class) nên thắng rule global, ép ảnh luôn lấp đầy đúng 100% khung chứa,
   height:auto tự giữ tỉ lệ gốc. Chỉ nhắm .wp-block-image (core Image block) — không đụng
   ảnh trong gallery/before-after/colorbox (class hoàn toàn khác, không match selector này). */
.phph-article__content .wp-block-image img {
	width: 100%;
	height: auto;
}
/* Đổi từ <a> sang <button> (xem inc/content-image-zoom.php) — reset style mặc định
   của trình duyệt cho <button> (border/padding/font) để giữ nguyên hình tròn như cũ. */
.phph-article__content .wp-block-image .phph-image-zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: rgba(0, 0, 0, 0.55);
	color: #FFFFFF;
	border: 0;
	border-radius: 50%;
	padding: 0;
	font: inherit;
	cursor: zoom-in;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.phph-article__content .wp-block-image:hover .phph-image-zoom,
.phph-article__content .wp-block-image:focus-within .phph-image-zoom {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.phph-article__content .wp-block-image .phph-image-zoom:hover {
	background: rgba(0, 0, 0, 0.8);
}
.phph-article__content .wp-block-image figcaption {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--phph-color-text, #5E5E5E);
}
.phph-article__content .wp-block-image figcaption::before {
	content: '';
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Khi in trang: chỉ giữ lại tiêu đề + ảnh + nội dung bài viết, ẩn toàn bộ phần điều
   hướng/khung UI không cần thiết trên giấy in. */
@media print {
	.phph-topbar-row,
	.phph-header,
	.phph-footer,
	.phph-back-to-top,
	.phph-breadcrumb,
	.phph-sidebar {
		display: none !important;
	}
	.phph-layout { display: block; }
	.phph-site-content { max-width: 100%; padding: 0; }
}


/* ---------- Pagination ---------- */

/* ---------- Widgets (chung) ---------- */
.phph-widget { margin-bottom: 24px; }

/* Spacer widget — chiều cao inline theo px người dùng nhập, không phụ thuộc CSS. */
.phph-spacer { display: block; width: 100%; }
@media (max-width: 900px) {
	.phph-spacer--hide-mobile { display: none; }
}
.phph-widget-title {
	background: var(--phph-color-primary);
	color: #FFFFFF;
	padding: 10px 14px;
	font-size: 16px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.phph-panel-title-link { color: #FFFFFF; text-decoration: none; }

.phph-widget--footer .phph-widget-title--footer {
	background: none;
	color: #FFFFFF;
	padding: 0 0 10px;
	text-transform: none;
}

/* ---------- Homepage Panel widget ----------
 * Layout bám sát bản tham chiếu phamhongphuoc.net: thanh tiêu đề nền xanh nhạt
 * chữ đen đậm, ảnh full-bleed có badge ngày nền xanh lá đè lên góc trên-trái,
 * rồi tiêu đề bài + excerpt. Màu lấy đúng từ computed style của bản tham chiếu.
 * Chỉ dùng cho site này nên hardcode thẳng, không đưa vào biến theme.
 */
:root {
	--phph-panel-head-bg: #BDE6FB;   /* nền thanh tiêu đề chuyên mục */
	--phph-panel-head-fg: #222222;   /* chữ trên thanh tiêu đề */
	--phph-panel-date-bg: #42890B;   /* nền badge ngày */
}

/* ---------- Sidebar: màu lấy đúng từ bản tham chiếu ----------
 * Bản gốc dùng 2 kiểu tiêu đề widget:
 *   - widget danh sách (Categories / Bài mới / Lưu trữ): nền cam đào #EBB08B
 *   - widget text/banner:                                nền xám nhạt #F6F6F6
 * Cả hai: chữ #222, 16px/700, viền dưới 1px #DBDBDB, padding 4px 0 4px 10px.
 * (Bản gốc padding-left 24px để chừa chỗ cho icon nhỏ về bên trái — about.png /
 *  tag.png / pages.png / calendar.png. Không có các file icon đó nên dùng 10px,
 *  tránh để lại khoảng trống trơ trọi.)
 */
:root {
	--phph-sidebar-head-list: #EBB08B;  /* tiêu đề widget danh sách */
	--phph-sidebar-head-text: #F6F6F6;  /* tiêu đề widget text/banner */
	--phph-sidebar-head-fg: #222222;
	--phph-sidebar-head-line: #DBDBDB;
	--phph-sidebar-chip-bg: #777777;    /* chip chuyên mục */
}
.phph-sidebar .phph-widget-title {
	background-color: var(--phph-sidebar-head-text);
	color: var(--phph-sidebar-head-fg);
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	padding: 4px 0 4px 24px;
	margin: 0 0 5px;
	border-bottom: 1px solid var(--phph-sidebar-head-line);
	display: block;
	background-repeat: no-repeat;
	background-position: 5px 50%;
}
/* Mỗi loại widget một icon 16x16, đúng bản gốc. */
.phph-sidebar .widget_text .phph-widget-title,
.phph-sidebar .widget_custom_html .phph-widget-title {
	background-image: url('../images/about.png');
}
.phph-sidebar .widget_phph_banner_ad .phph-widget-title,
.phph-sidebar .widget_phph_dual_banner .phph-widget-title {
	background-image: url('../images/star.png');
}
.phph-sidebar .widget_categories > .phph-widget-title {
	background-image: url('../images/tag.png');
}
.phph-sidebar .widget_phph_recent_posts > .phph-widget-title {
	background-image: url('../images/pages.png');
}
.phph-sidebar .widget_archive > .phph-widget-title {
	background-image: url('../images/calendar.png');
}
.phph-sidebar .widget_categories > .phph-widget-title,
.phph-sidebar .widget_archive > .phph-widget-title,
.phph-sidebar .widget_phph_recent_posts > .phph-widget-title {
	/* background-color chứ KHÔNG dùng shorthand `background:` — shorthand sẽ reset
	   background-image, xoá mất icon đặt ở rule phía trên. */
	background-color: var(--phph-sidebar-head-list);
}

/* Danh sách chuyên mục: chip xám chữ trắng, xếp theo hàng — đúng bản gốc. */
.phph-sidebar .widget_categories ul {
	list-style: none;
	margin: 5px;
	padding: 10px 5px;
	display: flex;
	flex-wrap: wrap;
}
.phph-sidebar .widget_categories li {
	margin: 0 8px 10px 0;
	padding: 0;
	color: #000000;
	font-size: 13px;
}
.phph-sidebar .widget_categories li a {
	display: inline-block;
	background: var(--phph-sidebar-chip-bg);
	color: #FFFFFF;
	font-size: 15px;
	line-height: 27px;
	padding: 0 8px;
	text-decoration: none;
}
.phph-sidebar .widget_categories li a:hover { background: #555555; }

/* Lưu trữ theo tháng: danh sách chữ đen thường. */
.phph-sidebar .widget_archive ul {
	list-style: none;
	margin: 5px;
	padding: 5px;
}
.phph-sidebar .widget_archive li { padding: 3px 0; }
.phph-sidebar .widget_archive a { color: #000000; font-size: 15px; text-decoration: none; }
.phph-sidebar .widget_archive a:hover { text-decoration: underline; }

/* Bài mới: bỏ khung trắng + viền của theme, để trong suốt như bản gốc. */
.phph-sidebar .phph-recent-posts {
	background: none;
	border: 0;
	padding: 5px;
}
.phph-sidebar .phph-recent-posts__title { color: #000000; font-size: 15px; font-weight: 400; }

/* Thanh tiêu đề: chỉ đổi trong widget panel, không đụng .phph-widget-title
   của sidebar/footer (vẫn nền xanh đậm chữ trắng như cũ). */
.widget_phph_homepage_panel > .phph-widget-title {
	background: var(--phph-panel-head-bg);
	color: var(--phph-panel-head-fg);
	/* 5px như bản gốc: padding 10px mỗi bên ăn mất chỗ của chữ, làm tiêu đề
	   dài nhất ("THẾ GIỚI CÔNG NGHỆ") rớt xuống dòng thứ hai. */
	padding: 5px;
	line-height: 20px;
	font-size: 15px;
	font-weight: 700;
	display: block;
	margin-bottom: 5px;
}
.widget_phph_homepage_panel > .phph-widget-title .phph-panel-title-link {
	color: var(--phph-panel-head-fg);
	text-decoration: none;
}
.widget_phph_homepage_panel > .phph-widget-title .phph-panel-title-link:hover {
	text-decoration: underline;
}

.phph-panel { background: transparent; padding: 0; border: 0; }
.phph-panel__featured-thumb {
	display: block;
	position: relative;          /* mốc cho badge ngày */
	margin-bottom: 8px;
	aspect-ratio: 800 / 450;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 0;
}
.phph-panel__featured-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 800 / 450;
	object-fit: cover;
}
/* Badge ngày: nền xanh lá, chữ trắng, nằm cách mép trên ảnh 20px, sát mép trái. */
.phph-panel__date {
	position: absolute;
	top: 20px;
	left: 0;
	background: var(--phph-panel-date-bg);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	padding: 2px 5px 4px;
	white-space: nowrap;
}
/* Badge ngày khi bài không có ảnh đại diện: không còn khung ảnh làm mốc định vị nên
   phải đứng theo dòng thay vì absolute, nếu không nó sẽ bám nhầm vào tổ tiên khác. */
.phph-panel__date--bare {
	position: static;
	display: inline-block;
	margin-bottom: 8px;
}
.phph-panel__featured-title {
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	margin: 0 0 4px;
}
.phph-panel__featured-title a { text-decoration: none; color: #000000; }
.phph-panel__featured-title a:hover { color: var(--phph-color-primary); }
.phph-panel__featured-excerpt {
	font-size: 15px;
	line-height: 20px;
	color: #000000;
	margin: 0 0 14px;
}
.phph-panel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #F0F0F0; }
.phph-panel__list-item { padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.phph-panel__list-item a { text-decoration: none; font-size: 14px; color: var(--phph-color-text-strong); }
.phph-panel__list-item a:hover { color: var(--phph-color-primary); }

/* Số cột > 1: lưới có thumbnail thay cho list text — cùng pattern với Universal widget */
.phph-panel__grid {
	display: grid;
	gap: 14px;
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid #F0F0F0;
}
.phph-panel__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.phph-panel__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.phph-panel__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
	.phph-panel__grid--cols-2,
	.phph-panel__grid--cols-3,
	.phph-panel__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.phph-panel__grid--cols-2,
	.phph-panel__grid--cols-3,
	.phph-panel__grid--cols-4 { grid-template-columns: 1fr; }
}
.phph-panel__grid-item { min-width: 0; }
.phph-panel__grid-thumb {
	display: block;
	aspect-ratio: 330 / 200;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
}
.phph-panel__grid-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 330 / 200;
	object-fit: cover;
}
.phph-panel__grid-title { font-size: 13px; margin: 6px 0 0; }
.phph-panel__grid-title a { text-decoration: none; color: var(--phph-color-text-strong); }
.phph-panel__grid-title a:hover { color: var(--phph-color-primary); }

/* ---------- Homepage widget area layout ----------
 * .phph-homepage nằm bên trong .phph-layout (flex, đã canh giữa + max-width sẵn) khi
 * front-page.php render — nên chỉ cần flex:1 1 auto cho chính nó, không tự set max-width.
 * Mỗi widget con mặc định full width (1 hàng); widget "Universal" có thể set 50%
 * (class .phph-widget--half do PHPH_Widget_Universal_Posts tự inject) để 2 widget nằm cạnh nhau.
 */
.phph-homepage {
	flex: 0 1 680px;
	max-width: 680px;
	min-width: 0;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	/* row-gap 24px / column-gap 15px — bản gốc để .box margin-right 15px, nhờ vậy mỗi
	   panel rộng 203px thay vì 197px. 6px đó là phần khiến "THẾ GIỚI CÔNG NGHỆ" rớt dòng. */
	gap: 24px 15px;
	align-content: flex-start;
}
.phph-homepage > .phph-widget {
	flex: 1 1 100%;
	margin-bottom: 0;
}
.phph-homepage > .phph-widget--half {
	flex: 1 1 calc(50% - 7.5px);
}
@media (max-width: 700px) {
	.phph-homepage > .phph-widget--half { flex: 1 1 100%; }
}

/* 1/3 width: 3 section chuyên mục nằm cạnh nhau (hàng panel nổi bật trang chủ).
   960px -> về 2 cột cho khỏi bóp chữ; 700px -> 1 cột như các widget khác. */
.phph-homepage > .phph-widget--third {
	flex: 1 1 calc(33.333% - 10px);
	min-width: 0;
}
@media (max-width: 960px) {
	.phph-homepage > .phph-widget--third { flex: 1 1 calc(50% - 7.5px); }
}
@media (max-width: 700px) {
	.phph-homepage > .phph-widget--third { flex: 1 1 100%; }
}


.phph-homepage__empty-notice {
	flex: 1 1 100%;
	padding: 24px;
	background: #FFF8E1;
	border: 1px dashed #E0C067;
	border-radius: 4px;
}

/* ---------- Banner widget ---------- */
.phph-banner { text-align: center; }
/* max-width chứ KHÔNG phải width: ảnh rộng hơn cột thì co lại vừa khung, ảnh nhỏ hơn
   thì giữ nguyên kích thước gốc — không phóng to thành mờ. Vẫn để inline-block để
   `text-align: center` của .phph-banner canh giữa được ảnh nhỏ. */
.phph-banner__img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}
.phph-banner__label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--phph-color-text);
	text-transform: uppercase;
}

/* ---------- Dual Banner widget (2 ảnh cạnh nhau) ---------- */
.phph-dual-banner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
/* aspect-ratio + background + overflow:hidden trên KHUNG BỌC (không chỉ trên img) —
   cùng lý do đã áp dụng cho mọi thumbnail khác trong theme: giữ đúng kích thước kể cả
   khi ảnh sai tỉ lệ hoặc bị lỗi/404. min-width:0 để tránh 1 ảnh đẩy phình cột kia. */
.phph-dual-banner__item {
	display: block;
	aspect-ratio: 1 / 1;
	background: #F0F0F0;
	overflow: hidden;
	border-radius: 4px;
	min-width: 0;
}
.phph-dual-banner__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 480px) {
	.phph-dual-banner { grid-template-columns: 1fr; }
}

/* ---------- Recent posts widget ---------- */
.phph-recent-posts { list-style: none; margin: 0; padding: 14px; background: #FFFFFF; border: 1px solid #E0E0E0; }
.phph-recent-posts__item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0F0F0; }
.phph-recent-posts__item:last-child { border-bottom: 0; }
.phph-recent-posts__thumb img { display: block; width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.phph-recent-posts__title { display: block; font-size: 14px; font-weight: 700; color: var(--phph-color-text-strong); text-decoration: none; }
.phph-recent-posts__date { font-size: 12px; color: var(--phph-color-text); }

/* ---------- Universal Posts widget (repeater) ----------
 * Số cột do admin chọn tường minh (1–4), KHÔNG dùng auto-fill — tránh việc
 * widget full width tự động bị chia nhiều cột ngoài ý muốn.
 * cols-1 (mặc định): danh sách hàng ngang, ảnh trái/chữ phải — hợp full width.
 * cols-2..4: dạng lưới thẻ, ảnh trên/chữ dưới.
 */
.phph-universal-posts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ---------- Repeater trang chủ (Universal Posts, 1 cột + horizontal) ----------
 * Dựng đúng bản tham chiếu phamhongphuoc.net: tiêu đề full width -> dòng meta
 * "Posted by ... on ... in CHUYÊN MỤC" -> ảnh vuông 200x200 float trái, excerpt
 * chảy quanh bên phải. Mỗi item ngăn nhau bằng đường kẻ 1px #CCC.
 * Số đo lấy từ computed style của bản tham chiếu. Chỉ dùng cho site này.
 */
:root {
	--phph-repeater-bg: #FAF3F3;      /* nền vùng luồng bài */
	--phph-repeater-rule: #CCCCCC;    /* đường kẻ ngăn cách */
	--phph-repeater-frame: #DDDDDD;   /* viền khung ảnh */
	--phph-repeater-frame-bg: #F3F3F3;/* nền khung ảnh */
}
.phph-universal-posts--cols-1.phph-universal-posts--layout-horizontal {
	display: block;
	background: var(--phph-repeater-bg);
	/* Kéo ngược 20px để bù padding của .phph-homepage: bản gốc có .post rộng đúng bằng
	   cột nội dung (đường kẻ ngăn cách chạy hết cột, rộng hơn hàng panel phía trên),
	   còn chữ thụt vào 20px là nhờ padding của chính .post. */
	margin-left: -20px;
	margin-right: -20px;
}
.phph-uni-repeater {
	display: block;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--phph-repeater-rule);
	border-radius: 0;
	padding: 20px;
	margin: 0;
	overflow: hidden;              /* bọc lấy ảnh float */
}
.phph-uni-repeater:last-child { border-bottom: 0; }
.phph-uni-repeater__title {
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	margin: 0;
	color: #222222;
}
.phph-uni-repeater__title a { color: #000000; text-decoration: none; }
.phph-uni-repeater__title a:hover { color: var(--phph-color-primary); }
.phph-uni-repeater__meta {
	font-size: 12px;
	line-height: 20px;
	color: #000812;
	padding: 10px 0;
	margin: 0;
}
.phph-uni-repeater__meta a { color: #000000; text-decoration: none; font-weight: 400; }
.phph-uni-repeater__meta a:hover { text-decoration: underline; }
/* Khung ảnh vuông float trái — viền mảnh + nền xám nhạt như bản gốc. */
.phph-uni-repeater__thumb {
	float: left;
	display: block;
	width: 200px;
	/* Chiều cao CỐ ĐỊNH chứ không để khung tự co giãn theo ảnh: ảnh hỏng (file mất,
	   404) không còn kéo dài được khung. Bề rộng đã cố định nên đặt cứng được, và số
	   200 giữ nguyên kích thước cũ vì theme dùng box-sizing: border-box. */
	height: 200px;
	margin: 0 12px 6px 0;
	padding: 4px;
	border: 1px solid var(--phph-repeater-frame);
	border-radius: 3px;
	background: var(--phph-repeater-frame-bg);
}
.phph-uni-repeater__thumb img {
	display: block;
	width: 100%;
	/* height:100% thay cho aspect-ratio: khung cha đã vuông sẵn, nên cách này đúng cả
	   trên trình duyệt cũ không hỗ trợ aspect-ratio — chỗ khung bị kéo dài ra. */
	height: 100%;
	object-fit: cover;
}
.phph-uni-repeater__entry p {
	font-size: 15px;
	line-height: 22px;
	color: #000000;
	margin: 0;
}
/* Danh sách bài ở trang archive: kéo ngược 20px bù padding của .phph-main, để đường
   kẻ ngăn cách rộng đúng bằng cột nội dung như bản gốc. */
.phph-post-list {
	margin-left: -20px;
	margin-right: -20px;
}

/* Tiêu đề trang tìm kiếm — bản gốc: 20px/700, #222, không padding/margin. */
.phph-search-title {
	font-size: 20px;
	font-weight: 700;
	color: #222222;
	margin: 0 0 10px;
}

/* Bộ đếm lượt truy cập — các chữ số dính liền nhau như đồng hồ cơ. */
.phph-hit-counter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 0;
	padding: 8px 0;
}
.phph-hit-counter img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}

/* ---------- Phân trang của widget Universal ----------
 * Màu lấy từ computed style bản tham chiếu: trang hiện tại nền #2E6AB1 viền #000080
 * chữ trắng đậm; các trang khác chữ #2E6AB1 viền #9AAFE5 nền trong suốt.
 */
.phph-uni-nav {
	background: #FFFFFF;
	text-align: center;
	font-size: 13px;
	padding: 4px 6px 4px 0;
	margin: 10px 0 0;
}
.phph-uni-nav__pages {
	color: #313031;
	padding: 3px;
	margin: 3px;
}
/* paginate_links() in ra .page-numbers cho link và .page-numbers.current cho trang
   đang xem — bắt cả hai bằng một bộ rule, rồi ghi đè riêng cho .current. */
.phph-uni-nav .page-numbers {
	display: inline-block;
	color: #2E6AB1;
	background: none;
	border: 1px solid #9AAFE5;
	padding: 2px 5px;
	margin: 0 4px 0 0;
	text-decoration: none;
	line-height: 1.4;
}
.phph-uni-nav a.page-numbers:hover {
	border-color: #2E6AB1;
	background: #EEF3FB;
}
.phph-uni-nav .page-numbers.current {
	background: #2E6AB1;
	border-color: #000080;
	color: #FFFFFF;
	font-weight: 700;
	margin: 3px 4px 3px 3px;
}
/* Dấu ba chấm rút gọn: không phải nút bấm nên bỏ khung cho đỡ rối. */
.phph-uni-nav .page-numbers.dots {
	border: 0;
	color: #313031;
}
@media (max-width: 480px) {
	.phph-uni-nav { padding: 4px 0; }
	.phph-uni-nav .page-numbers { margin: 2px; }
}

/* Dòng ngày tiếng Việt đầu khối nội dung — bản gốc: 15px, #000, padding 5px 10px. */
.phph-today {
	font-size: 15px;
	color: #000000;
	padding: 5px 10px;
}

/* Màn hẹp: ảnh thôi float, xuống dòng riêng cho khỏi bóp chữ. */
@media (max-width: 600px) {
	.phph-uni-repeater { padding: 16px; }
	/* Ở mobile bề rộng co giãn nên không đặt cứng chiều cao được — dùng aspect-ratio
	   trên chính khung để ảnh hỏng vẫn không phá layout. */
	.phph-uni-repeater__thumb {
		float: none;
		width: 100%;
		max-width: 260px;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0 0 10px;
	}
}
.phph-universal-posts__item:not(.phph-uni-repeater) {
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 4px;
	overflow: hidden;
	min-width: 0;
}

/* 1 cột: item dạng hàng ngang */
.phph-universal-posts--cols-1 .phph-universal-posts__item:not(.phph-uni-repeater) {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.phph-universal-posts--cols-1 .phph-universal-posts__thumb {
	flex: 0 0 280px;
	background: #F0F0F0;
	overflow: hidden;
}
.phph-universal-posts--cols-1 .phph-universal-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
}
.phph-universal-posts--cols-1 .phph-universal-posts__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px;
}
.phph-universal-posts--cols-1 .phph-universal-posts__title { font-size: 20px; }
@media (max-width: 560px) {
	.phph-universal-posts--cols-1 .phph-universal-posts__item:not(.phph-uni-repeater) { flex-direction: column; }
	.phph-universal-posts--cols-1 .phph-universal-posts__thumb { flex-basis: auto; }
}

/* 1 cột + layout "stacked": ảnh trên full width, chữ dưới — dạng feature card */
.phph-universal-posts--cols-1.phph-universal-posts--layout-stacked .phph-universal-posts__item {
	flex-direction: column;
}
.phph-universal-posts--cols-1.phph-universal-posts--layout-stacked .phph-universal-posts__thumb {
	flex-basis: auto;
	display: block;
	aspect-ratio: 800 / 450;
	background: #F0F0F0;
	overflow: hidden;
}
.phph-universal-posts--cols-1.phph-universal-posts--layout-stacked .phph-universal-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	/* Khớp đúng tỉ lệ crop thật của size 'phph-featured' (800x450) — lệch tỉ lệ ở đây sẽ
	   khiến object-fit crop lệch lần 2 trên ảnh vốn đã crop cứng ở server, gây vỡ ảnh.
	   aspect-ratio đặt cả trên wrapper lẫn img — phòng trường hợp ảnh 404 không có kích
	   thước thật để trình duyệt tham chiếu. */
	aspect-ratio: 800 / 450;
	object-fit: cover;
}
.phph-universal-posts--cols-1.phph-universal-posts--layout-stacked .phph-universal-posts__title {
	font-size: 24px;
}

/* 2–4 cột: dạng lưới thẻ */
.phph-universal-posts--cols-2,
.phph-universal-posts--cols-3,
.phph-universal-posts--cols-4 {
	display: grid;
	gap: 16px;
}
.phph-universal-posts--cols-2 { grid-template-columns: repeat(2, 1fr); }
.phph-universal-posts--cols-3 { grid-template-columns: repeat(3, 1fr); }
.phph-universal-posts--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
	.phph-universal-posts--cols-2,
	.phph-universal-posts--cols-3,
	.phph-universal-posts--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.phph-universal-posts--cols-2,
	.phph-universal-posts--cols-3,
	.phph-universal-posts--cols-4 { grid-template-columns: 1fr; }
}
.phph-universal-posts--cols-2 .phph-universal-posts__thumb,
.phph-universal-posts--cols-3 .phph-universal-posts__thumb,
.phph-universal-posts--cols-4 .phph-universal-posts__thumb {
	display: block;
	aspect-ratio: 330 / 200;
	background: #F0F0F0;
	overflow: hidden;
}
.phph-universal-posts--cols-2 .phph-universal-posts__thumb img,
.phph-universal-posts--cols-3 .phph-universal-posts__thumb img,
.phph-universal-posts--cols-4 .phph-universal-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 330 / 200;
	object-fit: cover;
}
.phph-universal-posts--cols-2 .phph-universal-posts__body,
.phph-universal-posts--cols-3 .phph-universal-posts__body,
.phph-universal-posts--cols-4 .phph-universal-posts__body {
	padding: 10px 12px;
}

.phph-universal-posts__title { font-size: 16px; margin: 0 0 6px; }
.phph-universal-posts__title a { text-decoration: none; color: var(--phph-color-text-strong); }
.phph-universal-posts__date { display: block; font-size: 12px; color: var(--phph-color-text); margin-bottom: 6px; }
.phph-universal-posts__excerpt { font-size: 13px; color: var(--phph-color-text); margin: 0; }

/* ---------- Date widget ---------- */
.phph-date-widget {
	font-family: var(--phph-font-body);
	font-size: 13px;
	color: var(--phph-color-text);
	white-space: nowrap;
}

/* ---------- Social links widget ---------- */
.phph-social-links { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.phph-social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--phph-color-primary);
	color: #FFFFFF;
	text-decoration: none;
}
.phph-social-links__link:hover { background: var(--phph-color-primary-dark); }

/* ---------- Nút "Lên đầu trang" nổi góc dưới phải — ẩn mặc định (attribute [hidden]),
   JS (back-to-top.js) gỡ [hidden] + thêm class .is-visible khi cuộn xuống quá 1 màn
   hình. z-index: 60 — nổi trên sticky nav (40/41) nhưng dưới lightbox gallery (100000)
   và skip-link accessibility (999) để không che khuất khi cả 2 cùng hiện. ---------- */
.phph-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--phph-color-primary);
	color: #FFFFFF;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.phph-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.phph-back-to-top:hover {
	background: var(--phph-color-primary-dark, var(--phph-color-primary));
}
@media (max-width: 600px) {
	.phph-back-to-top {
		right: 12px;
		bottom: 12px;
		width: 40px;
		height: 40px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.phph-back-to-top { transition: opacity 0.2s ease; }
}

/* ---------- Footer (bám bản tham chiếu) ----------
 * #footer bản gốc: nền subheader-php.png repeat, full width; bên trong .wrap rộng
 * 1020px + padding 10px, canh giữa; cuối cùng là dòng bản quyền canh giữa 12px màu
 * #B57C2D. Số đo lấy từ computed style của bản tham chiếu.
 */
.phph-footer {
	background-image: url('../images/subheader-php.png');
	background-repeat: repeat;
	background-position: 0 0;
	margin-top: 24px;
}
.phph-footer__wrap {
	max-width: 1020px;
	margin: 0 auto;
	padding: 10px;
}
.phph-footer__copyright {
	text-align: center;
	/* CỐ Ý KHÁC BẢN GỐC: bản gốc dùng 12px thường màu #B57C2D, đo trên chính ảnh nền vân
	   đá (màu trung bình #DCD0BD) chỉ được tương phản 2.34 — dưới chuẩn WCAG AA (4.5).
	   Đổi sang #4A2C08 đậm 13px, tương phản 8.34, đọc rõ trên mọi vùng vân. */
	font-size: 13px;
	font-weight: 700;
	color: #4A2C08;
	padding-top: 0;
}
.phph-footer__copyright a { color: #4A2C08; text-decoration: none; }

/* Khu widget footer — bản gốc (.main) không viền không nền, chỉ là chỗ đặt widget.
   Các widget xếp một hàng ngang, tự xuống dòng; cách canh chọn ở
   Customize > PHPH: Footer (class --left/--center/--right/--justify). */
.phph-footer-widgets {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0;
	/* Khu widget nằm DƯỚI dòng copyright (bộ đếm phải ở dưới cùng) nên khoảng cách
	   đặt ở phía trên, không phải phía dưới. */
	margin: 4px 0 0;
}
.phph-footer-widgets--left    { justify-content: flex-start; }
.phph-footer-widgets--center  { justify-content: center; }
.phph-footer-widgets--right   { justify-content: flex-end; }
.phph-footer-widgets--justify { justify-content: space-between; }

/* Widget con: không giãn theo mặc định — nếu cho flex-grow thì mọi cách canh đều vô
   nghĩa vì các widget luôn lấp kín hàng, "canh giữa" trông y hệt "canh trái". */
.phph-footer-widgets .phph-widget--footer-item {
	margin-bottom: 0;
	flex: 0 1 auto;
	min-width: 0;
}
.phph-footer-widgets img { max-width: 220px; height: auto; display: block; }
.phph-footer-widgets p { margin: 0; font-size: 15px; color: #333333; }
.phph-widget-title--footer {
	background: none;
	color: #000000;
	padding: 0 0 4px;
	font-size: 15px;
	text-transform: none;
	display: block;
}


/* ---------- 404 ---------- */
.phph-404 { text-align: center; padding: 60px 16px; }
.phph-404__title { font-size: 36px; }
.phph-404__search { display: flex; justify-content: center; margin-top: 20px; }