/* ==========================================================================
   QCTT - CSS dung chung toan site
   Namespace: .qctt-
   Chi chua design token + component dung o nhieu trang.
   CSS rieng cua trang chu nam trong assets/css/pages/home.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design token
   -------------------------------------------------------------------------- */
:root {
	/* Mau thuong hieu lay tu logo Trung Duc */
	--qctt-red: #da0812;
	--qctt-red-dark: #ae060e;
	--qctt-blue: #0165b3;
	--qctt-blue-dark: #024c88;
	--qctt-yellow: #fdd800;

	/* Vai tro trong giao dien */
	--qctt-primary: var(--qctt-red);
	--qctt-primary-dark: var(--qctt-red-dark);
	--qctt-primary-soft: rgba(218, 8, 18, 0.10);
	--qctt-secondary: var(--qctt-blue);
	--qctt-secondary-soft: rgba(1, 101, 179, 0.10);
	--qctt-navy: #062b4f;
	--qctt-navy-deep: #041d36;
	--qctt-navy-soft: #0b3d6b;
	--qctt-text: #16233a;
	--qctt-muted: #64748b;
	--qctt-surface: #ffffff;
	--qctt-surface-soft: #f5f8fb;
	--qctt-border: #e3e9f0;
	--qctt-border-dark: rgba(255, 255, 255, 0.16);

	/* Chu: Times New Roman theo yeu cau, kem du phong cho may khong co font nay */
	/* Times New Roman cho chu Latin va tieng Viet; cac font sau la du phong,
	   trong do nhom cuoi la font co chan cho chu Han o ban tieng Trung. */
	--qctt-font-serif: "Times New Roman", "Nimbus Roman", "Liberation Serif", Times,
		"Songti SC", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;

	--qctt-radius-sm: 6px;
	--qctt-radius-md: 10px;
	--qctt-radius-lg: 18px;

	--qctt-shadow-card: 0 10px 30px rgba(7, 30, 56, 0.08);
	--qctt-shadow-card-hover: 0 18px 44px rgba(7, 30, 56, 0.16);

	--qctt-container: 1200px;
	--qctt-transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
   1b. Chu
   Flatsome tu xuat font-family cho phan lon phan tu, nhung chuoi du phong
   cua no la sans-serif nen phai khai bao lai cho dung.
   -------------------------------------------------------------------------- */
.qctt-site,
.qctt-site button,
.qctt-site input,
.qctt-site select,
.qctt-site textarea,
.qctt-site h1,
.qctt-site h2,
.qctt-site h3,
.qctt-site h4,
.qctt-site h5,
.qctt-site h6,
.qctt-site .button,
.qctt-site .nav > li > a {
	font-family: var(--qctt-font-serif);
}

/* --------------------------------------------------------------------------
   2. Nen chung cua section
   -------------------------------------------------------------------------- */
.qctt-section--soft {
	background-color: var(--qctt-surface-soft);
}

.qctt-section--navy {
	background-color: var(--qctt-navy);
}

/* --------------------------------------------------------------------------
   3. Tieu de section
   Dung chung cho moi block: [title style="bold-center"] / [title style="bold"]
   -------------------------------------------------------------------------- */
.qctt-site .qctt-heading .section-title {
	margin-bottom: 0;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Flatsome ve 2 vach ngang hai ben tieu de; thiet ke chi dung
   gach chan mau cam nen an 2 vach nay di. */
.qctt-site .qctt-heading .section-title > b {
	display: none;
}

.qctt-site .qctt-heading .section-title-bold-center {
	justify-content: center;
	text-align: center;
}

.qctt-site .qctt-heading .section-title-bold {
	justify-content: flex-start;
	text-align: left;
}

.qctt-site .qctt-heading .section-title-main {
	position: relative;
	/* Flatsome ve khung vien quanh chu o style bold; thiet ke khong dung khung. */
	border: 0;
	padding: 0 0 16px;
	color: var(--qctt-text);
	font-size: 1.75rem;
	line-height: 1.25;
}

/* Gach chan trang tri duoi tieu de section. */
.qctt-site .qctt-heading .section-title-main::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 64px;
	height: 3px;
	background-color: var(--qctt-primary);
	border-radius: 2px;
	transform: translateX(-50%);
}

.qctt-site .qctt-heading .section-title-bold .section-title-main::after {
	left: 0;
	transform: none;
}

.qctt-site .qctt-heading--light .section-title-main {
	color: #fff;
}

.qctt-heading.section-title-container {
	padding-left: 0;
	padding-right: 0;
}

.qctt-eyebrow {
	margin-bottom: 6px;
	color: var(--qctt-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.qctt-lead {
	max-width: 720px;
	margin: 14px auto 0;
	color: var(--qctt-muted);
	font-size: 1rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   4. Nut
   -------------------------------------------------------------------------- */
.qctt-site .button.qctt-btn {
	border-radius: var(--qctt-radius-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: transform var(--qctt-transition), box-shadow var(--qctt-transition);
}

.qctt-site .button.qctt-btn:hover,
.qctt-site .button.qctt-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(7, 30, 56, 0.22);
}

.qctt-site .button.qctt-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Header
   Ghi de trong pham vi #masthead de menu chinh nam giua nhu thiet ke.
   -------------------------------------------------------------------------- */
#masthead .header-nav-main.nav > li > a {
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#masthead .nav > li.current-menu-item > a,
#masthead .nav > li.current_page_item > a {
	color: var(--qctt-primary);
}

.qctt-header-cta.button {
	margin-bottom: 0;
	border-radius: var(--qctt-radius-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   6. Dai CTA dung chung (global-cta-quote)
   -------------------------------------------------------------------------- */
.qctt-cta {
	position: relative;
	overflow: hidden;
	background-color: var(--qctt-primary);
	background-image: linear-gradient(115deg, var(--qctt-primary) 0%, var(--qctt-primary-dark) 100%);
}

.qctt-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.qctt-cta__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	color: #fff;
	font-size: 30px;
}

.qctt-cta__text {
	flex: 1 1 320px;
	color: #fff;
}

.qctt-cta__text h2 {
	margin-bottom: 4px;
	color: #fff;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
}

.qctt-cta__text p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.0625rem;
}

.qctt-cta__action {
	flex: 0 0 auto;
}

.qctt-site .qctt-cta__action .button {
	margin-bottom: 0;
	background-color: #fff;
	border-color: #fff;
	color: var(--qctt-primary);
}

.qctt-site .qctt-cta__action .button:hover {
	background-color: var(--qctt-navy);
	border-color: var(--qctt-navy);
	color: #fff;
}

/* --------------------------------------------------------------------------
   6b. Bang gia (banggia-01-intro)
   -------------------------------------------------------------------------- */
.qctt-pricing__table {
	overflow-x: auto;
}

.qctt-pricing__table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
}

.qctt-pricing__table th,
.qctt-pricing__table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--qctt-border);
	text-align: left;
}

.qctt-pricing__table thead th {
	background-color: var(--qctt-navy);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.qctt-pricing__table tbody tr:nth-child(even) {
	background-color: var(--qctt-surface-soft);
}

.qctt-pricing__note {
	margin-top: 14px;
	color: var(--qctt-muted);
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   7. Footer (global-footer)
   -------------------------------------------------------------------------- */
/* .section.dark cua Flatsome dat nen #666 nen can do uu tien tuong duong. */
.section.qctt-footer {
	background-color: var(--qctt-navy-deep);
}

.qctt-footer {
	color: rgba(255, 255, 255, 0.72);
}

/* Footer da co dong ban quyen rieng trong UX Block global-footer,
   nen an dai "absolute footer" mac dinh cua Flatsome. */
.qctt-site .absolute-footer {
	display: none;
}

.qctt-footer h3 {
	margin-bottom: 18px;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.qctt-footer p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
	line-height: 1.8;
}

.qctt-footer ul {
	margin: 0;
	list-style: none;
}

.qctt-footer li {
	margin-bottom: 10px;
	list-style: none;
}

.qctt-footer a {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
	transition: color var(--qctt-transition);
}

.qctt-footer a:hover,
.qctt-footer a:focus-visible {
	color: var(--qctt-primary);
}

.qctt-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.qctt-footer__contact li > i,
.qctt-footer__contact li > .qctt-ico {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--qctt-primary);
	font-size: 16px;
}

.qctt-footer__contact .qctt-ico svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.qctt-footer__social {
	display: flex;
	gap: 12px;
	margin-top: 22px;
}

.qctt-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--qctt-border-dark);
	border-radius: 50%;
	color: #fff;
	font-size: 16px;
	transition: background-color var(--qctt-transition), border-color var(--qctt-transition);
}

.qctt-footer__social a:hover,
.qctt-footer__social a:focus-visible {
	background-color: var(--qctt-primary);
	border-color: var(--qctt-primary);
	color: #fff;
}

/* Ban do Google nhung trong chan trang */
.qctt-footer__map-row {
	margin-top: 12px;
}

.qctt-footer__map {
	overflow: hidden;
	border: 1px solid var(--qctt-border-dark);
	border-radius: var(--qctt-radius-md);
	line-height: 0;
}

.qctt-footer__map iframe,
.qctt-contact__map iframe {
	display: block;
	width: 100%;
	height: 260px;
	border: 0;
	filter: grayscale(35%);
	transition: filter var(--qctt-transition);
}

.qctt-footer__map iframe:hover,
.qctt-contact__map iframe:hover {
	filter: grayscale(0);
}

.qctt-contact__map {
	overflow: hidden;
	margin-top: 22px;
	border: 1px solid var(--qctt-border);
	border-radius: var(--qctt-radius-md);
	line-height: 0;
}

.qctt-contact__map iframe {
	height: 300px;
}

.qctt-contact__actions {
	margin-top: 6px;
	gap: 12px;
}

.qctt-site .qctt-contact__actions .button {
	margin: 0;
}

.qctt-footer__bottom {
	margin-top: 10px;
	padding-top: 22px;
	border-top: 1px solid var(--qctt-border-dark);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.875rem;
}

.qctt-footer__bottom p {
	margin-bottom: 0;
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
	.qctt-site .qctt-heading .section-title-main {
		font-size: 1.5rem;
	}

	.qctt-cta__inner {
		flex-direction: column;
		text-align: center;
	}

	.qctt-cta__text h2 {
		font-size: 1.625rem;
	}

}

@media (max-width: 549px) {
	.qctt-site .qctt-heading .section-title-main {
		font-size: 1.3125rem;
	}

	/* Nut CTA tren header khong duoc xuong dong tren dien thoai. */
	#masthead .header-button .button {
		padding: 0 12px;
		font-size: 0.6875rem;
		line-height: 2.4em;
		white-space: nowrap;
	}

	.qctt-footer__social {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   9. Chuyen doi ngon ngu tren header ([qctt_lang_switcher])
   -------------------------------------------------------------------------- */
.qctt-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.qctt-lang__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border: 1px solid var(--qctt-border);
	border-radius: 999px;
	color: var(--qctt-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	transition: border-color var(--qctt-transition), color var(--qctt-transition),
		background-color var(--qctt-transition), box-shadow var(--qctt-transition);
}

.qctt-lang__item:hover,
.qctt-lang__item:focus-visible {
	border-color: var(--qctt-primary);
	color: var(--qctt-primary);
}

.qctt-lang__item.is-active {
	background-color: var(--qctt-primary-soft);
	border-color: var(--qctt-primary);
	color: var(--qctt-primary);
	box-shadow: inset 0 1px 2px rgba(218, 8, 18, 0.12);
}

.qctt-lang__flag {
	display: block;
	width: 16px;
	height: 11px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(6, 43, 79, 0.18);
}

/* Tren nen toi (header trong suot hoac header sticky mau dam) */
.dark .qctt-lang__item {
	border-color: var(--qctt-border-dark);
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 549px) {
	.qctt-lang__code {
		display: none;
	}

	.qctt-lang__item {
		padding: 5px 7px;
	}
}

/* --------------------------------------------------------------------------
   10. Hotline tren header ([qctt_hotline])
   -------------------------------------------------------------------------- */
.qctt-hotline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--qctt-text);
	line-height: 1.2;
}

.qctt-hotline:hover .qctt-hotline__number,
.qctt-hotline:focus-visible .qctt-hotline__number {
	color: var(--qctt-primary-dark);
}

.qctt-hotline__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background-image: radial-gradient(circle at 32% 26%, #ff5a63 0%, var(--qctt-red) 55%, #96050d 100%);
	border-radius: 50%;
	color: #fff;
	font-size: 16px;
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.5),
		inset 0 -3px 6px rgba(0, 0, 0, 0.20),
		0 6px 12px -6px rgba(150, 5, 13, 0.6);
}

.qctt-hotline__text {
	display: flex;
	flex-direction: column;
}

.qctt-hotline__label {
	color: var(--qctt-muted);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.qctt-hotline__number {
	color: var(--qctt-primary);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: color var(--qctt-transition);
}

/* Tren nen toi (chan trang, dai CTA) */
.dark .qctt-hotline,
.qctt-footer .qctt-hotline {
	color: #fff;
}

.dark .qctt-hotline__label,
.qctt-footer .qctt-hotline__label {
	color: rgba(255, 255, 255, 0.7);
}

.dark .qctt-hotline__number,
.qctt-footer .qctt-hotline__number {
	color: #fff;
}

@media (max-width: 1199px) {
	#masthead .qctt-hotline__text {
		display: none;
	}
}

@media (max-width: 849px) {
	#masthead .html_nav_position_text_top {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   11. Thanh tren cung (dia chi/email ben trai, hotline + ngon ngu ben phai)
   -------------------------------------------------------------------------- */
#top-bar {
	border-bottom: 1px solid var(--qctt-border);
}

#top-bar .qctt-topbar__info {
	color: var(--qctt-muted);
	font-size: 0.8125rem;
}

#top-bar .qctt-topbar__info i {
	margin-right: 4px;
	color: var(--qctt-primary);
	font-size: 13px;
}

#top-bar .qctt-topbar__sep {
	margin: 0 8px;
	color: var(--qctt-border);
}

/* Hotline o thanh tren cung nho gon hon ban mac dinh */
#top-bar .qctt-hotline__icon {
	width: 30px;
	height: 30px;
	font-size: 13px;
}

#top-bar .qctt-hotline__label {
	font-size: 0.625rem;
}

#top-bar .qctt-hotline__number {
	font-size: 0.9375rem;
}

#top-bar .html {
	padding-left: 14px;
	padding-right: 0;
}


/* --------------------------------------------------------------------------
   12. Canh menu chinh cho can doi
   Logo ben trai va nut CTA ben phai co be rong khac nhau, nen neu chi dung
   justify-content: center thi menu se lech. Dinh vi tuyet doi theo hang header
   de menu nam dung giua man hinh.
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
	/* Luu y: #masthead CHINH LA phan tu .header-main, khong phai cha cua no. */
	#masthead .header-inner {
		position: relative;
	}

	#masthead .header-inner > .flex-col.flex-left {
		position: static;
	}

	#masthead .header-nav-main.nav-left {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: max-content;
		max-width: none;
		flex-wrap: nowrap;
	}
}

#masthead .header-nav-main.nav > li > a {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   13. Khu vuc widget (sidebar cua blog)
   Cac widget o day la block widget cua WordPress (wp-block-*), khong phai
   widget co dien, nen phai bam vao dung ten class do Gutenberg sinh ra.
   -------------------------------------------------------------------------- */
.qctt-site .widget-area .widget {
	margin-bottom: 24px;
	padding: 22px 22px 24px;
	background-image: linear-gradient(165deg, #ffffff 0%, #ffffff 62%, #f4f8fc 100%);
	border: 1px solid var(--qctt-border);
	border-radius: var(--qctt-radius-md);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 10px 26px -18px rgba(6, 43, 79, 0.55);
}

.qctt-site .widget-area .widget:last-child {
	margin-bottom: 0;
}

/* --- Tieu de widget: gach chan do ngan, giong tieu de section --- */
.qctt-site .widget-area .widget > h2,
.qctt-site .widget-area .widget .wp-block-heading,
.qctt-site .widget-area .widget .widget-title,
.qctt-site .widget-area .widget .wp-block-search__label {
	position: relative;
	display: block;
	margin: 0 0 18px;
	padding-bottom: 12px;
	color: var(--qctt-navy);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-transform: uppercase;
}

.qctt-site .widget-area .widget > h2::after,
.qctt-site .widget-area .widget .wp-block-heading::after,
.qctt-site .widget-area .widget .widget-title::after,
.qctt-site .widget-area .widget .wp-block-search__label::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 42px;
	height: 3px;
	background-image: linear-gradient(90deg, var(--qctt-red) 0%, #ff6a5e 100%);
	border-radius: 2px;
}

/* --- O tim kiem --- */
.qctt-site .widget-area .wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.qctt-site .widget-area .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 14px;
	background-color: var(--qctt-surface);
	border: 1px solid var(--qctt-border);
	border-radius: var(--qctt-radius-sm);
	box-shadow: none;
	color: var(--qctt-text);
	font-family: var(--qctt-font-serif);
	font-size: 0.9375rem;
}

.qctt-site .widget-area .wp-block-search__input:focus {
	border-color: var(--qctt-blue);
	box-shadow: 0 0 0 3px rgba(1, 101, 179, 0.16);
	outline: none;
}

.qctt-site .widget-area .wp-block-search__button {
	flex: 0 0 auto;
	height: 46px;
	margin: 0;
	padding: 0 18px;
	background-image: linear-gradient(180deg, #f0281f 0%, var(--qctt-red) 55%, #b4060f 100%);
	border: 0;
	border-radius: var(--qctt-radius-sm);
	color: #fff;
	font-family: var(--qctt-font-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 46px;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 6px 14px -8px rgba(150, 5, 13, 0.8);
	transition: transform var(--qctt-transition), box-shadow var(--qctt-transition);
}

.qctt-site .widget-area .wp-block-search__button:hover,
.qctt-site .widget-area .wp-block-search__button:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 10px 20px -8px rgba(150, 5, 13, 0.9);
}

/* --- Danh sach bai viet moi / danh muc / luu tru --- */
.qctt-site .widget-area .wp-block-latest-posts__list,
.qctt-site .widget-area .widget_recent_entries ul,
.qctt-site .widget-area .widget_categories ul,
.qctt-site .widget-area .widget_archive ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qctt-site .widget-area .wp-block-latest-posts__list li,
.qctt-site .widget-area .widget_recent_entries li,
.qctt-site .widget-area .widget_categories li,
.qctt-site .widget-area .widget_archive li {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 20px;
	border-bottom: 1px dashed var(--qctt-border);
	list-style: none;
}

.qctt-site .widget-area .wp-block-latest-posts__list li:first-child,
.qctt-site .widget-area .widget_recent_entries li:first-child,
.qctt-site .widget-area .widget_categories li:first-child,
.qctt-site .widget-area .widget_archive li:first-child {
	padding-top: 0;
}

.qctt-site .widget-area .wp-block-latest-posts__list li:last-child,
.qctt-site .widget-area .widget_recent_entries li:last-child,
.qctt-site .widget-area .widget_categories li:last-child,
.qctt-site .widget-area .widget_archive li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Dau tron nho mau do dat truoc moi muc - hoan toan trang tri */
.qctt-site .widget-area .wp-block-latest-posts__list li::before,
.qctt-site .widget-area .widget_recent_entries li::before,
.qctt-site .widget-area .widget_categories li::before,
.qctt-site .widget-area .widget_archive li::before {
	content: "";
	position: absolute;
	top: 1.35em;
	left: 2px;
	width: 6px;
	height: 6px;
	background-color: var(--qctt-red);
	border-radius: 50%;
	transition: transform var(--qctt-transition), background-color var(--qctt-transition);
}

.qctt-site .widget-area .wp-block-latest-posts__list li:first-child::before,
.qctt-site .widget-area .widget_recent_entries li:first-child::before,
.qctt-site .widget-area .widget_categories li:first-child::before,
.qctt-site .widget-area .widget_archive li:first-child::before {
	top: 0.6em;
}

.qctt-site .widget-area .wp-block-latest-posts__list li:hover::before,
.qctt-site .widget-area .widget_recent_entries li:hover::before,
.qctt-site .widget-area .widget_categories li:hover::before,
.qctt-site .widget-area .widget_archive li:hover::before {
	transform: scale(1.5);
	background-color: var(--qctt-blue);
}

.qctt-site .widget-area .wp-block-latest-posts__list a,
.qctt-site .widget-area .widget_recent_entries a,
.qctt-site .widget-area .widget_categories a,
.qctt-site .widget-area .widget_archive a {
	display: block;
	color: var(--qctt-text);
	font-size: 0.9375rem;
	line-height: 1.6;
	transition: color var(--qctt-transition), transform var(--qctt-transition);
}

.qctt-site .widget-area .wp-block-latest-posts__list a:hover,
.qctt-site .widget-area .widget_recent_entries a:hover,
.qctt-site .widget-area .widget_categories a:hover,
.qctt-site .widget-area .widget_archive a:hover {
	color: var(--qctt-red);
	transform: translateX(2px);
}

/* Ngay dang hoac so bai, neu widget co bat --- */
.qctt-site .widget-area .wp-block-latest-posts__post-date,
.qctt-site .widget-area .widget_categories .count,
.qctt-site .widget-area .widget_archive .count {
	display: inline-block;
	margin-top: 3px;
	color: var(--qctt-muted);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

/* --- Binh luan gan day --- */
.qctt-site .widget-area .wp-block-latest-comments {
	margin: 0;
	padding: 0;
	list-style: none;
}

.qctt-site .widget-area .wp-block-latest-comments__comment {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px dashed var(--qctt-border);
	font-size: 0.9375rem;
	line-height: 1.6;
	list-style: none;
}

.qctt-site .widget-area .wp-block-latest-comments__comment:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.qctt-site .widget-area .wp-block-latest-comments__comment-meta a {
	color: var(--qctt-navy);
	font-weight: 700;
}

.qctt-site .widget-area .wp-block-latest-comments__comment-meta a:hover {
	color: var(--qctt-red);
}

/* Trang thai rong: chua co binh luan nao */
.qctt-site .widget-area .no-comments {
	margin: 0;
	padding: 14px 16px;
	background-color: var(--qctt-surface-soft);
	border: 1px dashed var(--qctt-border);
	border-radius: var(--qctt-radius-sm);
	color: var(--qctt-muted);
	font-size: 0.875rem;
	line-height: 1.6;
	text-align: center;
}

/* --- Dam may the --- */
.qctt-site .widget-area .tagcloud a,
.qctt-site .widget-area .wp-block-tag-cloud a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 12px;
	background-color: var(--qctt-surface-soft);
	border: 1px solid var(--qctt-border);
	border-radius: 999px;
	color: var(--qctt-text);
	/* WordPress in font-size inline cho tung the nen phai ep bang !important */
	font-size: 0.8125rem !important;
	transition: background-color var(--qctt-transition), border-color var(--qctt-transition), color var(--qctt-transition);
}

.qctt-site .widget-area .tagcloud a:hover,
.qctt-site .widget-area .wp-block-tag-cloud a:hover {
	background-color: var(--qctt-red);
	border-color: var(--qctt-red);
	color: #fff;
}

@media (max-width: 849px) {
	.qctt-site .widget-area .widget {
		padding: 18px 18px 20px;
	}
}

/* O tim kiem phai chiem het chieu ngang widget.
   Khoi search cua WordPress mac dinh co be rong theo noi dung, con Flatsome
   lai dat width rieng cho input, nen phai ep ca ba cap. */
.qctt-site .widget-area .widget_search form,
.qctt-site .widget-area .wp-block-search,
.qctt-site .widget-area .wp-block-search__inside-wrapper {
	width: 100%;
	max-width: 100%;
}

.qctt-site .widget-area .wp-block-search__input,
.qctt-site .widget-area .widget_search input[type="search"] {
	width: 100%;
}

/* Cot sidebar chi rong khoang 215px sau padding. Neu de o nhap va nut nam
   ngang thi o nhap chi con khoang 55px - qua hep de go. Vi vay xep doc:
   o nhap mot dong, nut mot dong, ca hai deu tran chieu ngang. */
.qctt-site .widget-area .wp-block-search__inside-wrapper {
	flex-direction: column;
	gap: 10px;
}

.qctt-site .widget-area .wp-block-search__button {
	width: 100%;
	padding: 0 14px;
}