/* WebHostReview.com Editorial Hub - Redesigned CSS for optimal UI/UX */
:root {
	--hr-ink: #102033; /* Darker navy ink for better contrast */
	--hr-text: #334e68;
	--hr-muted: #64748b;
	--hr-line: #e3eef5;
	--hr-soft: #f7fbfd;
	--hr-blue: #1f9fd4; /* Primary brand blue from logo ring */
	--hr-blue-hover: #1689bd;
	--hr-blue-light: #eaf6fc;
	--hr-sky: #29abe2; /* Logo ring sky blue */
	--hr-red: #e8362d; /* Logo star red */
	--hr-red-light: #fdecea;
	--hr-mint: #10b981;
	--hr-mint-light: #ecfdf5;
	--hr-orange: #f45435;
	--hr-orange-light: #fff7ed;
	--hr-sun: #f59e0b;
	/* RGB-component tokens — để rgba() shadow/border resolve từ token (palette-overridable).
	 * Quy ước: rgba(var(--hr-blue-rgb), .x) thay cho hardcode rgba(47,109,246,.x). */
	--hr-blue-rgb: 31, 159, 212;   /* khớp --hr-blue #1f9fd4 */
	--hr-orange-rgb: 244, 84, 53;  /* khớp --hr-orange #f45435 */
	/* Accent CTA & coupon-offer tokens — palette-overridable (xem css/presets.css) */
	--hr-search-btn: #f45435;
	--hr-search-btn-hover: #d64325;
	--hr-offer-grad-from: #fffaf0;
	--hr-offer-grad-to: #ffedd5;
	--hr-offer-value: #ff4500;
	/* ===== DARK-SURFACE TOKENS — hero / store-banner / footer =====
	 * Các bề mặt TỐI dùng nền dark base + accent. Accent đổi theo palette để
	 * hero/footer không còn "kẹt xanh" khi chuyển sang sunset/forest/mono.
	 * Default = đúng giá trị hardcode cũ (ocean) → không regression trang thường. */
	--hr-hero-from: #0b192c;        /* dark base đầu gradient hero */
	--hr-hero-to: #2563eb;          /* accent cuối gradient hero (palette) */
	--hr-hero-highlight: #60a5fa;   /* màu highlight tiêu đề hero + accent text footer */
	--hr-banner-from: #1e3a8a;      /* store header banner — start */
	--hr-banner-to: #3b82f6;        /* store header banner — end (palette) */
	--hr-footer-bg: #0f172a;        /* nền footer cổ điển (#footer) */
	--hr-footer-deep: #0b1120;      /* nền bar dưới cùng footer */
	--hr-footer-accent: #3b82f6;    /* border-top / link hover / title underline */
	--hr-footer-accent-rgb: 59, 130, 246;
	--hr-hero-glow-rgb: 56, 189, 248; /* glow xanh nhạt hero::before (palette-overridable) */
	/* Footer hr-site-footer — gradient navy 3 điểm (nền giữ tối, glow accent đổi theo palette) */
	--hr-footer-deep-from: #071427; /* gradient navy footer — start */
	--hr-footer-deep-mid: #0b1730;  /* gradient navy footer — mid */
	--hr-footer-deep-to: #07111f;   /* gradient navy footer — end */
	/* Archive/blog header — banner accent SÁNG (wp-archive-header / wp-blog-header).
	 * Khác dark-surface: đây là banner gradient màu accent tươi, không phải nền tối. */
	--hr-archive-head-from: #1d4ed8; /* gradient header — start */
	--hr-archive-head-mid: #2563eb;  /* gradient header — mid */
	--hr-archive-head-to: #0ea5e9;   /* gradient header — end (sky) */
	--hr-archive-head-rgb: 37, 99, 235; /* shadow/border tint header (palette-overridable) */
	/* Alias --hr-brand → --hr-blue: nhiều file (tpl-stores, tpl-coupon-cats, phase3/4)
	 * dùng var(--hr-brand, #fallback). Định nghĩa alias ở :root để chúng resolve theo
	 * --hr-blue (đã override theo palette) thay vì kẹt ở fallback hardcode. */
	--hr-brand: var(--hr-blue);
	--hr-brand-light: var(--hr-blue-light);
	--hr-card: #ffffff;
	--hr-shadow: 0 10px 30px -10px rgba(16, 32, 51, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
	--hr-shadow-lg: 0 20px 40px -15px rgba(16, 32, 51, 0.12), 0 1px 10px rgba(0, 0, 0, 0.03);
	--hr-radius: 16px;
	--hr-radius-lg: 24px;

	/* ===== LAYOUT TOKEN CONTRACT — nguồn chân lý DUY NHẤT cho default layout =====
	 * (Trước đây nằm ở css/presets.css :root nhưng file đó chỉ load có điều kiện
	 *  → token default biến mất trên trang thường. Gom về đây vì hr-home.css
	 *  LUÔN được enqueue. presets.css giờ chỉ chứa OVERRIDE theo body class
	 *  preset/palette.)
	 */
	--hr-container: 1200px;   /* site-wide standard width (header/footer/archive) */
	--hr-gutter: 20px;        /* inner padding of container */
	--hr-grid-cols: 3;        /* default card grid columns */
	--hr-grid-cols-wide: 4;   /* front-page segment grid columns */
	--hr-reading-cols: 3;     /* blog "reading" grid columns */
	--hr-related-cols: 3;     /* store "related" cards columns */
	--hr-gap: 24px;           /* gap between cards */
	--hr-card-radius: 16px;   /* card corner radius */
	--hr-card-pad: 20px;      /* card inner padding */
	--hr-card-style: soft;    /* flat | soft | bordered (semantic) */
	--hr-sidebar-w: 320px;    /* sidebar width */
	--hr-font-scale: 1;       /* heading/body scale multiplier */
	--hr-heading-weight: 800; /* heading font-weight */
	--hr-btn-radius: 10px;    /* button corner radius */

	/* Card surface helpers driven by tokens (presets can swap the look) */
	--hr-card-shadow: var(--hr-shadow);
	--hr-card-border: 1px solid var(--hr-line);
	--hr-card-bg: var(--hr-card);
}

html { scroll-behavior: smooth; }

body.hr-global-typography {
	background: #f8fafc;
	color: var(--hr-text);
	font-family: Arial, Tahoma, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

body.hr-global-typography h1, body.hr-global-typography h2, body.hr-global-typography h3, body.hr-global-typography h4, body.hr-global-typography h5, body.hr-global-typography h6 {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body.hr-global-typography .hr-site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid var(--hr-line);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

body.hr-global-typography .hr-header-search {
	display: flex;
	align-items: center;
	width: 280px;
	max-width: 280px;
	background: var(--hr-soft);
	border: 1px solid var(--hr-line);
	border-radius: 99px;
	padding: 3px 3px 3px 16px;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

body.hr-global-typography .hr-header-search:focus-within {
	border-color: var(--hr-search-btn);
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(var(--hr-orange-rgb), 0.08);
}

body.hr-global-typography .hr-header-search form {
	display: flex;
	width: 100%;
	margin: 0;
	align-items: center;
}

body.hr-global-typography .hr-header-search input,
body.hr-global-typography .hr-header-search input[type="search"],
body.hr-global-typography .hr-header-search input[type="text"] {
	width: 100%;
	height: 32px;
	padding: 0;
	border: none !important;
	border-radius: 0;
	background: transparent !important;
	color: var(--hr-ink);
	font-size: 13px;
	outline: none !important;
	box-shadow: none !important;
}

body.hr-global-typography .hr-header-search button,
body.hr-global-typography .hr-header-search input[type="submit"] {
	width: 32px;
	height: 32px;
	min-width: 32px;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: var(--hr-search-btn) !important;
	color: #ffffff !important;
	cursor: pointer;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	box-shadow: 0 2px 6px rgba(var(--hr-orange-rgb), 0.2);
}

body.hr-global-typography .hr-header-search button:hover {
	background: var(--hr-search-btn-hover) !important;
	transform: scale(1.05);
	box-shadow: 0 4px 10px rgba(var(--hr-orange-rgb), 0.3);
}

body.hr-global-typography .hr-header-search button svg {
	width: 18px;
	height: 18px;
}

body.hr-global-typography .hr-header-search button::before,
body.hr-global-typography .hr-header-search input[type="submit"]::before {
	display: none;
}

/* Break Clipper #main constraints on homepage */
body.home #main {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.hr-home,
.hr-home * { box-sizing: border-box; }

.hr-home {
	overflow: hidden;
	background: #f8fafc;
}

.hr-container {
	width: min(var(--hr-container, 1200px), calc(100% - (var(--hr-gutter, 20px) * 2)));
	margin: 0 auto;
}

/* SECTION HEADERS */
.hr-section-header {
	max-width: 700px;
	margin: 0 auto 48px;
}
.hr-section-header.is-center {
	text-align: center;
}
.hr-section-header h2 {
	margin: 12px 0 0;
	color: var(--hr-ink);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.04em;
}
.hr-section-header p {
	margin: 14px 0 0;
	color: var(--hr-muted);
	font-size: clamp(15px, 1.8vw, 17px);
	line-height: 1.6;
}
.hr-section-header.with-action {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: none;
	margin-bottom: 40px;
}
.hr-section-header.with-action .hr-badge {
	margin-bottom: 8px;
}
.hr-section-header.with-action h2 {
	margin: 8px 0 0;
}

/* BADGES & TAGS */
.hr-badge {
	display: inline-flex;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--hr-blue-light);
	color: var(--hr-blue);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* HERO SECTION */
.hr-cover {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	isolation: isolate;
	padding: 110px 0 120px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--hr-hero-from) 0%, var(--hr-hero-to) 100%); /* token-hoá: hero-from dark base + hero-to accent (palette-overridable) */
}

.hr-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(circle at 10% 90%, rgba(var(--hr-blue-rgb), 0.15) 0%, transparent 50%), /* token-hoá: glow accent hero (palette-overridable) */
		radial-gradient(circle at 90% 10%, rgba(var(--hr-orange-rgb), 0.1) 0%, transparent 40%); /* Logo orange accent */
}

.hr-cover::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background:
		linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.02) 52%, transparent 52%),
		linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.02) 52%, transparent 52%);
	background-size: 60px 60px;
	z-index: -1;
	pointer-events: none;
}

.hr-cover-layout {
	width: min(920px, calc(100% - 40px));
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

.hr-eyebrow {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.hr-cover h1 {
	margin: 24px auto 0;
	color: #ffffff !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: clamp(34px, 5.5vw, 64px);
	font-weight: 900; /* Bolder hero heading */
	line-height: 1.1;
	letter-spacing: -0.02em; /* Slightly looser tracking for bold text */
	text-shadow: 0 2px 10px rgba(15, 23, 42, 0.15);
}

.hr-cover h1 .highlight-orange {
	color: var(--hr-orange) !important;
}

.hr-cover h1 .highlight-blue {
	color: var(--hr-hero-highlight) !important; /* token-hoá: highlight tiêu đề hero (palette-overridable) */
}

.hr-cover p {
	max-width: 680px;
	margin: 20px auto 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
}

/* HERO SEARCH */
.hr-hero-search {
	display: flex;
	max-width: 640px;
	margin: 36px auto 0;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
	backdrop-filter: blur(8px);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.hr-hero-search:focus-within {
	border-color: #ffffff;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.hr-hero-search input {
	flex: 1;
	height: 52px;
	padding: 0 24px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--hr-ink);
	font-size: 16px;
	font-weight: 500;
}

.hr-hero-search input::placeholder {
	color: #94a3b8;
}

.hr-hero-search button {
	height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: 999px;
	background: var(--hr-blue);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 4px 15px rgba(var(--hr-blue-rgb), 0.3);
}

.hr-hero-search button:hover {
	background: var(--hr-blue-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(var(--hr-blue-rgb), 0.4);
}

/* QUICK SEARCH TAGS */
.hr-hero-tags {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.hr-tag-lbl {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	font-weight: 500;
}
.hr-hero-tags a {
	display: inline-flex;
	padding: 6px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}
.hr-hero-tags a:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--hr-blue);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* HERO PROOF */
.hr-cover-proof {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 48px;
}

.hr-cover-proof span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.95);
	font-size: 13.5px;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

.hr-proof-icon {
	width: 16px;
	height: 16px;
	color: var(--hr-mint);
}

/* SEGMENTS */
.hr-segments {
	padding: 40px 0 64px;
}

.hr-segment-grid {
	display: grid;
	grid-template-columns: repeat(var(--hr-grid-cols-wide, 4), minmax(0, 1fr));
	gap: var(--hr-gap, 20px);
}

.hr-segment-card {
	padding: 0;
	border: var(--hr-card-border, 1px solid var(--hr-line));
	border-radius: var(--hr-card-radius, var(--hr-radius));
	background: var(--hr-card-bg, var(--hr-card));
	box-shadow: var(--hr-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.03));
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.hr-segment-card-inner {
	padding: var(--hr-card-pad, 36px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	box-sizing: border-box;
}

.hr-segment-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #f8fafc;
	margin-bottom: 24px;
	transition: all 0.3s ease;
	border: 1px dashed var(--hr-line);
}

.hr-segment-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ffffff;
	color: #64748b;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}

.hr-segment-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: transparent;
	transition: background 0.3s;
}

.hr-segment-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(16, 32, 51, 0.08);
	border-color: rgba(var(--hr-blue-rgb), 0.15);
}

.hr-segment-card:hover::before {
	background: var(--hr-blue);
}

.hr-segment-card:nth-child(2):hover::before { background: var(--hr-orange); }
.hr-segment-card:nth-child(3):hover::before { background: var(--hr-mint); }
.hr-segment-card:nth-child(4):hover::before { background: var(--hr-sky); }

.hr-segment-card:hover .hr-segment-icon-wrap {
	border-color: transparent;
	background: var(--hr-blue-light);
	transform: rotate(360deg);
}
.hr-segment-card:nth-child(2):hover .hr-segment-icon-wrap { background: var(--hr-orange-light); }
.hr-segment-card:nth-child(3):hover .hr-segment-icon-wrap { background: var(--hr-mint-light); }
.hr-segment-card:nth-child(4):hover .hr-segment-icon-wrap { background: var(--hr-blue-light); } /* token-hoá: tint sky card-4 (palette-overridable) */

.hr-segment-card:hover .hr-segment-icon {
	background: #ffffff;
	color: var(--hr-blue);
	transform: scale(1.05);
}

.hr-segment-card:nth-child(2):hover .hr-segment-icon { color: var(--hr-orange); }
.hr-segment-card:nth-child(3):hover .hr-segment-icon { color: var(--hr-mint); }
.hr-segment-card:nth-child(4):hover .hr-segment-icon { color: var(--hr-sky); }

.hr-segment-link {
	margin-top: auto;
	padding-top: 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hr-muted);
	transition: all 0.2s ease;
}

.hr-segment-card:hover .hr-segment-link {
	color: var(--hr-blue);
}
.hr-segment-card:nth-child(2):hover .hr-segment-link { color: var(--hr-orange); }
.hr-segment-card:nth-child(3):hover .hr-segment-link { color: var(--hr-mint); }
.hr-segment-card:nth-child(4):hover .hr-segment-link { color: var(--hr-sky); }

.hr-segment-icon svg {
	width: 24px;
	height: 24px;
}

.hr-segment-card h3 {
	margin: 0 0 10px;
	color: var(--hr-ink);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.hr-segment-card p {
	margin: 0;
	color: var(--hr-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* COMPARISON STACKED LIST */
.hr-featured {
	padding: 80px 0;
	background: #ffffff;
	border-top: 1px solid var(--hr-line);
	border-bottom: 1px solid var(--hr-line);
}

.hr-comparison-table {
	display: flex;
	flex-direction: column;
	gap: var(--hr-gap, 20px);
	margin-top: 32px;
}

.hr-comparison-row {
	display: grid;
	grid-template-columns: minmax(280px, 1.2fr) minmax(220px, 1fr) minmax(200px, 1fr) minmax(210px, 0.9fr);
	gap: 24px;
	align-items: center;
	padding: var(--hr-card-pad, 30px);
	border: var(--hr-card-border, 1px solid var(--hr-line));
	border-radius: var(--hr-card-radius, var(--hr-radius-lg));
	background: var(--hr-card-bg, var(--hr-card));
	box-shadow: var(--hr-card-shadow, var(--hr-shadow));
	position: relative;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hr-comparison-row:hover {
	border-color: rgba(var(--hr-blue-rgb), 0.3); /* token-hoá: viền hover (palette-overridable) */
	box-shadow: var(--hr-shadow-lg);
}

.hr-comparison-row.is-featured-row {
	border-color: rgba(var(--hr-orange-rgb), 0.35);
	background: linear-gradient(180deg, #ffffff 0%, var(--hr-orange-light) 100%);
	box-shadow: 0 15px 35px -10px rgba(var(--hr-orange-rgb), 0.08), var(--hr-shadow);
}

.hr-row-badge {
	position: absolute;
	top: -12px;
	left: 30px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--hr-orange);
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
}

/* Row Brand Column */
.hr-col-brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hr-brand-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hr-soft);
	border: 1.5px solid var(--hr-line);
	color: var(--hr-ink);
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
}

.is-featured-row .hr-brand-rank {
	background: var(--hr-orange);
	border-color: var(--hr-orange);
	color: #ffffff;
}

.hr-brand-logo-wrap {
	flex-shrink: 0;
}

.hr-brand-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--hr-line);
	border-radius: var(--hr-radius);
	background: #ffffff;
	overflow: hidden;
	text-decoration: none;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.hr-brand-logo img {
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.hr-brand-logo strong {
	color: var(--hr-blue);
	font-size: 28px;
	font-weight: 800;
}

.hr-brand-meta h3 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
}

.hr-brand-meta h3 a {
	color: var(--hr-ink);
	text-decoration: none;
}

.hr-brand-meta h3 a:hover {
	color: var(--hr-blue);
}

.hr-brand-badge {
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	color: var(--hr-muted);
}

.is-featured-row .hr-brand-badge {
	color: var(--hr-orange);
	font-weight: 700;
}

/* Row Specific Metrics Column */
.hr-col-metrics {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hr-metric-item {
	display: grid;
	grid-template-columns: 55px 1fr 24px;
	gap: 10px;
	align-items: center;
}

.hr-metric-lbl {
	font-size: 12px;
	font-weight: 700;
	color: var(--hr-muted);
}

.hr-metric-bar {
	height: 6px;
	background: var(--hr-soft);
	border-radius: 999px;
	overflow: hidden;
}

.hr-metric-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--hr-blue);
}

.is-featured-row .hr-metric-fill {
	background: var(--hr-orange);
}

.hr-metric-val {
	font-size: 12px;
	font-weight: 800;
	color: var(--hr-ink);
	text-align: right;
}

/* Row Features Bullet Column */
.hr-col-features ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hr-col-features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--hr-text);
	font-size: 13px;
	line-height: 1.4;
}

.hr-bullet-icon {
	width: 14px;
	height: 14px;
	color: var(--hr-mint);
	flex-shrink: 0;
	margin-top: 2px;
}

/* Row Score Circle & CTA Column */
.hr-col-score-cta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
}

.hr-score-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--hr-blue-light);
	color: var(--hr-blue);
	flex-shrink: 0;
}

.is-featured-row .hr-score-circle {
	background: var(--hr-orange-light);
	color: var(--hr-orange);
}

.hr-score-num {
	font-size: 20px;
	font-weight: 850;
	line-height: 1;
}

.hr-score-lbl {
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	margin-top: 2px;
	letter-spacing: 0.05em;
}

.hr-cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 124px;
}

.hr-btn-primary, .hr-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s;
}

.hr-btn-primary {
	background: var(--hr-blue);
	color: #ffffff;
}

.hr-btn-primary:hover {
	background: var(--hr-blue-hover);
}

.is-featured-row .hr-btn-primary {
	background: var(--hr-orange);
}

.is-featured-row .hr-btn-primary:hover {
	background: var(--hr-search-btn-hover); /* token-hoá: hover nút featured (palette-overridable) */
}

.hr-btn-secondary {
	background: var(--hr-soft);
	border: 1px solid var(--hr-line);
	color: var(--hr-ink);
}

.hr-btn-secondary:hover {
	background: #ffffff;
	border-color: var(--hr-blue);
	color: var(--hr-blue);
}

.hr-btn-icon {
	width: 12px;
	height: 12px;
}

/* EMPTY STATE */
.hr-empty {
	padding: 64px;
	text-align: center;
	background: #ffffff;
	border: 2px dashed var(--hr-line);
	border-radius: var(--hr-radius-lg);
}

.hr-empty h3 {
	margin: 0 0 8px;
	color: var(--hr-ink);
}

.hr-empty p {
	margin: 0;
	color: var(--hr-muted);
}

/* BUYING GUIDE SECTION (Khung quyết định) */
.hr-guide {
	padding: 80px 0;
	background: var(--hr-soft);
	border-bottom: 1px solid var(--hr-line);
}

.hr-guide-layout-new {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 64px;
	align-items: flex-start;
}

.hr-guide-intro {
	position: sticky;
	top: 100px;
}

.hr-guide-intro h2 {
	margin: 16px 0 0;
	color: var(--hr-ink);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.04em;
}

.hr-guide-intro p {
	margin: 20px 0 0;
	color: var(--hr-muted);
	font-size: 16px;
	line-height: 1.6;
}

.hr-guide-summary-card {
	margin-top: 32px;
	padding: 24px;
	background: #ffffff;
	border-left: 4px solid var(--hr-blue);
	border-radius: 0 var(--hr-radius) var(--hr-radius) 0;
	box-shadow: var(--hr-shadow);
}

.hr-guide-summary-card h4 {
	margin: 0 0 6px;
	color: var(--hr-ink);
	font-weight: 800;
}

.hr-guide-summary-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.hr-guide-grid-new {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.hr-guide-step-card {
	padding: 32px 30px;
	background: #ffffff;
	border-radius: var(--hr-radius);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	border: 1px solid var(--hr-line);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.hr-guide-step-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: transparent;
	transition: background 0.3s;
}

.hr-guide-step-card:hover {
	border-color: rgba(var(--hr-blue-rgb), 0.15);
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(var(--hr-blue-rgb), 0.1);
}

.hr-guide-step-card:hover::after {
	background: var(--hr-blue);
}
.hr-guide-step-card:nth-child(2):hover::after { background: var(--hr-orange); }
.hr-guide-step-card:nth-child(3):hover::after { background: var(--hr-mint); }
.hr-guide-step-card:nth-child(4):hover::after { background: var(--hr-sky); }

.hr-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 20px;
	font-weight: 900;
	background: var(--hr-blue-light);
	color: var(--hr-blue);
	border-radius: 12px;
	margin-bottom: 20px;
	transition: all 0.3s;
}

.hr-guide-step-card:hover .hr-step-num {
	transform: scale(1.1) rotate(-5deg);
}

.hr-guide-step-card:nth-child(2) .hr-step-num { background: var(--hr-orange-light); color: var(--hr-orange); }
.hr-guide-step-card:nth-child(3) .hr-step-num { background: var(--hr-mint-light); color: var(--hr-mint); }
.hr-guide-step-card:nth-child(4) .hr-step-num { background: var(--hr-blue-light); color: var(--hr-sky); } /* token-hoá: tint sky step-4 (palette-overridable) */

.hr-guide-step-card h3 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 800;
	color: var(--hr-ink);
}

.hr-guide-step-card p {
	margin: 0;
	color: var(--hr-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

/* ARTICLES / LATEST BLOGS SECTION */
.hr-reading {
	padding: 80px 0 100px;
	background: #ffffff; /* Explicitly ensure a clean white background */
}

.hr-link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--hr-blue);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1.5px solid transparent;
	transition: all 0.2s;
}

.hr-link-more:hover {
	border-color: var(--hr-blue);
	gap: 10px;
}

.hr-reading-grid-new {
	display: grid;
	grid-template-columns: repeat(var(--hr-reading-cols, 3), minmax(0, 1fr));
	gap: var(--hr-gap, 28px);
}

.hr-blog-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--hr-card-radius, 16px);
	background: var(--hr-card-bg, #ffffff);
	border: var(--hr-card-border, 1px solid var(--hr-line));
	overflow: hidden;
	box-shadow: var(--hr-card-shadow, 0 4px 20px rgba(0, 0, 0, 0.02));
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.hr-blog-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 38px rgba(var(--hr-blue-rgb), 0.08);
	border-color: rgba(var(--hr-blue-rgb), 0.2);
}

.hr-blog-thumbnail {
	height: 230px;
	overflow: hidden;
	position: relative;
	background: var(--hr-soft);
}

.hr-blog-thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
}

.hr-blog-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hr-blog-card:hover .hr-blog-thumbnail img {
	transform: scale(1.06);
}

.hr-blog-category {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: var(--hr-ink);
	font-size: 11px;
	font-weight: 850;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	letter-spacing: 0.04em;
	transition: all 0.3s;
	z-index: 2;
}

.hr-blog-card:hover .hr-blog-category {
	background: var(--hr-blue);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(var(--hr-blue-rgb), 0.25);
}

.hr-blog-content {
	padding: var(--hr-card-pad, 28px);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hr-blog-meta-top {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
}

.hr-blog-date, .hr-blog-readtime {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 650;
	color: var(--hr-muted);
}

.hr-meta-icon {
	width: 14px;
	height: 14px;
	color: var(--hr-muted);
	opacity: 0.8;
}

.hr-blog-content h3 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
}

.hr-blog-content h3 a {
	color: var(--hr-ink);
	text-decoration: none;
	transition: color 0.2s;
}

.hr-blog-content h3 a:hover {
	color: var(--hr-blue);
}

.hr-blog-content p {
	margin: 0 0 24px;
	color: var(--hr-text);
	font-size: 14px;
	line-height: 1.55;
}

.hr-blog-footer {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed var(--hr-line);
}

.hr-blog-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: var(--hr-blue);
	font-size: 14px;
	font-weight: 750;
	text-decoration: none;
	transition: all 0.3s;
}

.hr-blog-more-btn span {
	position: relative;
}

.hr-blog-more-btn span::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: var(--hr-blue);
	transition: width 0.3s;
}

.hr-arrow-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hr-blog-card:hover .hr-blog-more-btn {
	color: var(--hr-blue);
}

.hr-blog-card:hover .hr-blog-more-btn span::after {
	width: 100%;
}

.hr-blog-card:hover .hr-arrow-icon {
	transform: translateX(6px);
}

/* ==========================================================================
   TAXONOMY STORES (Modern 2-Column Layout Redesign)
   ========================================================================== */

/* Main Layout Grid */
.hr-store-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--hr-sidebar-w, 340px);
	gap: var(--hr-gap, 32px);
	align-items: start;
	width: 100%;
	max-width: var(--hr-container, 1200px);
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
	overflow: clip;
}

/* -----------------------------------------
   SIDEBAR REDESIGN (Stores)
   ----------------------------------------- */
.hr-store-sidebar-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hr-store-sidebar-card,
.store-help-sidebar-box,
.store-sidebar-group {
	background: #ffffff !important;
	border: 1px solid var(--hr-line) !important;
	border-radius: var(--hr-radius) !important;
	padding: 24px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
	margin-bottom: 24px !important;
}

.hr-store-sidebar-card .store-image1 {
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hr-line);
}

.hr-store-sidebar-card h2,
.hr-store-sidebar-card .sidebox-heading h3,
.store-help-sidebar-box h2,
.store-help-sidebar-box h3,
.store-sidebar-group h2,
.store-sidebar-group h3,
.store-sidebar-group .store-summary-title {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--hr-ink) !important;
	margin: 0 0 16px !important;
	background: transparent !important;
	padding: 0 !important;
	border: none !important;
}

.hr-store-sidebar-card p,
.hr-store-sidebar-card li,
.hr-store-sidebar-card strong,
.store-help-sidebar-box p,
.store-help-sidebar-box li,
.store-help-sidebar-box strong,
.store-sidebar-group p,
.store-sidebar-group li,
.store-sidebar-group strong {
	font-size: 15px !important; /* Cố định 15px vì 16px sẽ quá to so với bố cục sidebar nh� hẹp, gây tràn chữ mất cân đối */
	color: var(--hr-text) !important;
	line-height: 1.6 !important;
}

.store-sidebar-group ul,
.store-help-sidebar-box ul {
	margin: 0 0 0 20px !important;
	padding: 0 !important;
	list-style-type: disc !important;
}

.store-sidebar-group li,
.store-help-sidebar-box li {
	margin-bottom: 8px !important;
}

/* -----------------------------------------
   COUPON CARD HORIZONTAL (New Layout)
   ----------------------------------------- */
.hr-coupon-card {
	display: flex;
	flex-direction: column;
	background: var(--hr-card-bg, #ffffff);
	border: var(--hr-card-border, 1px solid var(--hr-line));
	border-radius: var(--hr-card-radius, var(--hr-radius));
	margin-bottom: var(--hr-gap, 24px);
	box-shadow: var(--hr-card-shadow, 0 4px 15px rgba(0, 0, 0, 0.02));
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.hr-coupon-card-inner {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

.hr-cc-content {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--hr-card-pad, 24px);
	display: flex;
	flex-direction: column;
}

.hr-cc-top-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.hr-cc-middle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

.hr-cc-text {
	flex: 1;
}

.hr-cc-actions {
	width: 150px; /* Thu hẹp chi�u rộng nút để khớp hoàn hảo với chi�u rộng vote box ở trên */
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: stretch;
	justify-content: center;
}

.hr-cc-bottom-meta {
	display: flex;
	align-items: center;
	justify-content: space-between; /* �ưa danh mục sang trái và �i�u kiện & Chi tiết sang phải trên cùng một dòng */
	gap: 20px;
	font-size: 13px;
	color: var(--hr-muted);
	padding-top: 20px;
	border-top: 1px solid var(--hr-soft);
	margin-top: auto;
	width: 100%;
}

.hr-cc-toggle-wrap {
	margin-top: 0; /* Cho nằm sát dòng kẻ và thẳng hàng ngang */
}

.hr-cc-offer {
	width: 160px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	border-right: 2px dashed var(--hr-line);
	background: var(--hr-soft);
	text-align: center;
}

/* Màu n�n nổi bật cho khối coupon & deals LIVE (Tránh màu xám hết hạn) */
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer {
	background: linear-gradient(180deg, var(--hr-offer-grad-from) 0%, var(--hr-offer-grad-to) 100%) !important; /* token-hoá: palette overridable */
	border-right: 2px dashed rgba(239, 68, 68, 0.25) !important;
}

.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer .hr-cc-value {
	color: var(--hr-offer-value) !important; /* token-hoá: palette overridable */
}

/* Phân biệt màu cam cho các DEAL/PROMOTION đang live */
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.deal),
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.promotion),
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.DEAL),
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.PROMOTION) {
	background: linear-gradient(180deg, var(--hr-offer-grad-from) 0%, var(--hr-offer-grad-to) 100%) !important;
	border-right: 2px dashed rgba(249, 115, 22, 0.25) !important;
}

.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.deal) .hr-cc-value,
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.promotion) .hr-cc-value,
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.DEAL) .hr-cc-value,
.hr-coupon-card:not(.hr-coupon-card-expired) .hr-cc-offer:has(.PROMOTION) .hr-cc-value {
	color: var(--hr-offer-value) !important; /* token-hoá: palette overridable */
}

.hr-coupon-card:hover {
	border-color: rgba(var(--hr-blue-rgb), 0.2);
	box-shadow: 0 10px 25px rgba(var(--hr-blue-rgb), 0.08);
	transform: translateY(-2px);
}

.hr-cc-value {
	font-size: 24px;
	font-weight: 900;
	color: var(--hr-ink);
	line-height: 1.1;
	margin-bottom: 8px;
}

.hr-cc-type {
	display: inline-flex;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hr-cc-type.coupon { background: var(--hr-blue-light); color: var(--hr-blue); border: 1px dashed rgba(var(--hr-blue-rgb), 0.3); }
.hr-cc-type.deal { background: var(--hr-orange-light); color: var(--hr-orange); border: 1px dashed rgba(var(--hr-orange-rgb), 0.3); }

.hr-cc-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
	color: var(--hr-ink);
	line-height: 1.3;
}

.hr-cc-desc {
	margin: 0 0 12px;
	font-size: 15px; /* Cố định 15px là tỷ lệ vàng cực kỳ hoàn hảo cho đoạn mô tả ngắn của card, 16px sẽ lấn át tiêu đ� chính 18px */
	color: var(--hr-muted);
	line-height: 1.5;
}

/* Reset the exact button class output by clpr_coupon_code_box() */
.hr-cc-actions a.coupon-code-link,
.hr-cc-actions div.coupon-code-link,
.hr-cc-actions a.coupon-code-link.promotion,
.hr-cc-actions div.coupon-code-link.promotion,
.hr-global-typography .couponAndTip .coupon-code-link,
.hr-global-typography .couponAndTip .promotion {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 48px !important;
	border-radius: 12px !important;
	background: var(--hr-blue) !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: all 0.2s !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(var(--hr-blue-rgb), 0.2) !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

.hr-cc-actions a.coupon-code-link:hover,
.hr-cc-actions div.coupon-code-link:hover,
.hr-cc-actions a.coupon-code-link.promotion:hover,
.hr-cc-actions div.coupon-code-link.promotion:hover,
.hr-global-typography .couponAndTip .coupon-code-link:hover,
.hr-global-typography .couponAndTip .promotion:hover {
	background: var(--hr-blue-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(var(--hr-blue-rgb), 0.35) !important;
	text-decoration: none !important;
	color: #ffffff !important;
}

.hr-cc-actions a.coupon-code-link span,
.hr-cc-actions div.coupon-code-link span,
.hr-cc-actions a.coupon-code-link.promotion span,
.hr-cc-actions div.coupon-code-link.promotion span,
.hr-global-typography .couponAndTip .coupon-code-link span,
.hr-global-typography .couponAndTip .promotion span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
	font-weight: inherit !important;
	font-family: inherit !important;
}

.hr-global-typography .couponAndTip .coupon-code-link i,
.hr-global-typography .couponAndTip .promotion i {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
	font-style: normal !important;
}
.hr-global-typography .couponAndTip .coupon-code-link i::before,
.hr-global-typography .couponAndTip .promotion i::before {
	content: "\1F512" !important;
}
.hr-cc-vote-inline .stripe-badge::before,
.hr-cc-vote-inline .thumbsup::before,
.hr-cc-vote-inline .thumbsdown::before,
.coupon-card-icon,
.store-summary-title > span {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}
/* VOTE SYSTEM RESETS */
.hr-cc-vote-inline {
	display: flex !important;
	align-items: center !important;
	margin-left: auto;
	background: #fff5f5 !important;
	padding: 0 12px !important;
	border-radius: 999px !important;
	border: 1px solid #fee2e2 !important;
	height: 32px !important;
	box-sizing: border-box !important;
}

.hr-cc-vote-inline .thumbsup-vote {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	width: auto !important;
	height: auto !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.hr-cc-vote-inline .stripe-badge {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 800;
	color: #e11d48;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.hr-cc-vote-inline .stripe-badge .success,
.hr-cc-vote-inline .stripe-badge .thumbsup-stripe-badge {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.hr-cc-vote-inline .stripe-badge .success { display: none !important; }

.hr-cc-vote-inline .stripe-badge::before {
	content: "\1F525";
	font-size: 13px;
	display: block;
}

.hr-cc-vote-inline .percent {
	color: #e11d48 !important;
	line-height: 1.4 !important; /* Adjusted line height to fix vertical alignment */
	display: block !important;
	font-weight: 800 !important;
}

.hr-cc-vote-inline .frame {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	border: none !important;
	border-left: 1px solid #fecdd3 !important;
	padding: 0 0 0 12px !important;
	margin: 0 !important;
	height: 14px !important;
	width: auto !important;
	background: transparent !important;
	box-shadow: none !important;
}

.hr-cc-vote-inline .frame > div[id^="ajax-"] {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hr-cc-vote-inline .loading { display: none !important; }

.hr-cc-vote-inline .vote {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	width: auto !important;
}

/* Kill original sprite background */
.hr-cc-vote-inline .thumbsup,
.hr-cc-vote-inline .thumbsdown {
	background: none !important;
	width: auto !important;
	height: auto !important;
	font-size: 14px !important;
	cursor: pointer !important;
	filter: grayscale(1) !important;
	transition: filter 0.2s, transform 0.2s !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.hr-cc-vote-inline .thumbsup:hover { filter: grayscale(0); transform: scale(1.1) translateY(-1px); }
.hr-cc-vote-inline .thumbsup::before { content: "\1F44D"; display: block; }

.hr-cc-vote-inline .thumbsdown:hover { filter: grayscale(0); transform: scale(1.1) translateY(1px); }
.hr-cc-vote-inline .thumbsdown::before { content: "\1F44E"; display: block; }

/* Hide redundant text returned by ajax */
.hr-cc-vote-inline .text { display: none !important; }

.hr-meta-pill {
	display: inline-flex;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

.hr-meta-verified { background: var(--hr-mint-light); color: var(--hr-mint); }
.hr-meta-type { background: var(--hr-orange-light); color: var(--hr-sun); }

.hr-cc-details-toggle {
	background: none;
	border: none;
	color: var(--hr-muted);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 0; /* B� padding dư thừa để nằm g�n gàng góc phải */
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s;
	margin-top: 0; /* B� margin-top để căn chỉnh hoàn hảo trên cùng 1 hàng */
}

.hr-cc-details-toggle:hover {
	color: var(--hr-ink);
	text-decoration: underline;
}

.hr-cc-hidden-details {
	padding: 24px;
	background: var(--hr-soft);
	border-top: 1px solid var(--hr-line);
	font-size: 14px;
	color: var(--hr-text);
	display: none; /* Hidden by default */
}

/* Redesign the layout of the hidden details */
.hr-cc-hidden-details .coupon-card-details {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.hr-cc-hidden-details .coupon-card-details-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	flex: 1;
}

.hr-cc-hidden-details .coupon-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--hr-line);
	font-size: 14px;
	flex-shrink: 0;
}

.hr-cc-hidden-details .coupon-card-details-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hr-cc-hidden-details .coupon-card-details-copy strong {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hr-muted);
	font-weight: 800;
}

.hr-cc-hidden-details .coupon-card-details-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	flex: 1;
}

.hr-cc-hidden-details .coupon-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--hr-line);
	font-size: 14px;
	flex-shrink: 0;
}

.hr-cc-hidden-details .coupon-card-details-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hr-cc-hidden-details .coupon-card-details-copy strong {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hr-muted);
	font-weight: 800;
}

@media (max-width: 768px) {
	.hr-coupon-card-inner {
		flex-direction: column;
	}
	.hr-cc-offer {
		width: 100%;
		border-right: none;
		border-bottom: 2px dashed var(--hr-line);
		padding: 20px;
		flex-direction: row;
		justify-content: space-between;
	}
	.hr-cc-value { margin: 0; }
	
	.hr-cc-middle {
		flex-direction: column;
		align-items: stretch;
	}
	
	.hr-cc-actions {
		width: 100%;
	}
	
	.hr-cc-bottom-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 992px) {
	.hr-store-layout {
		grid-template-columns: 1fr;
	}
}

/* Premium Store Header */
.store-header-banner {
	background: linear-gradient(135deg, var(--hr-banner-from) 0%, var(--hr-banner-to) 100%) !important; /* token-hoá: store banner (palette-overridable) */
	border-bottom: none !important;
	padding: 80px 20px 60px !important;
	text-align: center;
	margin-bottom: 40px !important;
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

.hr-global-typography .store-header-banner h1.store-archive-heading {
	font-size: clamp(32px, 5vw, 48px) !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	line-height: 1.2 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hr-global-typography .store-header-banner p {
	font-size: 17px !important;
	color: rgba(255, 255, 255, 0.9) !important;
	line-height: 1.6 !important;
	max-width: 840px !important;
	margin: 0 auto !important;
}

/* Override Old Clipper Constraints */
.hr-global-typography #content.hr-store-main-col {
	float: none;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: none;
}

.hr-global-typography #sidebar.hr-store-sidebar-col {
	float: none;
	width: 100%;
	margin: 0;
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
}

.hr-global-typography .store-archive-heading {
	background: transparent;
	box-shadow: none;
	border: none;
	padding: 0 0 24px;
	margin: 0;
	font-size: clamp(32px, 4vw, 42px);
	font-weight: 800;
	color: var(--hr-ink);
	line-height: 1.2;
	letter-spacing: -0.03em;
}

/* Related Stores Modern Section Styles */
.store-related-section-container {
	margin-top: 50px;
	padding: 40px 30px;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
	border: 1px solid var(--hr-soft);
}

.store-related-section-header {
	margin-bottom: 30px;
	border-bottom: 1px solid var(--hr-soft);
	padding-bottom: 20px;
}

.store-related-section-title {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	color: var(--hr-ink) !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.02em !important;
}

.store-related-section-desc {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 14px !important;
	color: var(--hr-text) !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.store-related-cards-grid {
	display: grid;
	grid-template-columns: repeat(var(--hr-related-cols, 3), minmax(0, 1fr));
	gap: var(--hr-gap, 24px);
	margin: 0;
	padding: 0;
}

@media (max-width: 992px) {
	.store-related-cards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 576px) {
	.store-related-cards-grid {
		grid-template-columns: 1fr;
	}
}

.store-related-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--hr-soft);
	border-radius: 16px;
	padding: 24px;
	transition: all 0.3s ease;
	position: relative;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.store-related-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	border-color: var(--hr-blue-light);
}

.store-related-card-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	margin-bottom: 16px;
	background: var(--hr-bg);
	border-radius: 12px;
	padding: 10px;
	overflow: hidden;
}

.store-related-card-img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.store-related-card:hover .store-related-card-img {
	transform: scale(1.05);
}

.store-related-card-info {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.store-related-card-name {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.store-related-card-name a {
	color: var(--hr-ink) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.store-related-card-name a:hover {
	color: var(--hr-blue) !important;
}

.store-related-card-deal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 auto !important;
	font-size: 13px !important;
	color: var(--hr-ink) !important;
	background: var(--hr-orange-light);
	padding: 6px 16px;
	border-radius: 12px;
	width: fit-content;
	border: 1px solid var(--hr-orange-light);
	font-family: 'Inter', system-ui, sans-serif !important;
}

.store-related-card-deal-icon {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
	font-size: 14px;
	flex-shrink: 0;
}

.store-related-card-deal-text {
	font-weight: 800;
	color: var(--hr-orange);
}

.store-related-card-logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.store-related-card-info {
	text-align: center;
}

.store-related-card-action {
	margin-top: auto;
	width: 100%;
}

.store-related-coupon-tip {
	position: relative;
	width: 100%;
}

.store-related-coupon-tip .link-holder {
	width: 100%;
}

/* Force override global .couponAndTip nested button and icon rules inside store-related cards */
.store-related-card .couponAndTip .coupon-code-link,
.store-related-card .couponAndTip .promotion,
.store-related-card a.store-related-action-btn,
.store-related-card div.store-related-action-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 44px !important;
	border-radius: 12px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	cursor: pointer;
	box-shadow: none !important;
	transform: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

.store-related-card .couponAndTip .coupon-code-link:hover,
.store-related-card .couponAndTip .promotion:hover,
.store-related-card a.store-related-action-btn:hover {
	transform: translateY(-2px) !important;
}

.store-related-card .couponAndTip .coupon-code-link span,
.store-related-card .couponAndTip .promotion span {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
	text-transform: inherit !important;
}

.store-related-card .couponAndTip .coupon-code-link.promotion,
.store-related-card .couponAndTip .promotion,
.store-related-card a.store-related-action-btn.promotion {
	background: var(--hr-blue) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(var(--hr-blue-rgb), 0.2) !important;
}

.store-related-card .couponAndTip .coupon-code-link.promotion:hover,
.store-related-card .couponAndTip .promotion:hover,
.store-related-card a.store-related-action-btn.promotion:hover {
	background: var(--hr-blue-hover) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(var(--hr-blue-rgb), 0.35) !important;
}

.store-related-card .couponAndTip .coupon-code-link.coupon-code,
.store-related-card a.store-related-action-btn.coupon-code {
	background: var(--hr-blue) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(var(--hr-blue-rgb), 0.2) !important;
}

.store-related-card .couponAndTip .coupon-code-link.coupon-code:hover,
.store-related-card a.store-related-action-btn.coupon-code:hover {
	background: var(--hr-blue-hover) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(var(--hr-blue-rgb), 0.35) !important;
}

.store-related-card .couponAndTip .coupon-code-link.coupon-hidden,
.store-related-card a.store-related-action-btn.coupon-hidden {
	background: var(--hr-blue) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(var(--hr-blue-rgb), 0.2) !important;
}

.store-related-card .couponAndTip .coupon-code-link.coupon-hidden:hover,
.store-related-card a.store-related-action-btn.coupon-hidden:hover {
	background: var(--hr-blue-hover) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(var(--hr-blue-rgb), 0.35) !important;
}

.store-related-card .couponAndTip .coupon-code-link i,
.store-related-card .couponAndTip .promotion i {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
	font-style: normal !important;
	margin-right: 6px !important;
}

.store-related-card .couponAndTip .coupon-code-link i::before,
.store-related-card .couponAndTip .promotion i::before {
	content: "\1F512" !important;
}

.store-related-action-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 44px !important;
	border-radius: 12px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	cursor: pointer;
	box-sizing: border-box !important;
}

.store-related-action-btn.promotion {
	background: var(--hr-blue-light) !important;
	color: var(--hr-blue) !important;
	border: 1px solid var(--hr-blue-light) !important;
}

.store-related-action-btn.promotion:hover {
	background: var(--hr-blue) !important;
	color: #ffffff !important;
	border-color: var(--hr-blue) !important;
}

.store-related-action-btn.coupon-code {
	background: var(--hr-orange-light) !important;
	color: var(--hr-orange) !important;
	border: 1px dashed var(--hr-orange) !important;
}

.store-related-action-btn.coupon-code:hover {
	background: var(--hr-orange) !important;
	color: #ffffff !important;
	border-style: solid !important;
}

.store-related-action-btn.coupon-hidden {
	background: var(--hr-mint-light) !important;
	color: var(--hr-mint) !important;
	border: 1px solid var(--hr-mint-light) !important;
}

.store-related-action-btn.coupon-hidden:hover {
	background: var(--hr-mint) !important;
	color: #ffffff !important;
	border-color: var(--hr-mint) !important;
}

.store-related-action-btn i {
	margin-right: 6px;
}

@media (max-width: 768px) {
	.store-related-section-container {
		padding: 24px 20px;
	}
	.store-related-cards-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* RESPONSIVE DESIGN */
@media (max-width: 1120px) {
	.hr-comparison-row {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	.hr-col-score-cta {
		justify-content: flex-start;
	}
}

@media (max-width: 1024px) {
	.hr-segment-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hr-guide-layout-new {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.hr-guide-intro {
		position: static;
	}
	.hr-reading-grid-new {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.hr-cover {
		padding: 70px 0 80px;
	}
	.hr-cover-proof {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.hr-section-header.with-action {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.hr-comparison-row {
		grid-template-columns: 1fr;
		padding: 24px;
	}
	.hr-col-score-cta {
		flex-direction: row-reverse;
		justify-content: space-between;
		border-top: 1px solid var(--hr-line);
		padding-top: 20px;
	}
	.hr-cta-buttons {
		width: 100%;
		flex-direction: row;
	}
	.hr-btn-primary, .hr-btn-secondary {
		flex: 1;
	}
	.hr-guide-grid-new {
		grid-template-columns: 1fr;
	}
	.hr-reading-grid-new {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.hr-hero-search {
		border-radius: 24px;
		flex-direction: column;
		padding: 12px;
		gap: 10px;
	}
	.hr-hero-search input {
		height: 44px;
		padding: 0 12px;
		text-align: center;
	}
	.hr-hero-search button {
		width: 100%;
		height: 48px;
		border-radius: 16px;
	}
	.hr-col-brand {
		flex-direction: column;
		align-items: flex-start;
	}
	.hr-col-score-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

@media (min-width: 1121px) {
	.hr-comparison-row {
		grid-template-columns: minmax(230px, 1fr) minmax(210px, 0.9fr) minmax(320px, 1.4fr) minmax(220px, 1fr);
	}
}

.hr-col-specs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hr-spec-flags {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	max-width: 100%;
	padding-top: 2px;
}
.hr-spec-item {
	display: flex;
	align-items: flex-start;
	font-size: 13px;
	color: var(--hr-text);
	gap: 6px;
}

.hr-spec-icon {
	font-size: 14px;
	flex-shrink: 0;
	width: 18px;
	text-align: center;
}

.hr-spec-lbl {
	font-weight: 600;
	color: var(--hr-muted);
	margin-right: 4px;
}

.hr-spec-val {
	font-weight: 700;
	color: var(--hr-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hr-spec-val.highlight-price {
	color: var(--hr-orange);
}

.hr-col-score-cta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.hr-score-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hr-blue-light);
	color: var(--hr-blue);
	flex-shrink: 0;
	border: 1px solid rgba(var(--hr-blue-rgb), 0.15);
}

.is-featured-row .hr-score-circle {
	background: var(--hr-orange-light);
	color: var(--hr-orange);
	border-color: rgba(var(--hr-orange-rgb), 0.2);
}

.hr-score-num {
	font-size: 18px;
	font-weight: 850;
	line-height: 1;
}

.hr-score-lbl {
	font-size: 8px;
	font-weight: 800;
	text-transform: uppercase;
	margin-top: 1px;
	letter-spacing: 0.05em;
}

.hr-col-score-cta .hr-cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 114px;
}


.hr-spec-flags img {
	display: inline-block !important;
	vertical-align: middle !important;
	width: 16px !important;
	height: 12px !important;
	border-radius: 1px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
	margin: 0 4px 4px 0 !important;
}
/* --- Custom Redesign Header Search (Bo tròn hoàn toàn, nút màu cam #f45435 tròn, kính lúp trắng) --- */
body.hr-global-typography .hr-header-search,
body.home .hr-header-search {
	display: flex !important;
	align-items: center !important;
	width: 290px !important;
	max-width: 290px !important;
	background: #f7fbff !important;
	border: 1px solid #dbe6f4 !important;
	border-radius: 99px !important;
	padding: 4px 4px 4px 16px !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
	margin: 0 !important;
}

body.hr-global-typography .hr-header-search:focus-within,
body.home .hr-header-search:focus-within {
	border-color: var(--hr-search-btn) !important;
	background: #ffffff !important;
	box-shadow: 0 8px 24px rgba(var(--hr-orange-rgb), 0.08) !important;
}

body.hr-global-typography .hr-header-search input,
body.hr-global-typography .hr-header-search input[type="search"],
body.home .hr-header-search input,
body.home .hr-header-search input[type="search"] {
	width: 100% !important;
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #102033 !important;
	font-size: 14px !important;
	line-height: 34px !important;
	box-shadow: none !important;
	outline: none !important;
}

body.hr-global-typography .hr-header-search button,
body.home .hr-header-search button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 99px !important;
	background: var(--hr-search-btn) !important;
	color: #ffffff !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
	margin-left: 8px !important;
	box-shadow: 0 2px 6px rgba(var(--hr-orange-rgb), 0.2) !important;
	gap: 6px !important;
}

body.hr-global-typography .hr-header-search button .hr-search-btn-text,
body.home .hr-header-search button .hr-search-btn-text {
	display: inline !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	white-space: nowrap !important;
}

body.hr-global-typography .hr-header-search button:hover,
body.home .hr-header-search button:hover {
	background: var(--hr-search-btn-hover) !important;
	transform: scale(1.03) !important;
	box-shadow: 0 4px 10px rgba(var(--hr-orange-rgb), 0.3) !important;
}

body.hr-global-typography .hr-header-search button svg,
body.home .hr-header-search button svg {
	width: 15px !important;
	height: 15px !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
	display: block !important;
}