/**
 * Nen toi cho toan bo trang cong khai.
 *
 * File nay nap SAU main.css va chi ghi de mau sac, khong dung toi bo cuc.
 * Muon quay lai giao dien sang: go dong <link> nap file nay trong
 * inc/layout.php va index.html la xong, khong can sua gi khac.
 */

:root {
	--bg: #032A33;          /* nen chinh */
	--bg-soft: #0a3a45;     /* nen cac khoi noi len khoi nen chinh */
	--line: #14515e;        /* duong ke, vien */
	--text: #d6e4e7;        /* chu thuong */
	--text-dim: #9fb6bb;    /* chu phu, it quan trong */
	--heading: #ffffff;     /* tieu de */
	--accent: #88d200;      /* mau nhan, giu nguyen mau brand cua template */
}

/* ------------------------------------------------------------------
 * Font
 *
 * Template dung Poppins, nhung Poppins KHONG co bo ky tu tieng Viet
 * (chi co latin, latin-ext, devanagari). Cac chu nhu e-nang, u-ngA, o-nang
 * roi ve font he thong nen mot dong chu bi tron hai font khac nhau.
 * Be Vietnam Pro co bo vietnam day du va cung la sans hinh hoc nen
 * bo cuc gan nhu khong doi.
 * ------------------------------------------------------------------ */

body,
h1, h2, h3, h4, h5, h6,
.nav-menu, .nav-menu a,
input, textarea, select, button,
.primary-btn, .genric-btn {
	font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Template ep line-height 1.2em !important cho moi tieu de.
   Dau tieng Viet chong hai tang (vi du chu E-mu-nang) bi cat mat phan tren. */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.35em !important;
}

body {
	background-color: var(--bg);
	color: var(--text);
}

/* Template dat 120px cho moi khoang cach giua cac vung. Hai vung nam
   canh nhau la thanh 240px trong khong, qua rong voi trang it noi dung. */
.section-gap {
	padding: 80px 0;
}

/* Hai vung lien tiep thi khong can day du ca hai dau.
   Tru chan trang: no cung mang class section-gap va co duong ke phia tren,
   bo padding-top se lam chu dinh vao duong ke do. */
.section-gap + .section-gap:not(.footer-area) {
	padding-top: 0;
}

/* Nhung khoi co dai mau rieng thi khong duoc bo dem tren, vi mep dai mau
   la mot duong ranh nhin thay duoc: bo dem la chu dinh sat vao no.
   Khoi nam ngay sau mot dai mau cung vay. */
.section-gap + .section-gap.gray-bg,
.section-gap.gray-bg + .section-gap {
	padding-top: 80px;
}


h1, h2, h3, h4, h5, h6 {
	color: var(--heading);
}

/* Chu mac dinh cua template la #777, tren nen toi se qua chim */
p, li, td, th, span, label {
	color: inherit;
}

a { color: var(--accent); }
a:hover { color: #a5e830; }

/* ------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */

/* Vach ngang duoi thanh tren cung */
#header hr {
	border-color: rgba(255, 255, 255, 0.15);
}

/* Khi cuon xuong, header dam lai cho de doc */
/* Dac hoan toan. Truoc day de 0.94 nen luc cuon co the doc thay chu
   cua trang xuyen qua thanh menu, nhin nhu bi loi. */
#header.header-scrolled {
	background: var(--bg);
}

/* Menu dang mo tren dien thoai */
#mobile-nav {
	background: var(--bg);
}

/* ------------------------------------------------------------------
 * Trang chi tiet tac pham
 * ------------------------------------------------------------------ */

.artwork-detail .artwork-photo,
.about-page .about-portrait,
.artwork-card .thumb {
	background: var(--bg-soft);
}

.artwork-photo-hint,
.artwork-card .card-artist {
	color: var(--text-dim);
}

.artwork-meta th,
.artwork-meta td {
	border-bottom-color: var(--line);
	color: var(--text);
}

.artwork-meta th {
	color: var(--text-dim);
}

.artwork-description,
.about-body {
	color: var(--text);
}

.artwork-card h4 { color: var(--heading); }

/* ------------------------------------------------------------------
 * Cac khoi con lai cua template
 * ------------------------------------------------------------------ */

/* Cac vung template dat san nen sang. Doi het ve nen toi. */
.gray-bg,
.section-bg,
.exibition-area,
.blog-area,
.about-generic-area,
.cat-top-area,
.contact-page-area,
.gallery-page-area,
.sample-text-area,
.button-area,
.info-area .info-content {
	background-color: var(--bg-soft);
}

/* Khoi gallery cua template von da la nen toi #04091e, keo ve cung tone */
.gallery-area {
	background-color: var(--bg);
}

.footer-area {
	background-color: var(--bg);
	border-top: 1px solid var(--line);
	padding-top: 62px;
}

.footer-area p,
.footer-area .footer-text,
.single-footer-widget p {
	color: var(--text-dim);
}

.footer-area h6,
.single-footer-widget h6 {
	color: var(--heading);
}

.footer-social a,
.top-head-right a {
	color: var(--text-dim);
}

.footer-social a:hover,
.top-head-right a:hover {
	color: var(--accent);
}

/* Cac the o khoi "Openning Hours / Ongoing Exhibitions" tren trang chu */
.single-service,
.single-exibition,
.single-blog {
	background: transparent;
}

.single-service h4,
.single-exibition h4 {
	color: var(--heading);
}

.single-service p,
.single-exibition p,
.single-blog p {
	color: var(--text);
}

/* Ngay thang trong the: template dat mau #222, tren nen toi gan nhu tang hinh.
   Phai viet du hai cap class de thang duoc do uu tien cua main.css. */
.single-exibition .date,
.single-blog .date,
.comment-sec-area .date {
	color: var(--text-dim);
}

/* Lop phu hien ra khi re chuot vao the dich vu: template de nen sang,
   tren giao dien toi se nhay ra mot o trang. Doi ve cung tone nen toi. */
.single-service .overlay {
	background-color: var(--bg-soft);
}

.single-service .overlay .text p,
.single-service .overlay p {
	color: var(--text);
}

/* Chu trang tren nen xanh la #88d200 chi dat ti le tuong phan 1.86,
   nen doi sang chu xanh dam mau. */
.primary-btn,
.primary-btn:focus,
.genric-btn.primary {
	color: #06262e;
}

/* Template dat hover la nen trong suot + chu xanh la. Tren giao dien nen toi,
   nut hover thanh ra bien mat: nen toi lo ra, con chu dam mau thi chim luon.
   Thay bang nen xanh dam hon, van la nut dac nen van thay ro la bam duoc. */
.primary-btn:hover,
.primary-btn:focus:hover,
.genric-btn.primary:hover {
	background-color: #6fae00;
	border-color: #6fae00;
	color: #06262e;
}

/* Nut phu cua template von la nen trang chu den */
.genric-btn.primary {
	background: var(--accent);
	color: #06262e;
	border-color: var(--accent);
}

/* O tim kiem / input neu co dung toi */
input, textarea, select {
	background-color: var(--bg-soft);
	border-color: var(--line);
	color: var(--text);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-dim);
}

/* ------------------------------------------------------------------
 * Banner
 *
 * Template dung mot anh header co dinh cho moi trang. Tren trang chi tiet
 * tac pham dieu do co nghia la khach quet QR truoc mot buc tranh, mo dien
 * thoai ra lai thay mot buc tranh khac chiem tron man hinh dau tien.
 * Nay banner lay chinh anh cua trang do, lam mo va toi lai de lam nen.
 * ------------------------------------------------------------------ */

.banner-photo-area {
	position: relative;
	overflow: hidden;
	background: var(--bg);

	/* Ba gia tri nay admin chinh duoc trong Cau hinh site.
	   Mac dinh o day chi la du phong khi chua co cai dat. */
	--banner-blur: 22px;
	--banner-zoom: 1.12;
	--banner-dark: 0.7;
	--banner-pos: center center;
}

.banner-photo-area .banner-photo {
	position: absolute;
	/* Noi rong ra ngoai khung dung bang do mo, de vien nhoe khong lo ra mep.
	   Khi khong lam mo thi khong can noi, anh giu dung khung. */
	top: calc(var(--banner-blur) * -2);
	right: calc(var(--banner-blur) * -2);
	bottom: calc(var(--banner-blur) * -2);
	left: calc(var(--banner-blur) * -2);
	/* cover = lap day khung, cat bot anh | contain = hien tron anh */
	background-size: var(--banner-fit, cover);
	background-repeat: no-repeat;
	background-position: var(--banner-pos);
	filter: blur(var(--banner-blur)) saturate(1.05);
	transform: scale(var(--banner-zoom));
}

.banner-photo-area .overlay-bg {
	background-color: rgba(3, 42, 51, var(--banner-dark));
}

/* Lop nen mo chi nam sau chu.
   Cho phep de anh that net va sang ma chu van doc duoc: khi khong co lop nay,
   chu trang tren vung anh sang chi dat ti le tuong phan khoang 1.2, duoi xa
   nguong doc duoc. Lop nay toi dan tu giua ra, khong lam duc ca buc anh. */
.banner-area.has-scrim .container::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(880px, 82%);
	height: 130%;
	z-index: -1;
	pointer-events: none;
	/* closest-side de gradient ve dung 0 ngay tai mep khung,
	   khong thi se lo mot duong vien doc o ria. */
	background: radial-gradient(ellipse closest-side at center,
		rgba(3, 42, 51, 0.52) 0%,
		rgba(3, 42, 51, 0.44) 50%,
		rgba(3, 42, 51, 0.22) 74%,
		rgba(3, 42, 51, 0) 100%);
}

/* Chu phai nam tren hai lop nen */
.banner-area .container {
	position: relative;
	z-index: 2;
}

/* Banner cu cao hon 400px, day tac pham xuong duoi man hinh.
   Nguoi xem dang dung truoc tranh, can thay noi dung ngay.

   Luu y: #header dat position:fixed va cao khoang 100px, nen padding-top
   phai lon hon con so do, khong thi tieu de banner se de len logo. */
.banner-area .about-content {
	/* 86px la phan con lai cua header (thanh tren cung + le), cong them
	   chieu cao logo. Admin keo logo to len thi tieu de tu lui xuong,
	   khong bao gio bi thanh menu che. */
	padding: calc(86px + var(--logo-h, 46px)) 0 78px;
}

/* Vien toi quanh chu. Cach nay giu duoc anh sang va net, chi ton mot vien
   rat mong quanh net chu, thay vi phai lam toi ca mot vung lon phia sau. */
.banner-photo-area .about-content h1,
.banner-photo-area .about-content .link-nav {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 2px 14px rgba(0, 0, 0, 0.45);
}

.banner-area .about-content h1 {
	font-size: 40px;
	font-weight: 500;
}

/*
 * Nut menu ba gach tren dien thoai.
 * Ban goc chi rong 36x28px, nho hon muc 44px ma ngon tay cham thoai mai
 * (WCAG 2.5.8). Noi rong o bam ra 44x44 nhung giu icon dung dung cho cu
 * bang cach bu lai top/right dung bang nua phan noi them.
 * Dat truoc moi @media de khong bi quy tac phia duoi de len.
 */
#mobile-nav-toggle {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	right: 11px;
	top: 42px;
}

@media (max-width: 960px) {
	#mobile-nav-toggle {
		display: flex;
	}
}

@media (max-width: 767px) {
	.banner-area .about-content {
		/* Bi quy tac o duoi ghi de, giu lai cho dung mach */
		padding: calc(122px + var(--logo-h-mb, 34px)) 0 52px;
	}
	.banner-area .about-content h1 {
		font-size: 27px;
	}
}

/* ------------------------------------------------------------------
 * Gallery: khong cat anh tac pham
 *
 * Template dung object-fit: cover nen tranh doc bi xen mat bo cuc.
 * Voi tac pham nghe thuat thi cat xen la dieu khong duoc phep.
 * ------------------------------------------------------------------ */

.artwork-card .thumb {
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: var(--bg-soft);
}

.artwork-card .thumb img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Anh khong bi cat nen bo phong to khi re chuot, thay bang sang len nhe */
.artwork-card:hover .thumb img {
	transform: none;
	filter: brightness(1.08);
}

/* ==================================================================
 * Man hinh dien thoai
 *
 * Trang chi tiet tac pham la trang duoc mo bang cach quet QR, nen gan
 * nhu 100% luot xem la tren dien thoai, va nguoi xem dang DUNG TRUOC
 * buc tranh. Ho can thay ngay: day dung la buc tranh do, ten la gi.
 * Vi vay uu tien la dua anh + ten tac pham vao man hinh dau tien.
 * ================================================================== */

@media (max-width: 767px) {

	/* Template dat 120px cho moi khoang cach giua cac vung, dung chung
	   cho ca desktop lan dien thoai. Tren dien thoai do la ca mot lan
	   vuot man hinh chi de nhin khoang trong. */
	.section-gap {
		padding: 44px 0;
	}

	/* Anh tac pham: gioi han chieu cao de ten tranh kip nam trong man
	   hinh dau tien. Muon xem to thi cham vao anh, van mo duoc co day du. */
	.artwork-detail .artwork-photo img {
		max-height: 46vh;
		width: auto;
		margin: 0 auto;
	}

	.artwork-detail .artwork-photo {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
	}

	.artwork-photo-hint {
		text-align: center;
		margin-top: 8px;
		font-size: 12px;
	}

	/* Khoi thong tin bam sat anh thay vi cach mot doan dai */
	.artwork-detail .col-lg-5 {
		margin-top: 18px;
	}

	.artwork-title {
		font-size: 22px;
		margin-bottom: 2px;
	}

	.artwork-artist {
		font-size: 15px;
		margin-bottom: 16px;
	}

	/* Bang thong so: gon lai, nhan nho hon gia tri de de quet mat */
	.artwork-meta th,
	.artwork-meta td {
		padding: 8px 0;
		font-size: 14px;
	}

	.artwork-meta th {
		width: 40%;
		font-size: 13px;
	}

	.artwork-description,
	.about-body {
		font-size: 15px;
		line-height: 1.75;
	}

	/* Thanh tren cung la khu phu (doi ngon ngu, mang xa hoi). Chuan
	   WCAG 2.5.8 muc AA la 24px; de 34px la thoai mai, con ep 44px thi
	   o mau cua ngon ngu dang chon se cao hon ca thanh va thoi xuong
	   de len hang logo. */
	.top-head-left a,
	.top-head-right a {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
	}

	/* Vung cham: chuan toi thieu 44px cho menu chinh va icon chan trang. */
	.footer-social a,
	.nav-menu a,
	#mobile-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.top-head-right ul,
	.footer-social {
		gap: 6px;
	}

	/* Logo va breadcrumb cung la link dieu huong, phai du to de bam.
	   Rieng link nam giua cau van o footer (Colorlib/ThemeWagon) thi giu
	   nguyen: WCAG mien tru link inline trong doan van, keo cao len se
	   lam vo dong chu. */
	#logo a {
		display: inline-block;
		padding: 8px 0;
	}

	.link-nav a {
		display: inline-block;
		padding: 12px 4px;
	}

	.banner-area .about-content .link-nav {
		margin-top: 2px;
	}

	.primary-btn,
	.genric-btn {
		min-height: 46px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Footer dang cao hon ca phan noi dung. Rut gon lai. */
	.footer-area {
		padding-top: 40px;
	}

	.footer-area .single-footer-widget {
		margin-bottom: 26px;
	}

	.footer-area .footer-text {
		font-size: 12px;
		line-height: 1.7;
	}

	/* Luoi gallery: mot cot, anh thap hon cho cuon nhanh */
	.artwork-card .thumb {
		height: 230px;
	}

	.artwork-card {
		margin-bottom: 22px;
	}

	/* Banner: bot phan duoi, giu padding tren de khong dung header fixed */
	.banner-area .about-content {
		/* 122px la phan con lai cua header (thanh dau trang + le), cong
		   them chieu cao logo do admin dat. */
		padding: calc(122px + var(--logo-h-mb, 34px)) 0 34px;
	}

	.banner-area .about-content .link-nav {
		font-size: 13px;
	}
}

/* Man hinh rat hep (iPhone SE) */
@media (max-width: 380px) {
	.banner-area .about-content h1 {
		font-size: 23px;
	}
	.artwork-meta th {
		width: 44%;
		font-size: 12px;
	}
}

/* Nut chuyen ngon ngu tren thanh dau trang */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-right: 10px;
}

.lang-switch a {
	color: var(--text-dim);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	padding: 2px 7px;
	border-radius: 3px;
	line-height: 1.6;
}

.lang-switch a:hover {
	color: var(--heading);
	text-decoration: none;
}

.lang-switch a.is-active {
	color: #06262e;
	/* background-color chu khong phai background: dung dang rut gon se
	   reset ca background-clip dat o cho khac. */
	background-color: var(--accent);
}

/* ------------------------------------------------------------------
 * Bo loc tren trang Bo suu tap
 * ------------------------------------------------------------------ */

.gal-filter {
	margin: 0 0 28px;
	padding: 16px 18px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 6px;
}

.gal-filter-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-bottom: 10px;
}

.gal-filter-row:last-of-type {
	margin-bottom: 0;
}

.gal-filter-label {
	flex: 0 0 108px;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.gal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gal-chip {
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	font-size: 14px;
	line-height: 1.2;
	padding: 9px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
}

.gal-chip:hover {
	border-color: var(--accent);
	color: var(--heading);
}

.gal-chip.is-on {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 500;
}

/* --- Thanh truot gia, hai dau keo --- */

.gal-price-row {
	align-items: flex-start;
}

.gal-slider {
	flex: 1 1 260px;
	max-width: 420px;
}

.gal-slider-out {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--heading);
	margin-bottom: 10px;
}

/*
 * Hai o input xep chong len nhau. O phia tren phai cho chuot xuyen qua phan
 * ray (pointer-events: none), chi giu lai o nut keo, neu khong nut cua o duoi
 * se khong bam duoc.
 */
.gal-slider-track {
	position: relative;
	height: 26px;
}

.gal-slider-track::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: var(--slider-track, var(--line));
}

.gal-slider-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background: var(--slider-accent, var(--accent));
	pointer-events: none;
}

.gal-slider-track input[type="range"] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.gal-slider-track input[type="range"]:focus {
	outline: none;
}

.gal-slider-track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--slider-accent, var(--accent));
	border: 2px solid var(--bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
	cursor: pointer;
}

.gal-slider-track input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--slider-accent, var(--accent));
	border: 2px solid var(--bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
	cursor: pointer;
}

.gal-slider-track input[type="range"]::-moz-range-track {
	background: none;
	border: 0;
}

.gal-slider-track input[type="range"]:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--heading);
	outline-offset: 2px;
}

.gal-slider-ends {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--text-dim);
	margin-top: 4px;
}

.gal-slider-ask {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--text);
	cursor: pointer;
}

.gal-slider-ask input {
	width: 17px;
	height: 17px;
	accent-color: var(--accent);
	cursor: pointer;
}

/* --- Nut loc dang khung: vuong goc, kem hinh minh hoa --- */

.gal-chips-shape .gal-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border-radius: 4px;
}

/* Hinh nho ve dung dang khung ma nut do loc */
.gal-shape {
	display: inline-block;
	border: 2px solid currentColor;
	border-radius: 1px;
	flex: none;
}

.gal-shape-vuong {
	width: 15px;
	height: 15px;
}

.gal-shape-chunhat {
	width: 21px;
	height: 14px;
}

.gal-filter-foot {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--text-dim);
}

.gal-reset {
	border: 0;
	background: none;
	color: var(--accent-text);
	font-size: 13px;
	padding: 6px 4px;
	margin-left: 10px;
	cursor: pointer;
	text-decoration: underline;
}

.gal-empty {
	margin: 24px 0 0;
	padding: 28px 16px;
	text-align: center;
	color: var(--text-dim);
	border: 1px dashed var(--line);
	border-radius: 6px;
}

/* Trang chu dong */
.home-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12px;
	color: var(--accent);
	margin-bottom: 12px;
}

.home-lead-text {
	font-size: 17px;
	line-height: 1.8;
	color: var(--text);
}

.home-section-title {
	font-size: 27px;
	font-weight: 600;
	margin-bottom: 12px;
}

.home-intro-text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--text);
}

@media (max-width: 767px) {
	.home-lead-text { font-size: 15px; }
	.home-section-title { font-size: 21px; }
	/* Thanh tren cung cua template chi cao 24px. Nut doi ngon ngu can du
	   lon de cham nen phai noi cao thanh nay ra, neu khong o mau xanh cua
	   ngon ngu dang chon se thoi xuong de len hang logo. */
	.header-top {
		height: auto;
		min-height: 34px;
		margin-top: 8px;
		padding-top: 0;
	}

	.header-top .row {
		align-items: center;
	}

	.lang-switch {
		margin-right: 4px;
	}

	/* O mau gon nhu mot vien thuoc. Cao 28px, van rong hon muc 24px toi
	   thieu cua WCAG 2.5.8 cho nut phu, ma khong bien thanh khoi vuong to. */
	.lang-switch a {
		min-width: 34px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px 10px;
		line-height: 1.3;
	}

	/* Nut ba gach can giua theo hang logo. Admin keo logo to len thi no
	   tut xuong theo, khong bi lech len tren. Nut cao 44px nen tru di
	   mot nua phan chenh lech. */
	#mobile-nav-toggle {
		top: calc(69px + (var(--logo-h-mb, 34px) - 44px) / 2);
	}

	.gal-filter {
		padding: 14px;
		margin-bottom: 22px;
	}

	.gal-filter-row {
		display: block;
	}

	.gal-filter-label {
		display: block;
		margin-bottom: 8px;
	}

	.gal-slider {
		max-width: none;
		width: 100%;
	}

	/* Nut keo to hon de ngon tay tom trung */
	.gal-slider-track {
		height: 34px;
	}

	.gal-slider-track input[type="range"] {
		height: 34px;
	}

	.gal-slider-track input[type="range"]::-webkit-slider-thumb {
		width: 28px;
		height: 28px;
	}

	.gal-slider-track input[type="range"]::-moz-range-thumb {
		width: 28px;
		height: 28px;
	}

	.gal-slider-ask {
		min-height: 44px;
	}

	/* Vung cham 44px cho de bam bang ngon tay */
	.gal-chip {
		min-height: 44px;
		padding: 10px 15px;
	}

	.section-gap + .section-gap.gray-bg,
	.section-gap.gray-bg + .section-gap {
		padding-top: 44px;
	}
}

/* ------------------------------------------------------------------
 * Logo
 *
 * Template chi gioi han chieu cao logo ben trong media query cua dien
 * thoai, con tren desktop thi khong rang buoc gi. Upload mot anh lon la
 * header vo ngay. Rang buoc o day de anh kich thuoc bat ky cung vua khung,
 * giu dung ti le, khong bi bop meo.
 * ------------------------------------------------------------------ */

/*
 * Chieu cao logo lay tu bien --logo-h (may tinh) va --logo-h-mb (dien thoai),
 * do admin keo trong muc Bo cuc. Be ngang toi da bang 5 lan chieu cao: logo
 * ngang bao nhieu cung vua khung, giu dung ti le, khong bi bop meo.
 */
#header #logo img {
	max-height: var(--logo-h, 46px);
	max-width: calc(var(--logo-h, 46px) * 5);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/*
 * Tren dien thoai va tablet: logo nam giua.
 * Tu 960px tro xuong menu chinh an di, chi con nut ba gach neo o goc phai,
 * nen hang logo trong tron mot ben. Cho logo ra giua cho can doi.
 * Nut ba gach dat position:fixed nen khong chiem cho, khong day logo lech.
 */
@media (max-width: 960px) {
	#header #logo {
		flex: 1 1 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}

	#header #logo a {
		display: inline-block;
	}

	#header #logo img {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 960px) {
	#header #logo img {
		max-height: var(--logo-h-mb, 34px);
		max-width: calc(var(--logo-h-mb, 34px) * 5);
	}
}

/* Icon mang xa hoi ve bang SVG (Threads) cho khop voi icon Font Awesome */
.social-svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	display: inline-block;
}

.footer-social .social-svg {
	width: 15px;
	height: 15px;
}

/* ------------------------------------------------------------------
 * Nut hanh dong tren trang tac pham
 * ------------------------------------------------------------------ */

.artwork-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.artwork-buy {
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* Nut phu: vien mong, khong tranh do noi bat voi nut chinh */
.ghost-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 26px;
	line-height: 42px;
	border: 1px solid var(--line);
	border-radius: 0;
	color: var(--text);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: transparent;
	transition: border-color .2s, color .2s;
}

.ghost-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Bang lien he
 *
 * Tren dien thoai truot len tu day man hinh, vi khach quet QR cam may
 * mot tay va ngon cai voi toi phan duoi de hon phan tren.
 * ------------------------------------------------------------------ */

body.contact-open { overflow: hidden; }

.contact-sheet {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-sheet[hidden] { display: none; }

.contact-sheet-bg {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
}

.contact-sheet-panel {
	position: relative;
	width: min(430px, calc(100% - 32px));
	max-height: 88vh;
	overflow-y: auto;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 30px 26px 24px;
}

.contact-sheet-grip { display: none; }

.contact-sheet-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	color: var(--text-dim);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.contact-sheet-close:hover { color: var(--heading); }

.contact-sheet-panel h3 {
	font-size: 21px;
	margin: 0 0 6px;
	color: var(--heading);
}

.contact-sheet-intro {
	font-size: 14px;
	color: var(--text-dim);
	margin: 0 0 4px;
}

.contact-sheet-work {
	font-size: 14px;
	color: var(--accent);
	margin: 0 0 18px;
}

.contact-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 4px;
	border-top: 1px solid var(--line);
	color: var(--text);
	min-height: 62px;
}

.contact-row:last-child { border-bottom: 1px solid var(--line); }
.contact-row:hover { text-decoration: none; background: rgba(255, 255, 255, 0.03); }

.contact-row-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	background: rgba(136, 210, 0, 0.14);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}

.contact-svg { width: 20px; height: 20px; }

.contact-row-text { flex: 1; min-width: 0; }
.contact-row-text strong {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--heading);
}
.contact-row-text span {
	display: block;
	font-size: 13px;
	color: var(--text-dim);
	word-break: break-all;
}

.contact-row-go {
	color: var(--text-dim);
	font-size: 26px;
	line-height: 1;
}

/* Dien thoai: truot len tu day, chiem tron be ngang */
@media (max-width: 767px) {
	.contact-sheet { align-items: flex-end; }

	.contact-sheet-panel {
		width: 100%;
		max-width: none;
		border-radius: 16px 16px 0 0;
		border-bottom: none;
		padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
		max-height: 82vh;
		animation: contact-slide-up .22s ease-out;
	}

	@keyframes contact-slide-up {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	/* Thanh keo nho o dinh, dau hieu quen thuoc cua bang truot len */
	.contact-sheet-grip {
		display: block;
		width: 42px;
		height: 4px;
		border-radius: 2px;
		background: var(--line);
		margin: 2px auto 14px;
	}

	.contact-sheet-close { top: 2px; right: 4px; }
	.contact-sheet-panel h3 { font-size: 19px; }

	/* Vung cham cao hon cho de bam bang ngon cai */
	.contact-row { min-height: 66px; padding: 15px 2px; }

	.artwork-actions { gap: 10px; }
	.artwork-actions .primary-btn,
	.artwork-actions .ghost-btn { flex: 1 1 100%; }
}

/* Trang do admin tu tao */
.custom-page-body {
	font-size: 16px;
	line-height: 1.9;
	color: var(--text);
}

/* ------------------------------------------------------------------
 * Chu co dinh dang (dam, nghieng, tieu de, danh sach, anh chen giua bai)
 * ------------------------------------------------------------------ */

.rt p { margin: 0 0 1.1em; }
.rt p:last-child { margin-bottom: 0; }
.rt strong { color: var(--heading); font-weight: 600; }
.rt em { font-style: italic; }
.rt a { color: var(--accent-text); text-decoration: underline; }

.rt .rt-h3 {
	font-size: 1.35em;
	font-weight: 600;
	margin: 1.6em 0 .5em;
	color: var(--heading);
}

.rt .rt-h4 {
	font-size: 1.12em;
	font-weight: 600;
	margin: 1.4em 0 .4em;
	color: var(--heading);
}

.rt .rt-list {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
	list-style: disc;
}

.rt .rt-list li { margin-bottom: .4em; }

.rt .rt-hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 2em 0;
}

.rt .rt-figure {
	margin: 1.8em 0;
}

.rt .rt-img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Anh nam giua doan van thi khong xuong dong */
.rt p .rt-img { display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------------
 * Nhan "Da ban"
 *
 * Bo cuc dat trong css/artwork.css, day chi keo mau do sang hon mot
 * bac cho du tuong phan tren nen toi.
 * ------------------------------------------------------------------ */

.sold-badge {
	color: #ef8079;
	border-color: #ef8079;
}

.sold-tag {
	background: rgba(3, 42, 51, .88);
	border: 1px solid var(--line);
}