/*!
 * Kangnam — Chuyên khoa layout
 * Banner + lưới dịch vụ + khối quy trình CTA.
 * Dùng chung cho mọi bài thuộc CPT `chuyen_khoa`.
 */

/* Offset for the fixed Kangnam header (~159px desktop / 77px tablet).
   Uses padding-top on the wrapper to avoid margin-collapse with #page. */
.chuyen-khoa { padding-top: 110px; }
@media (max-width: 1024px) { .chuyen-khoa { padding-top: 45px; } }
@media (max-width: 600px) { .chuyen-khoa { padding-top: 20px; } }

.chuyen-khoa .container {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
}

/* ============================================================
   CHUYÊN KHOA — banner_knsv / cate_knsv / doctor_knsv
   ============================================================ */

/* --- Banner --- */
.banner_knsv_1_0_0 {
	background-color: #fafafa;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	width: 100%;
	padding: 3% 0 12%;
}
@media (max-width: 768px) {
	.banner_knsv_1_0_0 { padding: 30px 0; background-image: none !important; background-color: #fafafa; }
}
.banner_knsv_1_0_0__content { width: 45%; padding-right: 30px; }
@media (max-width: 768px) { .banner_knsv_1_0_0__content { width: 100%; padding-right: 0; } }
.banner_knsv_1_0_0__subtitle { display: block; font-size: 20px; color: #294573; letter-spacing: 1px; margin-bottom: 8px; }
.banner_knsv_1_0_0__title { font-size: 42px; font-weight: 700; color: #1e3d73; margin: 0 0 20px; line-height: 1.2; text-transform: uppercase; }
@media (max-width: 768px) { .banner_knsv_1_0_0__title { font-size: 32px; } }
.banner_knsv_1_0_0__desc { font-size: 14px; line-height: 1.6; color: #333; margin-bottom: 80px; text-align: justify; }
@media (max-width: 991px) { .banner_knsv_1_0_0__desc { margin-bottom: 20px; } }
.banner_knsv_1_0_0__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 991px) { .banner_knsv_1_0_0__features { align-items: center; gap: 5px; } }
.banner_knsv_1_0_0__feature-item {
	display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px;
	font-size: 15px; color: #333; font-weight: 500; position: relative;
	padding: 8px 24px; border-radius: 30px; z-index: 1; transform-origin: right center;
	transition: color .4s cubic-bezier(0.25, 0.8, 0.25, 1), transform .4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (max-width: 991px) { .banner_knsv_1_0_0__feature-item { transform-origin: center; } }
.banner_knsv_1_0_0__feature-item::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, #e5a93b 0%, #c48b1c 100%);
	border-radius: 30px; z-index: -1; box-shadow: 0 4px 12px rgba(196,139,28,.3);
	opacity: 0; transform: scale(0.9);
	transition: opacity .4s ease, transform .4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.banner_knsv_1_0_0__feature-item--highlighted { color: #fff; transform: scale(1.05) translateX(-5px); }
@media (max-width: 991px) { .banner_knsv_1_0_0__feature-item--highlighted { transform: scale(1.05) translateY(0); } }
.banner_knsv_1_0_0__feature-item--highlighted::before { opacity: 1; transform: scale(1); }
.banner_knsv_1_0_0__feature-item--highlighted .banner_knsv_1_0_0__feature-dot { background-color: #fff; transform: scale(1.4); }
.banner_knsv_1_0_0__feature-text { white-space: nowrap; position: relative; z-index: 2; }
.banner_knsv_1_0_0__feature-dot {
	width: 6px; height: 6px; background-color: #d4a338; border-radius: 50%;
	flex-shrink: 0; position: relative; z-index: 2;
	transition: background-color .4s ease, transform .4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Category grid --- */
.cate_knsv_1_0_0 { background-color: #f8f8f8; padding: 60px 0; }
@media (max-width: 991px) { .cate_knsv_1_0_0 { padding: 30px 0; } }
.cate_knsv_1_0_0__container { width: 90%; max-width: 1450px; margin: 0 auto; }
@media (max-width: 991px) { .cate_knsv_1_0_0__container { width: 100%; padding: 0 15px; } }
.cate_knsv_1_0_0__header { background-color: #d9d9d9; border-radius: 16px; padding: 20px; text-align: center; margin-bottom: 50px; }
@media (max-width: 991px) { .cate_knsv_1_0_0__header { margin-bottom: 20px; } }
.cate_knsv_1_0_0__title { font-size: 28px; font-weight: 700; color: #333; margin: 0; letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 768px) { .cate_knsv_1_0_0__title { font-size: 22px; } }
.cate_knsv_1_0_0__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 991px) { .cate_knsv_1_0_0__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 576px) { .cate_knsv_1_0_0__grid { gap: 15px; } }
.cate_knsv_1_0_0__item { display: flex; flex-direction: column; cursor: pointer; color: inherit; text-decoration: none; }
.cate_knsv_1_0_0__item:hover .cate_knsv_1_0_0__image { transform: scale(1.05); }
.cate_knsv_1_0_0__item:hover .cate_knsv_1_0_0__name { color: #1e3d73; }
.cate_knsv_1_0_0__image-wrapper { width: 100%; aspect-ratio: 1.48; border-radius: 18px; overflow: hidden; background-color: #eaeaea; }
.cate_knsv_1_0_0__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.cate_knsv_1_0_0__name { font-size: 16px; color: #3f3f3f; margin: 15px 0 0; line-height: 1.4; text-transform: uppercase; transition: color .3s ease; text-align: left; }
@media (max-width: 576px) { .cate_knsv_1_0_0__name { font-size: 15px; margin-top: 10px; } }

/* --- Doctor / Process CTA --- */
.doctor_knsv_1_0_0 {
	background: #1e3d73 center/cover no-repeat;
	position: relative; width: 100%; min-height: 550px;
	display: flex; align-items: center; overflow: hidden;
}
.doctor_knsv_1_0_0__content { max-width: 550px; display: flex; flex-direction: column; align-items: flex-start; padding: 80px 0; }
@media (max-width: 768px) { .doctor_knsv_1_0_0__content { padding: 60px 0; max-width: 100%; align-items: center; text-align: center; } }
.doctor_knsv_1_0_0__title { font-size: 38px; font-weight: bold; color: #fff; line-height: 1.25; margin: 0 0 20px; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 991px) { .doctor_knsv_1_0_0__title { font-size: 32px; } }
@media (max-width: 576px) { .doctor_knsv_1_0_0__title { font-size: 24px; } }
.doctor_knsv_1_0_0__desc { font-size: 13px; line-height: 1.6; color: hsla(0,0%,100%,.85); margin: 0 0 35px; text-align: justify; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 768px) { .doctor_knsv_1_0_0__desc { text-align: center; } }
.doctor_knsv_1_0_0__btn {
	display: inline-block; background-color: #e9ebf0; color: #1a3b70;
	font-size: 15px; font-weight: bold; padding: 12px 36px; border-radius: 8px;
	text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,.2);
	transition: background-color .3s ease, transform .2s ease;
}
.doctor_knsv_1_0_0__btn:hover { background-color: #fff; transform: translateY(-2px); }
.doctor_knsv_1_0_0__btn:active { transform: translateY(0); }