/* ================================================================
   EVANGELUX — Khấn Xin (form + danh sách kiểu review card)
   ================================================================ */

:root{
	--kx-navy:#0A1B2E; --kx-navy-soft:#1B3B5C;
	--kx-gold:#C9A45C; --kx-gold-soft:#E4CFA0;
	--kx-ivory:#F6F2E8; --kx-ink:#141B22; --kx-ink-soft:#4A5560;
	--kx-serif:'Fraunces', serif; --kx-sans:'Inter', sans-serif; --kx-mono:'IBM Plex Mono', monospace;
}

/* ---------- Tiêu đề phần (dùng khi đặt trong trang) ---------- */
.khanxin-title{
	text-align:center; font-family:var(--kx-serif); font-weight:400;
	font-size:clamp(26px,3.4vw,34px); color:var(--kx-ink); margin:64px auto 6px;
}
.khanxin-sub{
	text-align:center; font-family:var(--kx-sans); font-size:15px;
	color:var(--kx-ink-soft); max-width:520px; margin:0 auto;
}

/* ---------- FORM ---------- */
.khanxin-form-wrap{ max-width:none; margin:32px 0 0; text-align:left; }
.khanxin-form{
	display:flex; flex-direction:column; gap:14px;
	background:#fff;
	border:1px solid rgba(20,27,34,0.07);
	border-radius:16px;
	padding:30px 30px 26px;
	box-shadow:0 14px 40px rgba(10,27,46,0.07);
}
.khanxin-form-title{
	font-family:var(--kx-serif); font-weight:500; font-size:19px; color:var(--kx-ink);
	display:flex; align-items:center; gap:10px; margin-bottom:4px;
}
.khanxin-form-icon{ font-size:22px; line-height:1; }
.khanxin-name,
.khanxin-content{
	width:100%; font-family:var(--kx-sans); font-size:15px; color:var(--kx-ink);
	background:var(--kx-ivory);
	border:1px solid rgba(20,27,34,0.12); border-radius:10px;
	padding:13px 15px; line-height:1.65; transition:border-color .2s, box-shadow .2s, background .2s;
}
.khanxin-content{ resize:vertical; min-height:120px; }
.khanxin-name::placeholder,
.khanxin-content::placeholder{ color:#9aa2ad; }
.khanxin-name:focus,
.khanxin-content:focus{
	outline:none; background:#fff; border-color:var(--kx-gold);
	box-shadow:0 0 0 3px rgba(201,164,92,0.18);
}
.khanxin-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.khanxin-btn{
	align-self:flex-start; cursor:pointer;
	font-family:var(--kx-sans); font-size:14.5px; font-weight:500; letter-spacing:0.02em;
	color:var(--kx-ivory);
	background:linear-gradient(135deg, var(--kx-navy-soft), var(--kx-navy));
	border:0; border-radius:999px; padding:13px 34px;
	box-shadow:0 6px 18px rgba(10,27,46,0.22);
	transition:transform .18s ease, box-shadow .18s ease, background .25s ease, color .25s ease;
}
.khanxin-btn:hover{
	background:linear-gradient(135deg, var(--kx-gold-soft), var(--kx-gold));
	color:var(--kx-navy); transform:translateY(-1px);
	box-shadow:0 10px 24px rgba(201,164,92,0.3);
}

/* ---------- THÔNG BÁO ---------- */
.khanxin-note{ font-family:var(--kx-sans); font-size:14.5px; padding:13px 18px; border-radius:10px; margin-bottom:14px; }
.khanxin-ok{ background:rgba(62,147,160,0.12); color:#155e6b; border:1px solid rgba(62,147,160,0.35); }
.khanxin-err{ background:rgba(201,120,90,0.12); color:#8a3b2a; border:1px solid rgba(201,120,90,0.35); }

/* ---------- DANH SÁCH (review cards) ---------- */
.khanxin-count{
	font-family:var(--kx-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
	color:var(--kx-gold); margin:44px 0 18px;
}
.khanxin-list{
	display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:0;
}
.khanxin-item{
	position:relative; background:#fff;
	border:1px solid rgba(20,27,34,0.06); border-radius:16px;
	padding:24px 26px 22px;
	box-shadow:0 8px 26px rgba(10,27,46,0.06);
	transition:transform .2s ease, box-shadow .2s ease;
}
.khanxin-item:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(10,27,46,0.1); }
.khanxin-item::before{
	content:"\201C"; position:absolute; top:10px; right:20px;
	font-family:var(--kx-serif); font-size:64px; line-height:1; color:var(--kx-gold);
	opacity:0.16; pointer-events:none;
}
.khanxin-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.khanxin-avatar{
	flex:0 0 auto; width:46px; height:46px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-family:var(--kx-serif); font-weight:600; font-size:20px; color:var(--kx-navy);
	background:linear-gradient(135deg, var(--kx-gold-soft), var(--kx-gold));
	box-shadow:0 4px 12px rgba(201,164,92,0.35);
}
.khanxin-id{ display:flex; flex-direction:column; gap:2px; }
.khanxin-who{ font-family:var(--kx-serif); font-weight:500; font-size:16.5px; color:var(--kx-ink); }
.khanxin-date{ font-family:var(--kx-mono); font-size:11.5px; color:var(--kx-ink-soft); opacity:0.85; }
.khanxin-text{
	font-family:var(--kx-sans); font-size:15px; line-height:1.75; color:var(--kx-ink-soft);
}

.khanxin-empty{
	max-width:640px; margin:32px auto 0; text-align:center;
	font-family:var(--kx-sans); color:var(--kx-ink-soft); font-style:italic;
}

@media (max-width:680px){
	.khanxin-list{ grid-template-columns:1fr; }
	.khanxin-form{ padding:24px 20px; }
}