/**
 * Minh Phượng Korea base design system.
 *
 * Scope: design tokens, shared buttons, and atomic color utilities only.
 * Page layout, header, footer, and WooCommerce rules do not belong here.
 */

html {
	scroll-behavior: smooth;
}

/* .tbp-bright design-system scope overrides */
.tbp-bright {
  --tbp-orange: #6B0F0F;
  --tbp-orange-light: #C9A15B;
  --tbp-text: #2C221D;
  --tbp-text-soft: #6B5A52;
  --tbp-border: #E8DDD4;
  --tbp-radius: 8px;
  --tbp-shadow: 0 16px 40px rgba(44, 34, 29, 0.08);
  color: var(--tbp-text);
  background: var(--tbp-white);
  font-family: inherit;
}
.tbp-bright * { box-sizing: border-box; }
.tbp-bright a { text-decoration: none; }
@media (max-width: 767px) {
  .tbp-bright .tbp-bright-eyebrow { font-size: 11px !important; margin-bottom: 10px !important; }
  .tbp-bright .tbp-bright-btn { min-height: 46px !important; font-size: 14px !important; padding: 0 18px !important; border-radius: 8px !important; }
}

:root {
	/* Minh Phượng Korea brand palette — ADN Section 11 */
	--sam-red:  #6B0F0F;
	--sam-gold: #C9A15B;
	--sam-beige: #F8F3EC;
	--sam-ink:  #2C221D;

	/* Blocksy global color palette override — remap default blue/navy → MPK.
	   Blocksy's global.css defines these on :root with default (blue) values;
	   this override loads after global.css so MPK values win everywhere the
	   theme/blocks reference var(--theme-palette-color-N). */
	--theme-palette-color-1: #6B0F0F; /* accent */
	--theme-palette-color-2: #520B0B; /* accent hover (darker) */
	--theme-palette-color-3: #2C221D; /* headings */
	--theme-palette-color-4: #2C221D; /* body text */
	--theme-palette-color-5: #E8DDD4; /* borders */
	--theme-palette-color-6: #F5EFE8; /* light surface */
	--theme-palette-color-7: #FAF7F2; /* lightest surface */
	--theme-palette-color-8: #ffffff; /* white */

	/* Legacy aliases pointing to Sam palette — keeps old class references working */
	--tbp-navy: #2C221D;
	--tbp-orange: #6B0F0F;
	--tbp-orange-light: #C9A15B;
	--tbp-blue-dark: #2C221D;
	--tbp-blue: #6B0F0F;
	--tbp-blue-light: #C9A15B;
	--tbp-green: #10b981;

	/* Surface & background */
	--tbp-white: #fff;
	--tbp-surface: #fff;
	--tbp-bg: #F8F3EC;
	--tbp-bg-soft: #FAF7F2;
	--tbp-bg-blue-soft: #F3EDE4;
	--tbp-bg-blue-lighter: #EBE3D8;

	/* Text */
	--tbp-text: #2C221D;
	--tbp-text-soft: #6B5A52;

	/* Border */
	--tbp-border: #E8DDD4;

	/* Layout */
	--tbp-container-max: 1400px;
	--tbp-container-padding: 24px;
	--tbp-container-padding-mobile: 16px;

	/* Radius & shadow — ADN: 8px card, 12px media */
	--tbp-radius: 8px;
	--tbp-radius-card: 8px;
	--tbp-radius-media: 12px;
	--tbp-shadow: 0 8px 24px rgba(44, 34, 29, 0.08);
	--tbp-shadow-soft: 0 6px 18px rgba(44, 34, 29, 0.06);
}

.tbp-bright-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 18px;
	border: 2px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		opacity 0.18s,
		transform 0.15s,
		background-color 0.18s,
		border-color 0.18s,
		color 0.18s;
}

.tbp-bright-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.tbp-bright-btn:focus-visible {
	outline: 3px solid rgba(107, 15, 15, 0.3);
	outline-offset: 3px;
}

.tbp-bright-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.tbp-bright-actions--right {
	justify-content: flex-end;
}

.tbp-bright-btn:active {
	transform: scale(0.98);
}

.tbp-bright-btn--primary {
	color: var(--tbp-white);
	background: var(--sam-red);
}

.tbp-bright-btn--primary:hover {
	opacity: 0.92;
}

.tbp-bright-btn--outline {
	color: var(--sam-red);
	background: transparent;
	border-color: var(--sam-red);
}

.tbp-bright-btn--outline:hover {
	background: var(--tbp-bg-soft);
}

.tbp-bright-btn--blue {
	color: var(--tbp-white);
	background: var(--sam-ink);
}

.tbp-bright-btn--white {
	color: var(--sam-ink);
	background: var(--tbp-white);
}

.tbp-bg-blue {
	background: #eef2ff;
}

.tbp-bg-green {
	background: #dffbf0;
}

.tbp-bg-orange {
	background: #fff3e8;
}

.tbp-bg-sky {
	background: #F8F3EC;
}

.tbp-bg-purple {
	background: #f0e8ff;
}

/* ===== ARTICLE CTA BLOCK — global (appears on homepage + single posts) ===== */

.tbp-article-cta {
	margin-top: 40px;
	margin-bottom: 5px;
	padding: clamp(24px, 4vw, 40px);
	border-radius: 8px;
	color: #fff;
	background: var(--sam-ink);
	text-align: center;
}

.tbp-article-cta__eyebrow {
	margin: 0 0 8px;
	color: var(--sam-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tbp-article-cta__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 800;
}

.tbp-article-cta__desc {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
}

.tbp-article-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.tbp-article-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	padding: 13px 28px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .15s;
}

.tbp-article-cta__btn:hover {
	opacity: .88;
}

.tbp-article-cta__btn--call {
	color: #fff;
	background: var(--sam-red);
}

.tbp-article-cta__btn--zalo {
	color: #fff;
	background: var(--sam-gold);
}

/* ===== ICON UTILITIES ===== */

.tbp-icon-success {
	color: var(--tbp-green);
	background: #dffbf0;
}

.tbp-icon-blue {
	color: var(--tbp-blue);
	background: #eef2ff;
}

.tbp-icon-orange {
	color: var(--tbp-orange);
	background: #fff3e8;
}