/**
 * Header, Footer và văn bản dùng chung.
 *
 * Nạp ở mọi trang. Chỉ chỉnh phần bên trong các widget Elementor mà Global Kit
 * không với tới, hoặc nơi Kit gán sai vai trò màu.
 *
 * Class trong file này lấy từ markup THẬT của trang, đo bằng trình duyệt — không
 * đoán. Ví dụ chữ trong icon-list nằm ở span.elementor-icon-list-text chứ không
 * ở thẻ a, nên style vào thẻ a sẽ không có tác dụng.
 */

/* ==========================================================================
   Header
   ========================================================================== */

[data-elementor-type="header"] {
	background: var(--cgnt-bg);
	border-bottom: 1px solid var(--cgnt-border);
}

/* Tên site — tạm thời thay chỗ cho logo */
[data-elementor-type="header"] .elementor-widget-theme-site-title {
	font-size: var(--cgnt-text-lg);
	font-weight: var(--cgnt-weight-bold);
	letter-spacing: -0.01em;
}

/* Phai tro vao .elementor-heading-title: widget site-title dung markup cua
   Heading, va Kit gan mau primary o cap do — xanh #5FA8D3 tren nen trang chi dat
   2.6:1, khong doc duoc o vai tro ten thuong hieu. */
[data-elementor-type="header"] .elementor-widget-theme-site-title .elementor-heading-title,
[data-elementor-type="header"] .elementor-widget-theme-site-title .elementor-heading-title a {
	color: var(--cgnt-text);
	text-decoration: none;
}

/* ---------- Menu ---------- */

[data-elementor-type="header"] .elementor-nav-menu a.elementor-item {
	padding: var(--cgnt-space-2) var(--cgnt-space-3);
	font-size: var(--cgnt-text-sm);
	font-weight: var(--cgnt-weight-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cgnt-text);
	fill: var(--cgnt-text);
	transition: color var(--cgnt-transition);
}

[data-elementor-type="header"] .elementor-nav-menu a.elementor-item:hover,
[data-elementor-type="header"] .elementor-nav-menu a.elementor-item.elementor-item-active {
	color: var(--cgnt-primary-dark);
}

/* Gạch chân mặc định của Elementor cho mục đang mở khá thô; thay bằng nét mảnh
   sát chân chữ. */
[data-elementor-type="header"] .elementor-nav-menu a.elementor-item:after,
[data-elementor-type="header"] .elementor-nav-menu a.elementor-item:before {
	background: var(--cgnt-primary-dark);
	height: 1px;
}

/* ==========================================================================
   Thanh trên cùng — liên hệ + tìm kiếm
   ========================================================================== */

.cgnt-topbar {
	background: var(--cgnt-bg-soft);
	border-bottom: 1px solid var(--cgnt-border);
}

.cgnt-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cgnt-space-2) var(--cgnt-space-5);
}

.cgnt-contact__item {
	display: inline-flex;
	align-items: center;
	gap: var(--cgnt-rhythm-tight);
	font-size: var(--cgnt-text-xs);
	line-height: var(--cgnt-lh-xs);
	color: var(--cgnt-text-muted);
}

.cgnt-contact__item--link {
	text-decoration: none;
	transition: color var(--cgnt-transition);
}

.cgnt-contact__item--link:hover {
	color: var(--cgnt-text);
}

.cgnt-contact__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--cgnt-primary);
}

/* ---------- Ô tìm kiếm ---------- */

/*
 * Kiểu gạch chân thay vì khung hộp.
 *
 * Mặc định Elementor cho ô tìm kiếm một khối nền xám đặc có bo góc — bốn cạnh
 * đóng kín, đọc ra là một nút bấm nặng nề giữa thanh header vốn nhẹ. Bỏ nền, bỏ
 * viền, chỉ giữ một nét gạch chân: ô nhập hoà vào nền và chỉ nổi lên khi được
 * chú ý tới.
 *
 * Ô nới rộng ra khi focus — một tín hiệu nhỏ cho biết đang ở chế độ nhập, thay
 * cho việc phải vẽ thêm khung.
 */
/* Chieu cao KHONG dat o day. Elementor sinh CSS rieng cho tung phan tu tu control
   "size" cua widget (mac dinh 50px), selector .elementor-50 .elementor-element-xxx
   co do dac hieu rat cao — de bang CSS thi thua. Dat thang vao cai dat widget
   trong _elementor_data moi la nguon dung. */
.cgnt-topbar .elementor-search-form__container {
	width: 200px;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cgnt-border);
	border-radius: 0;
	box-shadow: none;
	transition: width var(--cgnt-transition), border-color var(--cgnt-transition);
}

.cgnt-topbar .elementor-search-form__container:focus-within {
	width: 280px;
	border-bottom-color: var(--cgnt-text);
	box-shadow: none;
}

.cgnt-topbar .elementor-search-form__input {
	padding-inline: var(--cgnt-rhythm-tight);
	font-size: var(--cgnt-text-xs);
	color: var(--cgnt-text);
	background: transparent;
}

.cgnt-topbar .elementor-search-form__input::placeholder {
	color: var(--cgnt-text-muted);
	opacity: 1;
}

.cgnt-topbar .elementor-search-form__icon {
	width: auto;
	padding: 0;
	color: var(--cgnt-text-muted);
	font-size: 14px;
}

/* Nút xoá của Elementor cũng bỏ nền cho đồng bộ */
.cgnt-topbar .elementor-search-form__toggle,
.cgnt-topbar .elementor-search-form .dialog-lightbox-close-button {
	background: transparent;
	color: var(--cgnt-text-muted);
}

/* Bảng gợi ý rộng hơn ô nhập, vì tên sản phẩm dài hơn 200px */
.cgnt-topbar .cgnt-search-panel {
	inset: calc(100% + 8px) 0 auto auto;
	width: 320px;
}

/* ---------- Giỏ hàng ---------- */

[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button {
	display: flex;
	align-items: center;
	gap: var(--cgnt-space-2);
	padding: var(--cgnt-space-2) var(--cgnt-space-3);
	border: 1px solid var(--cgnt-border);
	border-radius: var(--cgnt-radius-sm);
	background: var(--cgnt-bg);
	color: var(--cgnt-text);
	font-size: var(--cgnt-text-sm);
	font-weight: var(--cgnt-weight-medium);
	transition: border-color var(--cgnt-transition);
}

[data-elementor-type="header"] .elementor-menu-cart__toggle .elementor-button:hover {
	border-color: var(--cgnt-text);
}

/* Số lượng: chấm tròn nhỏ màu mực thay vì badge đỏ mặc định — đỏ tươi phá bảng
   màu trầm, và số lượng giỏ hàng không phải cảnh báo. */
/* Badge số lượng giỏ hàng.
 *
 * Ba lần thử trước đều sai, ghi lại để không lặp:
 *   1. .elementor-button-icon-qty[data-counter] — markup thật không có thuộc
 *      tính đó, selector trượt hoàn toàn.
 *   2. Bỏ thuộc tính đi vẫn trượt: Elementor dùng chuỗi 4 class.
 *   3. Khớp đủ 4 class vẫn trượt: CÙNG độ đặc hiệu, mà CSS widget của Elementor
 *      nạp theo yêu cầu nên đứng sau file này trong cascade.
 *
 * Cách đúng không phải leo thang độ đặc hiệu mà là dùng chính biến của Elementor:
 *   background-color: var(--items-indicator-background-color, #d9534f)
 * Đặt biến thì không có cuộc đua cascade nào để thua.
 *
 * Đỏ tươi mặc định phá bảng màu trầm, và số lượng giỏ hàng không phải cảnh báo.
 */
[data-elementor-type="header"] .elementor-widget-woocommerce-menu-cart {
	--items-indicator-background-color: var(--cgnt-text);
	--items-indicator-text-color: var(--cgnt-bg);
}

/* ==========================================================================
   Footer
   ========================================================================== */

[data-elementor-type="footer"] {
	background: var(--cgnt-bg-soft);
	border-top: 1px solid var(--cgnt-border);
}

/* Tiêu đề cột. Kit đang gán màu primary #5FA8D3 — chữ 20px đậm trên nền sáng chỉ
   đạt 2.6:1, dưới ngưỡng 3:1 của chữ lớn. Đổi sang mực. */
[data-elementor-type="footer"] .elementor-widget-heading .elementor-heading-title {
	font-size: var(--cgnt-text-sm);
	font-weight: var(--cgnt-weight-bold);
	letter-spacing: var(--cgnt-tracking-2xs);
	text-transform: uppercase;
	color: var(--cgnt-text);
}

[data-elementor-type="footer"] .elementor-widget-theme-site-title,
[data-elementor-type="footer"] .elementor-widget-theme-site-title a {
	font-size: var(--cgnt-text-md);
	font-weight: var(--cgnt-weight-bold);
	color: var(--cgnt-text);
	text-decoration: none;
}

/* Chữ trong icon-list nằm ở span này, KHÔNG ở thẻ a. Kit đang gán #F8F8F5 —
   chính là màu nền trắng ngà — nên link gần như vô hình, đo được 1.1:1. */
[data-elementor-type="footer"] .elementor-icon-list-text {
	font-size: var(--cgnt-text-sm);
	color: var(--cgnt-text);
	transition: color var(--cgnt-transition);
}

[data-elementor-type="footer"] .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--cgnt-primary-dark);
}

[data-elementor-type="footer"] .elementor-icon-list-icon svg,
[data-elementor-type="footer"] .elementor-icon-list-icon i {
	color: var(--cgnt-primary);
	fill: var(--cgnt-primary);
}

[data-elementor-type="footer"] .elementor-widget-text-editor {
	font-size: var(--cgnt-text-sm);
	line-height: var(--cgnt-lh-md);
	color: var(--cgnt-text-muted);
}

[data-elementor-type="footer"] .elementor-widget-text-editor strong {
	color: var(--cgnt-text);
	font-weight: var(--cgnt-weight-bold);
}

[data-elementor-type="footer"] .elementor-widget-text-editor p,
.elementor-widget-e-paragraph p,
.cgnt-prose p {
	margin: 0 0 var(--cgnt-rhythm-inner);
}

[data-elementor-type="footer"] .elementor-widget-text-editor p:last-child,
.elementor-widget-e-paragraph p:last-child,
.cgnt-prose p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Bảng gợi ý tìm kiếm
   ========================================================================== */

[data-elementor-type="header"] form.elementor-search-form {
	position: relative;
}

.cgnt-search-panel {
	position: absolute;
	inset: calc(100% + 6px) 0 auto 0;
	z-index: 9999;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--cgnt-bg);
	border: 1px solid var(--cgnt-border);
	border-radius: var(--cgnt-radius-md);
	box-shadow: 0 8px 24px rgb(43 48 56 / 12%);
}

/* Khai báo tường minh vì display bên trên đã đè hành vi mặc định của hidden */
.cgnt-search-panel[hidden] {
	display: none;
}

.cgnt-search-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cgnt-search-panel__item {
	display: flex;
	align-items: center;
	gap: var(--cgnt-rhythm-inner);
	padding: var(--cgnt-space-2) var(--cgnt-space-3);
	color: var(--cgnt-text);
	text-decoration: none;
	transition: background var(--cgnt-transition);
}

.cgnt-search-panel__item:hover,
.cgnt-search-panel__item.is-active {
	background: var(--cgnt-bg-soft);
}

.cgnt-search-panel__item img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--cgnt-radius-sm);
	background: var(--cgnt-bg-soft);
}

.cgnt-search-panel__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cgnt-search-panel__title {
	overflow: hidden;
	font-size: var(--cgnt-text-sm);
	font-weight: var(--cgnt-weight-medium);
	line-height: var(--cgnt-lh-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cgnt-search-panel__price {
	font-size: var(--cgnt-text-xs);
	color: var(--cgnt-text-muted);
}

.cgnt-search-panel__msg {
	margin: 0;
	padding: var(--cgnt-space-3);
	font-size: var(--cgnt-text-sm);
	color: var(--cgnt-text-muted);
}

/* ==========================================================================
   Header trên tablet và điện thoại

   Mốc 1024px chứ không phải 767px. Ban đầu tôi đặt 767 nên tablet rơi ra ngoài:
   đo được ở 768–1024 địa chỉ vẫn hiện và hàng chính vẫn phình 95px, trong khi
   desktop chỉ 68px. Từ 1024 trở xuống menu đã thu về nút toggle, tức bố cục đã
   là bố cục thu gọn — thanh phụ cũng nên thu gọn theo.
   ========================================================================== */

@media (max-width: 1024px) {

	/* Địa chỉ ẩn đi. Trên điện thoại nó chiếm một dòng nguyên mà khách hiếm khi
	   cần ngay lúc mở trang — địa chỉ đầy đủ vẫn còn ở footer. Tìm kiếm thì
	   ngược lại: màn hình nhỏ khó lướt, tìm kiếm là lối tắt quan trọng nhất. */
	/* Ẩn cả cột chứa địa chỉ, không chỉ widget bên trong. Đo được lúc chỉ ẩn
	   widget: cột vẫn giữ w=448 trên màn 960 dù h=0, đẩy ô tìm kiếm sang nửa phải
	   và chừa một dải trống bên trái. */
	.cgnt-topbar > .elementor-element > .elementor-element:has( .cgnt-contact ) {
		display: none;
	}

	.cgnt-topbar .cgnt-contact {
		display: none;
	}

	/* Thanh trên thu lại còn đúng ô tìm kiếm, bỏ nền riêng để nó không đọc như
	   một dải thứ hai cạnh header. Đường kẻ dưới là đủ để phân tách. */
	.cgnt-topbar {
		background: var(--cgnt-bg);
	}

	.cgnt-topbar > .elementor-element {
		padding-block: var(--cgnt-rhythm-tight);
	}

	/* Tìm kiếm chiếm trọn chiều ngang, bỏ luôn hiệu ứng nới rộng khi focus vì
	   đã rộng hết cỡ.
	   Phải nới cả cột bọc ngoài: width:100% của ô nhập là 100% CỦA CỘT, mà cột
	   vốn co theo nội dung — đo được ô tìm kiếm chỉ 220px thay vì 350px. */
	.cgnt-topbar > .elementor-element > .elementor-element {
		width: 100%;
	}

	/* Cả widget wrapper nữa. Cột cha là row + justify-content:flex-end nên widget
	   co theo nội dung — đo được wrapper 220px trong cột 350px, và width:100%
	   của ô nhập là 100% CỦA WRAPPER nên vẫn 220px. Ba lớp phải nới cả ba. */
	.cgnt-topbar .elementor-widget-search-form {
		width: 100%;
	}

	.cgnt-topbar .elementor-search-form__container,
	.cgnt-topbar .elementor-search-form__container:focus-within {
		width: 100%;
	}

	/* Header chính giữ MỘT hàng: tên site trái, menu và giỏ hàng phải.
	   Đây là bố cục quen thuộc trên điện thoại; xếp chồng ba tầng vừa cao vừa
	   khiến khách phải cuộn mới thấy sản phẩm. */
	.cgnt-header-main > .elementor-element {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/* Ba nhóm con cũng là flex container, nên phải căn giữa BÊN TRONG từng nhóm.
	   Không có dòng này thì menu nằm cao hơn tên site 24px — đo được y=117 so
	   với y=141. */
	.cgnt-header-main > .elementor-element > .elementor-element {
		width: auto;
		flex: 0 1 auto;
		align-items: center;
		justify-content: center;
	}

	/* Tên site co lại được để nhường chỗ cho menu và giỏ hàng */
	.cgnt-header-main .elementor-widget-theme-site-title {
		font-size: var(--cgnt-text-md);
	}

	/* Widget menu là flex container chứa nút toggle (33px) và một thẻ nav dropdown
	   cao 0 nằm dưới. Gap giữa hai phần tử đó đẩy widget lên 63px, khiến nút
	   toggle nằm lệch lên trên so với tên site và giỏ hàng — đo được y=117 so với
	   y=141.

	   Bỏ gap và căn giữa là đủ. Cố ý KHÔNG đưa dropdown ra khỏi luồng bằng
	   position:absolute: nó đang neo theo widget rộng 33px, tách ra là menu xổ
	   xuống chỉ còn rộng bằng cái nút. */
	.cgnt-header-main .elementor-widget-nav-menu {
		gap: 0;
		align-items: center;
	}

	/* Nhóm đầu (tên site) nở ra để nút menu và giỏ hàng dồn về mép phải. Trước đó
	   ba nhóm chia đều nên nút hamburger đứng chính giữa hàng, không dính vào đâu. */
	.cgnt-header-main > .elementor-element > .elementor-element:first-child {
		flex: 1 1 auto;
		justify-content: flex-start;
	}

	/* Ô nhập chỉ có gạch chân mà nút lại là khối vuông đặc — hai thứ đọc như hai
	   thành phần rời. Bỏ nền, để riêng icon ngồi trên cùng đường kẻ. */
	.cgnt-topbar .elementor-search-form__submit {
		background: transparent;
		min-width: 0;
		padding-inline: var(--cgnt-rhythm-tight);
		/* Icon vốn màu trắng, chỉ nhìn ra nhờ nền xám của nút. Bỏ nền thì phải
		   đổi màu icon, nếu không nó là trắng trên trắng. */
		color: var(--cgnt-text-muted);
	}

	/* Elementor dựng icon thành SVG và đặt thẳng fill:#fff, nên đổi mỗi `color`
	   không có tác dụng — đo được color đã thành xám mà fill vẫn trắng. Trả fill
	   về currentColor để nó theo màu nút, kể cả lúc hover. */
	.cgnt-topbar .elementor-search-form__submit svg,
	.cgnt-topbar .elementor-search-form__submit svg path {
		fill: currentColor;
	}

	.cgnt-topbar .elementor-search-form__submit:hover,
	.cgnt-topbar .elementor-search-form__submit:focus-visible {
		background: transparent;
		color: var(--cgnt-text);
	}
}

/* ==========================================================================
   Văn bản trong widget Text Editor

   Reset của Hello Elementor để thẻ p ở margin-block-end 0.9rem — đủ cho một
   dòng nhưng quá sát khi các đoạn nằm cạnh nhau, đọc ra như một khối chữ liền.

   Phủ ba nhóm: widget Text Editor kiểu cũ, widget e-paragraph kiểu mới của
   Elementor 4, và class .cgnt-prose làm lối thoát — gán class đó vào bất kỳ
   widget nào ở Advanced → CSS Classes là style áp ngay, không phụ thuộc
   Elementor đặt tên widget thế nào ở bản sau.
   ========================================================================== */

.elementor-widget-text-editor p,
.elementor-widget-e-paragraph p,
.cgnt-prose p {
	margin: 0 0 var(--cgnt-rhythm-block);
}

.elementor-widget-text-editor p:last-child,
.elementor-widget-e-paragraph p:last-child,
.cgnt-prose p:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-widget-e-paragraph ul,
.elementor-widget-e-paragraph ol,
.cgnt-prose ul,
.cgnt-prose ol {
	margin: 0 0 var(--cgnt-rhythm-block);
	padding-left: 0;
	list-style: none;
}

.elementor-widget-text-editor ul:last-child,
.elementor-widget-text-editor ol:last-child,
.cgnt-prose ul:last-child,
.cgnt-prose ol:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor li,
.elementor-widget-e-paragraph li,
.cgnt-prose li {
	position: relative;
	margin-bottom: var(--cgnt-rhythm-tight);
	padding-left: 20px;
}

.elementor-widget-text-editor li:last-child,
.cgnt-prose li:last-child {
	margin-bottom: 0;
}

/* Gạch đầu dòng là một nét ngang ngắn màu be, không phải chấm tròn mặc định.
   Chấm tròn đen kéo sự chú ý về phía dấu; nét ngang mảnh dẫn mắt vào chữ. */
.elementor-widget-text-editor ul li::before,
.elementor-widget-e-paragraph ul li::before,
.cgnt-prose ul li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 10px;
	height: 1px;
	background: var(--cgnt-accent);
}

.elementor-widget-text-editor ol,
.cgnt-prose ol {
	counter-reset: cgnt-list;
}

.elementor-widget-text-editor ol li,
.cgnt-prose ol li {
	counter-increment: cgnt-list;
}

.elementor-widget-text-editor ol li::before,
.cgnt-prose ol li::before {
	content: counter(cgnt-list) ".";
	position: absolute;
	left: 0;
	color: var(--cgnt-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CHUYỂN TỪ single-product.css SANG ĐÂY

   Khối chính sách vốn nằm trong single-product.css, mà file đó chỉ nạp khi
   is_product(). Đặt shortcode [cgnt_policies] ở trang chủ thì nó render trần:
   hiện chấm tròn mặc định của <ul> và icon dính liền chữ vì không có flex/gap.

   Nó là thành phần dùng chung chứ không riêng trang sản phẩm, nên chuyển sang
   layout.css — file nạp ở mọi trang.
   ========================================================================== */

/* ==========================================================================
   Dải chính sách bán hàng
   ========================================================================== */

/* Khối này cố ý KHÔNG có nền và không có khung.
   Nền màu cộng viền bo góc biến nó thành một thẻ nổi, tranh chú ý với khối mua
   hàng ngay phía trên. Các shop thời trang theo hướng tối giản (COS, Arket,
   Everlane) tách vùng bằng một nét kẻ mảnh chứ không bằng hộp — trang vì thế
   tĩnh hơn và không bị vụn thành nhiều thẻ. */
.cgnt-policies {
	display: grid;
	/*
	 * auto-fit thay cho 2 cột cố định: khối này giờ dùng ở cả cột hẹp của trang
	 * sản phẩm lẫn bề ngang lớn của trang chủ. Cột hẹp ~440px cho 2 cột, trang
	 * chủ 1200px cho đủ 4 mục thành một hàng, điện thoại tự về 1 cột.
	 */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--cgnt-rhythm-block);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Bản tối giản: chỉ một nét kẻ tách khỏi khối mua hàng phía trên. */
.cgnt-policies--tinh-gian {
	padding-top: var(--cgnt-rhythm-group);
	border-top: 1px solid var(--cgnt-border);
}

.cgnt-policies__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flex nằm ở lớp bọc bên trong chứ không ở <li>: mục có trang chính sách được
   bọc bằng <a>, mục không có thì bọc bằng <span>. Đặt flex ở <li> sẽ khiến lớp
   bọc trở thành một khối con duy nhất và icon mất hàng. */
.cgnt-policies__link,
.cgnt-policies__plain {
	display: flex;
	align-items: flex-start;
	gap: var(--cgnt-rhythm-inner);
	color: inherit;
	text-decoration: none;
}

.cgnt-policies__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	color: var(--cgnt-text-muted);
}

.cgnt-policies__body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cgnt-policies__title {
	font-size: var(--cgnt-text-sm);
	font-weight: var(--cgnt-weight-medium);
	line-height: var(--cgnt-lh-sm);
	color: var(--cgnt-text);
}

.cgnt-policies__note {
	font-size: var(--cgnt-text-xs);
	line-height: var(--cgnt-lh-xs);
	color: var(--cgnt-text-muted);
}

/* Baymard: 44% site không đặt link chính sách đổi trả ngay trên trang sản phẩm.
   Khi trang chính sách đã xuất bản thì mục tương ứng thành liên kết. */
.cgnt-policies__link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.cgnt-policies__link:hover .cgnt-policies__title {
	text-decoration: underline;
}


/* ==========================================================================
   Bản nổi bật — dùng ngoài trang sản phẩm

   Ba thay đổi so với bản tối giản, theo thứ tự sức nặng: nền tách khối ra khỏi
   dòng chảy của trang, icon được cấp một đĩa tròn trắng và màu thương hiệu thay
   vì xám nhạt, chữ tăng một bậc trong thang cỡ.

   Xếp dọc chứ không ngang: ở bề ngang trang chủ mỗi cột được ~276px, để ngang
   thì icon ăn mất 60px và tiêu đề dài như "Thanh toán khi nhận hàng" phải xuống
   hai dòng, làm bốn cột cao thấp so le.
   ========================================================================== */

.cgnt-policies--noi-bat {
	gap: var(--cgnt-rhythm-tight);
	padding: var(--cgnt-rhythm-group) var(--cgnt-rhythm-block);
	/*
	 * Nền TRẮNG chứ không phải bg-soft. Footer cũng dùng bg-soft, nên khi khối này
	 * nằm ngay trên footer thì hai vùng liền kề cùng một màu và dính thành một
	 * mảng — đo được cả hai đều rgb(248,248,245). Viền mảnh làm việc tách, còn
	 * điểm nhấn chuyển sang đĩa icon.
	 */
	background: var(--cgnt-bg);
	border: 1px solid var(--cgnt-border);
	border-radius: var(--cgnt-radius-md);
	/* Khoảng thở để mắt thấy rõ đây là hai phần riêng, không chỉ dựa vào màu. */
	margin-block-end: calc(var(--cgnt-rhythm-group) * 2);
}

.cgnt-policies--noi-bat .cgnt-policies__link,
.cgnt-policies--noi-bat .cgnt-policies__plain {
	flex-direction: column;
	align-items: center;
	gap: var(--cgnt-rhythm-inner);
	padding: var(--cgnt-rhythm-inner) var(--cgnt-rhythm-tight);
	text-align: center;
}

/* Đĩa tròn trắng trên nền xám: đủ để icon thành điểm dừng mắt mà không cần tô
   màu mạnh hay đổ bóng. */
/* Đĩa icon đảo ngược theo nền khối: khối trắng thì đĩa lấy màu be, để icon vẫn
   là điểm dừng mắt thay vì chìm vào nền. */
.cgnt-policies--noi-bat .cgnt-policies__icon {
	width: 48px;
	height: 48px;
	margin: 0;
	background: var(--cgnt-bg-soft);
	border-radius: 50%;
	color: var(--cgnt-primary-dark);
}

.cgnt-policies--noi-bat .cgnt-policies__icon svg {
	width: 22px;
	height: 22px;
}

.cgnt-policies--noi-bat .cgnt-policies__body {
	gap: var(--cgnt-rhythm-tight);
	align-items: center;
}

.cgnt-policies--noi-bat .cgnt-policies__title {
	font-size: var(--cgnt-text-md);
	font-weight: var(--cgnt-weight-bold);
}

.cgnt-policies--noi-bat .cgnt-policies__note {
	font-size: var(--cgnt-text-sm);
}

/* Chỉ mục có trang chính sách mới phản hồi khi rê chuột — mục không bấm được mà
   vẫn sáng lên là một lời hứa suông. */
.cgnt-policies--noi-bat .cgnt-policies__link:hover .cgnt-policies__icon,
.cgnt-policies--noi-bat .cgnt-policies__link:focus-visible .cgnt-policies__icon {
	background: var(--cgnt-primary-dark);
	color: var(--cgnt-bg);
}

/* Còn một cột thì xếp dọc căn giữa trông trống trải và tốn chiều cao; quay về
   hàng ngang căn trái như bản tối giản. */
@media (max-width: 479px) {
	.cgnt-policies--noi-bat .cgnt-policies__link,
	.cgnt-policies--noi-bat .cgnt-policies__plain {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}

	.cgnt-policies--noi-bat .cgnt-policies__body {
		align-items: flex-start;
	}

	.cgnt-policies--noi-bat .cgnt-policies__icon {
		width: 40px;
		height: 40px;
	}
}