/* =========================================================================
   Trang bán hàng: Mặt nạ Collagen Kihasu — lớp áo riêng (hồng / đỏ Nhật Bản)
   ====================================================================== */

.kihasu {
	--k-red:    #E60012;
	--k-red-d:  #B8000E;
	--k-ink:    #2A1E24;
	--k-ink-2:  #6E5A64;
	--k-ink-3:  #9C8590;
	--k-line:   #F3DDE8;
	--k-pink:   #FFF1F7;
	--k-gold:   #C99A3B;
	--k-gold-l: #FBF3E1;

	background:
		radial-gradient(120% 55% at 50% 0%, #FFE3EE 0%, rgba(255,227,238,0) 55%),
		linear-gradient(180deg, #FFF7FB 0%, #FDEDF4 45%, #F4FAFF 100%);
	color: var(--k-ink);
}

.kihasu h1, .kihasu h2, .kihasu h3 { color: var(--k-ink); }
.kihasu .eyebrow { color: var(--k-red); }
.kihasu .eyebrow::before { background: var(--k-red); }
.kihasu .section-head p { color: var(--k-ink-2); }

.kihasu .btn--k {
	background: var(--k-red); color: #fff;
	box-shadow: 0 10px 26px rgba(230,0,18,.3);
}
.kihasu .btn--k:hover { background: var(--k-red-d); color: #fff; }
.kihasu .btn--k-ghost {
	background: #fff; color: var(--k-red); border-color: rgba(230,0,18,.25);
	box-shadow: 0 6px 18px rgba(200,120,150,.16);
}
.kihasu .btn--k-ghost:hover { border-color: var(--k-red); color: var(--k-red-d); }

/* ---------- hero ---------- */
.k-hero { padding-block: clamp(36px, 6vw, 72px); }
.k-hero__inner {
	display: grid; grid-template-columns: 1.02fr .98fr;
	gap: clamp(28px, 5vw, 60px); align-items: center;
}
@media (max-width: 899px) {
	.k-hero__inner { grid-template-columns: 1fr; }
	.k-hero__figure { order: -1; max-width: 460px; margin-inline: auto; }
}

.k-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.85); border: 1px solid rgba(230,0,18,.18);
	color: var(--k-red-d); font-weight: 600; font-size: 13.5px;
	padding: 7px 15px; border-radius: 999px; margin-bottom: 18px;
}
.k-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--k-red); }

.k-hero h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.16; margin-bottom: 16px; text-wrap: balance; }
.k-hero h1 em { font-style: normal; color: var(--k-red); }
.k-hero__lede { font-size: clamp(16.5px, 1.8vw, 19px); color: var(--k-ink-2); margin-bottom: 20px; max-width: 52ch; }

.k-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; padding: 0; list-style: none; }
.k-tags li {
	background: #fff; border: 1px solid rgba(247,154,192,.55); color: #8A5C6E;
	font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px;
	box-shadow: 0 3px 10px rgba(247,154,192,.16);
}

.k-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.k-price b { font-size: clamp(34px, 4.6vw, 46px); font-weight: 800; color: var(--k-red); letter-spacing: -.02em; }
.k-price s { font-size: 19px; color: var(--k-ink-3); }
.k-price em {
	font-style: normal; background: linear-gradient(135deg, #EBC96E, var(--k-gold));
	color: #4A3405; font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 999px;
}
.k-price__sub { font-size: 14.5px; color: var(--k-ink-3); margin: 0 0 20px; }

.k-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.k-hero__figure { position: relative; }
.k-hero__figure img {
	width: 100%; border-radius: 22px; border: 1px solid rgba(247,154,192,.5);
	box-shadow: 0 22px 48px rgba(200,120,150,.26);
}
.k-hero__save {
	position: absolute; top: 14px; left: 14px;
	background: linear-gradient(135deg, #EBC96E, var(--k-gold)); color: #4A3405;
	font-weight: 800; font-size: 14px; padding: 7px 14px; border-radius: 12px;
	box-shadow: 0 8px 18px rgba(201,154,59,.4);
}

/* ---------- dải cam kết ---------- */
.k-trust { background: var(--k-red); color: #fff; }
.k-trust ul {
	list-style: none; margin: 0; padding: 15px 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
	font-size: 15px; font-weight: 500;
}
.k-trust li { display: inline-flex; align-items: center; gap: 8px; }
.k-trust li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ---------- thẻ trắng dùng chung ---------- */
.k-card {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid rgba(247,154,192,.4); border-radius: 18px;
	padding: 24px 22px; box-shadow: 0 10px 26px rgba(200,120,150,.14);
}
.k-card h3 { font-size: 18px; margin-bottom: 8px; }
.k-card p { margin: 0; font-size: 15.5px; color: var(--k-ink-2); }
.k-card__icon {
	display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
	background: #FFE6F0; color: var(--k-red); margin-bottom: 14px;
}
.k-card--mid { text-align: center; align-items: center; }
.k-card--mid .k-card__icon { border: 2px solid #EBC96E; background: var(--k-pink); }

/* ---------- khối "vì sao" ---------- */
.k-reason {
	background: linear-gradient(135deg, #FFFFFF, #FFF1F7);
	border: 1px solid rgba(247,154,192,.45); border-radius: 24px;
	padding: clamp(26px, 5vw, 44px); text-align: center;
	box-shadow: 0 14px 34px rgba(200,120,150,.16);
}
.k-reason h2 { margin-bottom: 14px; }
.k-reason p { max-width: 60ch; margin-inline: auto; color: var(--k-ink-2); font-size: clamp(16.5px,1.8vw,18.5px); }

/* ---------- bảng tính năng ---------- */
.k-table {
	background: #fff; border: 1px solid rgba(247,154,192,.45); border-radius: 18px;
	overflow: hidden; box-shadow: 0 12px 30px rgba(200,120,150,.15);
}
.k-table__row { display: grid; grid-template-columns: 1fr 1.25fr; }
.k-table__row + .k-table__row { border-top: 1px solid var(--k-line); }
.k-table__head { background: var(--k-red); color: #fff; font-weight: 700; font-size: 15px; }
.k-table__row > div { padding: 13px 18px; font-size: 15.5px; }
.k-table__row > div + div { border-left: 1px solid var(--k-line); }
.k-table__head > div + div { border-left-color: rgba(255,255,255,.25); }
.k-table__row:not(.k-table__head) > div:first-child { font-weight: 600; color: #3A2A32; }
.k-table__row:not(.k-table__head) > div:last-child { color: var(--k-ink-2); }
@media (max-width: 560px) {
	.k-table__row { grid-template-columns: 1fr; }
	.k-table__row > div + div { border-left: none; border-top: 1px dashed var(--k-line); }
	.k-table__head { display: none; }
}

/* ---------- gói mua ---------- */
.k-offer {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1.5px solid rgba(247,154,192,.5); border-radius: 22px;
	padding: 28px 24px; box-shadow: 0 14px 34px rgba(200,120,150,.16);
}
.k-offer--best { border-color: var(--k-gold); box-shadow: 0 20px 46px rgba(201,154,59,.24); }
.k-offer__flag {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	background: linear-gradient(135deg, #EBC96E, var(--k-gold)); color: #4A3405;
	font-weight: 800; font-size: 13px; letter-spacing: .04em;
	padding: 6px 16px; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 6px 16px rgba(201,154,59,.35);
}
.k-offer h3 { font-size: 20px; margin-bottom: 4px; }
.k-offer__note { font-size: 14.5px; color: var(--k-ink-3); margin: 0 0 16px; }
.k-offer ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.k-offer li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--k-ink-2); }
.k-offer li svg { flex: none; margin-top: 4px; color: var(--k-red); }
.k-offer .btn { margin-top: auto; }

/* ---------- câu hỏi ---------- */
.kihasu .faq details { border-color: rgba(247,154,192,.45); box-shadow: 0 8px 20px rgba(200,120,150,.12); }
.kihasu .faq summary { color: var(--k-ink); }
.kihasu .faq summary::after { background: var(--k-pink); color: var(--k-red); }
.kihasu .faq details > div { color: var(--k-ink-2); }

/* ---------- kêu gọi cuối ---------- */
.k-cta {
	background: linear-gradient(160deg, var(--k-red), #C0000F); color: #fff;
	border-radius: clamp(20px, 3vw, 28px); padding: clamp(30px, 5vw, 50px);
	text-align: center; position: relative; overflow: hidden;
	box-shadow: 0 22px 50px rgba(230,0,18,.28);
}
.k-cta::after {
	content: ''; position: absolute; top: -40px; right: -40px; width: 170px; height: 170px;
	border-radius: 50%; background: rgba(255,255,255,.1);
}
.k-cta > * { position: relative; }
.k-cta h2 { color: #fff; margin-bottom: 12px; }
.k-cta p { color: #FFE0E4; max-width: 58ch; margin: 0 auto 24px; }
.k-cta .btn--k-light { background: #fff; color: var(--k-red); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.k-cta .btn--k-light:hover { background: #FFF1F4; color: var(--k-red-d); }

.k-fine { font-size: 14px; color: var(--k-ink-3); font-style: italic; text-align: center; margin: 26px auto 0; max-width: 70ch; }