/* =====================================================================
   KAMITO MEMBER LOYALTY — landing page + trang hướng dẫn đổi quà
   Template: page.kamito_loyalty_member.liquid, page.huong_dan_doi_qua.liquid
   CSS thuần (Haravan tự render Liquid, KHÔNG qua Sass). Gọi bằng:
   //cdn.hstatic.net/themes/1000341630/1001416770/14/style-kamito-member.css?v=6960
   Màu mặc định là biến CSS; template ghi đè bằng màu trong Thiết lập giao diện.
   Tỉ lệ chuẩn theo bản thiết kế khổ 1920px, co giãn theo màn hình.
   ===================================================================== */

@font-face{font-family:'KmlArchivo';src:url("//cdn.hstatic.net/themes/1000341630/1001416770/14/kml-archivo-light.woff2?v=6960") format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'KmlArchivo';src:url("//cdn.hstatic.net/themes/1000341630/1001416770/14/kml-archivo-semibold.woff2?v=6960") format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'KmlArchivo';src:url("//cdn.hstatic.net/themes/1000341630/1001416770/14/kml-archivo-extrabold.woff2?v=6960") format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'KmlArchivo';src:url("//cdn.hstatic.net/themes/1000341630/1001416770/14/kml-archivo-thinitalic.woff2?v=6960") format('woff2');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'KmlMyriad';src:url("//cdn.hstatic.net/themes/1000341630/1001416770/14/kml-myriadpro-regular.woff2?v=6960") format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- Biến ---------- */
.kml-page{
	--kml-red:#E30925;--kml-navy:#0F285D;--kml-navy2:#0F2452;--kml-lime:#E3F42A;
	--kml-grey:#606060;--kml-light:#F4F6F8;--kml-fb:#1677F0;--kml-pct:#E30613;
	--kml-sec:56px;          /* khoảng cách trên/dưới mỗi section */
	--kml-gap-head:28px;     /* khoảng cách tiêu đề section -> nội dung */
	--kml-fs-body:15px;--kml-fs-small:14px;--kml-fs-eyebrow:15px;--kml-fs-h2:23px;--kml-fs-label:17px;
	--kml-radius:20px;--kml-btn-h:46px;
	--kml-gutter:20px;       /* khoảng thở 2 bên — dùng chung cho mọi section */
	--kml-content:1200px;    /* bề rộng tối đa phần nội dung */
}
@media (min-width:768px){
	.kml-page{--kml-sec:80px;--kml-gap-head:40px;--kml-fs-h2:28px;--kml-fs-eyebrow:17px;--kml-gutter:40px}
}
@media (min-width:1200px){
	.kml-page{
		--kml-sec:clamp(96px,6.25vw,120px);
		--kml-gap-head:clamp(48px,3.35vw,64px);
		--kml-fs-body:clamp(15px,.99vw,19px);
		--kml-fs-small:clamp(14px,.855vw,16.4px);
		--kml-fs-eyebrow:clamp(17px,1.28vw,24.6px);
		--kml-fs-h2:clamp(28px,1.85vw,35.5px);
		--kml-fs-label:clamp(18px,1.24vw,23.8px);
		--kml-radius:clamp(20px,1.15vw,22px);
		--kml-btn-h:42px;
		--kml-gutter:clamp(64px,8vw,160px);
	}
}

/* ---------- Nền tảng + chống CSS theme ghi đè ---------- */
.kml-page{color:var(--kml-grey);font-weight:300;font-size:var(--kml-fs-body);line-height:1.35;overflow:hidden;-webkit-font-smoothing:antialiased;width:100%}
.kml-page,.kml-page *{font-family:'KmlArchivo','Archivo','KmlMyriad',Arial,sans-serif !important;letter-spacing:normal;cursor:auto}
.kml-page a,.kml-page a *,.kml-page button,.kml-page button *{cursor:pointer}
.kml-page *,.kml-page *::before,.kml-page *::after{box-sizing:border-box}
.kml-page h1,.kml-page h2,.kml-page h3,.kml-page h4,.kml-page p,.kml-page ul,.kml-page ol,.kml-page li{margin:0;padding:0;text-shadow:none;border:0;background:none}
.kml-page ul,.kml-page ol{list-style:none}
.kml-page img{max-width:100%;height:auto;display:block;border:0}
.kml-page a{text-decoration:none !important}
.kml-page button{-webkit-appearance:none;appearance:none;box-shadow:none}
.kml-page a:focus,.kml-page button:focus{outline:none}
.kml-page a:focus-visible,.kml-page button:focus-visible{outline:2px solid var(--kml-red);outline-offset:3px}
.kml-page section{scroll-margin-top:90px}
.kml-wrap{width:100%;max-width:calc(var(--kml-content) + 2 * var(--kml-gutter));margin:0 auto;padding:0 var(--kml-gutter)}

/* ---------- Tiêu đề section ---------- */
.kml-head{text-align:center;margin-bottom:var(--kml-gap-head) !important}
.kml-page .kml-eyebrow{font-weight:600;color:var(--kml-red);text-transform:uppercase;font-size:var(--kml-fs-eyebrow);line-height:1.25}
.kml-page .kml-h2{font-weight:800;color:var(--kml-navy);text-transform:uppercase;font-size:var(--kml-fs-h2);line-height:1.22;margin-top:8px}
.kml-page .kml-sub{font-weight:300;color:var(--kml-grey);font-size:var(--kml-fs-body);line-height:1.45;margin-top:10px;max-width:900px;margin-left:auto;margin-right:auto}

/* ---------- Nút ---------- */
.kml-page .kml-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:var(--kml-btn-h);padding:8px 22px;border:0;border-radius:8px;
	font-weight:600;text-transform:uppercase;font-size:var(--kml-fs-body);line-height:1.15;text-align:center;white-space:nowrap;
	background:var(--kml-lime);color:var(--kml-navy);
	transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease;
}
.kml-page .kml-btn:hover{background:var(--kml-navy);color:var(--kml-lime);transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,40,93,.28)}
.kml-page .kml-btn--onnavy:hover{background:#fff;color:var(--kml-navy)}
.kml-page .kml-btn--fb{background:var(--kml-fb);color:#fff}
.kml-page .kml-btn--fb:hover{background:#fff;color:var(--kml-fb)}
.kml-page .kml-btn--fb svg{width:.72em;height:1.3em;fill:currentColor;flex:0 0 auto}
@media (max-width:420px){.kml-page .kml-btn{white-space:normal}}

/* ---------- Hiệu ứng: bố cục sáng lên, ảnh zoom ---------- */
.kml-glow{transition:box-shadow .3s ease,transform .3s ease,filter .3s ease}
.kml-glow:hover{box-shadow:0 0 0 3px rgba(227,244,42,.6),0 14px 34px rgba(15,40,93,.2);transform:translateY(-4px);filter:brightness(1.05)}
.kml-zoom{overflow:hidden}
.kml-zoom img{transition:transform .6s ease}
.kml-zoom:hover img{transform:scale(1.06)}

/* =====================================================================
   1. HERO + MENU NHỎ
   ===================================================================== */
.kml-hero{position:relative;background:var(--kml-navy2)}
.kml-hero__bglink{display:block}
.kml-page .kml-hero__img{width:100%;aspect-ratio:2000/1030;object-fit:cover}
/* Mobile: thanh đỏ 2 hàng — logo + nút | 4 mục menu */
.kml-hero__nav{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;padding:10px 16px 8px;background:var(--kml-red)}
.kml-hero__logo{display:block;width:40px}
.kml-page .kml-hero__logo img{width:100%}
.kml-hero__navcta{justify-self:end}
.kml-page .kml-hero__navcta .kml-btn{min-height:38px;padding:6px 14px;font-size:13px}
.kml-hero__links{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:4px}
.kml-page .kml-hero__links a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 2px;color:#fff;font-weight:600;text-transform:uppercase;white-space:nowrap;font-size:12px;position:relative;transition:color .25s ease}
.kml-page .kml-hero__links a::after{content:'';position:absolute;left:2px;right:2px;bottom:6px;height:2px;background:var(--kml-lime);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.kml-page .kml-hero__links a:hover{color:var(--kml-lime)}
.kml-page .kml-hero__links a:hover::after{transform:scaleX(1)}
.kml-hero__copy{padding:20px var(--kml-gutter) 26px;background:var(--kml-navy2)}
.kml-page .kml-hero__title{color:#fff;font-weight:600;text-transform:uppercase;font-size:15px;line-height:1.3;margin-bottom:12px}
/* Mobile/tablet (<992, chữ nằm dưới banner): tiêu đề + nút "Mở khóa đặc quyền" canh giữa. Desktop giữ nguyên */
@media (max-width:991px){.kml-hero__copy{text-align:center}.kml-page .kml-hero__title{text-align:center}}
@media (min-width:480px){.kml-page .kml-hero__links a{font-size:13px}}
@media (min-width:992px){
	.kml-hero{background:none}
	.kml-hero__nav{position:absolute;left:0;right:0;top:0;height:21.8%;padding:0;background:none;display:block;z-index:2}
	.kml-hero__logo{position:absolute;left:4.67%;top:16.6%;width:4.4%}
	.kml-hero__links{display:block}
	.kml-hero__links li{position:absolute;top:48.5%;transform:translateY(-50%)}
	.kml-hero__links li:nth-child(1){left:16.4%}
	.kml-hero__links li:nth-child(2){left:32.8%}
	.kml-hero__links li:nth-child(3){left:51.1%}
	.kml-hero__links li:nth-child(4){left:64.8%}
	.kml-page .kml-hero__links a{font-size:max(13px,1.28vw);min-height:0;line-height:1.6;padding:0 2px}
	.kml-page .kml-hero__links a::after{bottom:-2px}
	.kml-hero__navcta{position:absolute;left:84.1%;top:51.1%;transform:translateY(-50%)}
	.kml-page .kml-hero__navcta .kml-btn,
	.kml-page .kml-hero__copy .kml-btn{min-height:max(34px,2.14vw);padding:.35vw max(12px,1.05vw);font-size:max(12px,.99vw);border-radius:max(6px,.42vw)}
	.kml-page .kml-hero__navcta .kml-btn{min-width:9.9vw}
	.kml-page .kml-hero__copy .kml-btn{min-width:12.1vw}
	.kml-hero__copy{position:absolute;left:5.65%;top:83.6%;padding:0;background:none;z-index:2}
	.kml-page .kml-hero__title{font-size:max(11px,.89vw);margin-bottom:.9vw}
}

/* =====================================================================
   2. LỢI ÍCH
   ===================================================================== */
.kml-benefit{background:#fff;padding:var(--kml-sec) 0}
.kml-benefit__grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:420px;margin:0 auto}
.kml-bcard{display:flex;flex-direction:column;border:1.9px solid var(--kml-navy);border-radius:var(--kml-radius);overflow:hidden;background:#fff;color:var(--kml-grey)}
.kml-bcard__top{background:var(--kml-navy);text-align:center;padding:24px 16px 20px}
.kml-page .kml-bcard__icon{height:52px;width:auto;max-width:80%;margin:0 auto 14px;transition:transform .35s ease}
.kml-bcard:hover .kml-bcard__icon{transform:scale(1.1) rotate(-4deg)}
.kml-page .kml-bcard__title{color:#fff;font-weight:600;text-transform:uppercase;font-size:var(--kml-fs-label);line-height:1.2}
.kml-page .kml-bcard__body{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:18px 22px 22px;text-align:center;font-weight:600;font-size:var(--kml-fs-body);line-height:1.35}
@media (min-width:768px){
	.kml-benefit__grid{grid-template-columns:repeat(3,1fr);gap:24px;max-width:none}
}
@media (min-width:1200px){
	.kml-benefit__grid{gap:clamp(32px,3.4vw,64px)}
	.kml-bcard{min-height:clamp(290px,16.3vw,313px)}
	.kml-bcard__top{min-height:clamp(150px,8.2vw,158px);padding:clamp(26px,1.77vw,34px) 20px 18px}
	.kml-page .kml-bcard__icon{height:clamp(48px,2.97vw,57px);margin-bottom:clamp(12px,.9vw,17px)}
	.kml-page .kml-bcard__body{padding:clamp(16px,1vw,19px) clamp(18px,1.3vw,25px) 20px}
}

/* =====================================================================
   3. HẠNG THÀNH VIÊN
   ===================================================================== */
.kml-tier{background:var(--kml-light);padding:var(--kml-sec) 0;border-top:1px solid var(--kml-grey)}
.kml-tier__grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:420px;margin:0 auto}
.kml-tcard{border:1.5px solid var(--kml-navy);border-radius:var(--kml-radius);padding:28px 0 30px;text-align:center;background:transparent}
.kml-page .kml-tcard__band{display:block;font-weight:600;color:var(--kml-navy);text-transform:uppercase;font-size:var(--kml-fs-eyebrow);line-height:1.5}
.kml-page .kml-tcard__range{font-weight:600;font-size:var(--kml-fs-body);margin-top:14px}
.kml-page .kml-tcard__pct{font-weight:800;color:var(--kml-pct);font-size:clamp(38px,2.86vw,55px);line-height:1.1;margin-top:8px}
.kml-page .kml-tcard__note{font-weight:600;font-size:var(--kml-fs-body);margin-top:10px}
.kml-tcard__line{display:block;width:72%;height:0;border-top:1.4px solid var(--kml-grey);margin:20px auto 22px}
.kml-page .kml-tcard__perks{text-align:left;padding:0 6% 0 7.8%}
.kml-page .kml-tcard__perks li{display:flex;gap:8px;margin-bottom:12px}
.kml-tcard__perks svg{flex:0 0 auto;width:16px;height:15px;margin-top:.2em;fill:var(--kml-navy)}
.kml-tcard__ptitle{display:block;font-weight:600;text-transform:uppercase;font-size:var(--kml-fs-body);line-height:1.3}
.kml-tcard__pnote{display:block;font-weight:300;font-size:var(--kml-fs-body);line-height:1.3}
.kml-tier__more{text-align:center;margin-top:32px}
/* Mobile (<768): thẻ hạng thành viên thành slide lướt ngang, tự chạy 5s (JS: data-kml-slider) */
.kml-slider-dots{display:none}
@media (max-width:767px){
	.kml-tier__grid{position:relative;display:flex;gap:14px;max-width:none;margin:0 calc(-1 * var(--kml-gutter));padding:6px var(--kml-gutter) 10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--kml-gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.kml-tier__grid::-webkit-scrollbar{display:none}
	.kml-tier__grid .kml-tcard{flex:0 0 84%;scroll-snap-align:center;scroll-snap-stop:always}
	.kml-tier__grid .kml-glow:hover{transform:none}
	.kml-slider-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
	.kml-page .kml-slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--kml-navy);opacity:.25;transition:width .3s ease,opacity .3s ease}
	.kml-page .kml-slider-dots button.is-active{width:24px;opacity:1}
}
@media (min-width:768px){
	.kml-tier__grid{grid-template-columns:repeat(2,1fr);max-width:760px}
}
@media (min-width:1200px){
	.kml-tier__grid{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2vw,38px);max-width:none}
	.kml-tcard{padding:clamp(40px,2.95vw,57px) 0 clamp(32px,2.4vw,46px)}
	.kml-page .kml-tcard__range{margin-top:clamp(16px,1.1vw,21px)}
	.kml-tcard__line{margin:clamp(22px,1.5vw,29px) auto clamp(26px,2.2vw,42px)}
	.kml-page .kml-tcard__perks{padding:0 2% 0 7.8%}
	.kml-page .kml-tcard__perks li{margin-bottom:clamp(12px,.85vw,16px)}
	.kml-tier__more{margin-top:clamp(40px,3.2vw,61px)}
	.kml-page .kml-tier__more .kml-btn{min-width:clamp(230px,13.3vw,256px)}
}

/* =====================================================================
   Khối banner nền + chữ bên trái (4 & 6)
   ===================================================================== */
.kml-split{position:relative;border-top:1px solid var(--kml-grey);display:flex;flex-direction:column-reverse}
.kml-split__bg{position:relative;display:block;height:200px;overflow:hidden}
.kml-page .kml-split__bg img{width:100%;height:100%;object-fit:cover;object-position:right bottom}
.kml-split__inner{position:relative;z-index:1;padding:var(--kml-sec) 0 40px}
.kml-split__copy{max-width:640px}
.kml-page .kml-split__copy .kml-eyebrow{text-align:left}
.kml-page .kml-split__desc{font-weight:300;font-size:var(--kml-fs-body);line-height:1.4;margin-top:14px}
.kml-page .kml-steps{margin-top:22px}
.kml-page .kml-steps li{font-weight:600;text-transform:uppercase;font-size:var(--kml-fs-body);line-height:1.35;margin-bottom:14px}
.kml-steps__no{color:var(--kml-navy);margin-right:6px}
.kml-split__btns{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
.kml-page .kml-split__note{font-weight:100;font-style:italic;font-size:var(--kml-fs-small);line-height:1.5;margin-top:10px;max-width:460px}
.kml-early{background:#fff}
.kml-club{background:var(--kml-navy2);color:#fff}
.kml-page .kml-club .kml-eyebrow{color:#fff}
.kml-page .kml-club .kml-h2{color:var(--kml-lime)}
.kml-page .kml-club .kml-steps li,.kml-club .kml-steps__no{color:#fff}
.kml-page .kml-club .kml-split__btns .kml-btn{min-width:min(100%,330px)}
/* Mobile (<768) — riêng khối "Kamito ghi nhận sự đồng hành": nút canh giữa, ghi chú không ngắt dòng, bớt khoảng trắng phía dưới */
@media (max-width:767px){
	.kml-early .kml-split__btns{align-items:center}
	.kml-page .kml-early .kml-split__note{margin-left:auto;margin-right:auto}
	.kml-page .kml-early .kml-split__note br{display:none}
	.kml-early .kml-split__inner{padding-bottom:20px}
	.kml-early .kml-split__bg{height:auto;aspect-ratio:2000/600}
	.kml-page .kml-early .kml-split__bg img{object-position:right bottom}
}
@media (min-width:768px) and (max-width:1199px){
	.kml-split__bg{height:320px}
	.kml-split__inner{padding:var(--kml-sec) 0 48px}
	.kml-split__copy{max-width:680px}
}
@media (min-width:1200px){
	/* Chiều cao theo đúng tỉ lệ banner, nội dung canh giữa dọc để trên/dưới đều nhau */
	.kml-split{display:flex;flex-direction:row;align-items:center}
	.kml-split__bg{position:absolute;inset:0;height:auto}
	.kml-page .kml-split__bg img{object-position:right center}
	.kml-split__inner{pointer-events:none}
	.kml-split__inner a,.kml-split__inner button{pointer-events:auto}
	.kml-early{min-height:39.1vw}
	.kml-club{min-height:40.65vw}
	.kml-split__inner{width:100%;padding:clamp(56px,4.2vw,80px) 0}
	.kml-split__copy{max-width:clamp(520px,36vw,690px)}
	.kml-page .kml-split__copy .kml-h2{margin-top:clamp(8px,.6vw,11px)}
	.kml-page .kml-split__desc{margin-top:clamp(14px,1.1vw,21px);max-width:clamp(500px,33vw,634px)}
	.kml-page .kml-steps{margin-top:clamp(20px,1.5vw,29px)}
	.kml-page .kml-club .kml-steps{margin-top:clamp(36px,3.2vw,62px)}
	.kml-page .kml-steps li{margin-bottom:clamp(16px,1.5vw,29px)}
	.kml-split__btns{margin-top:clamp(20px,1.9vw,36px);gap:clamp(12px,1.1vw,20px)}
	.kml-page .kml-split .kml-btn{min-width:clamp(260px,15.7vw,301px)}
	.kml-page .kml-club .kml-split__btns .kml-btn{min-width:clamp(330px,19.8vw,380px)}
	.kml-page .kml-split__note{margin-top:clamp(8px,.6vw,12px)}
}

/* =====================================================================
   5. ĐẶC QUYỀN
   ===================================================================== */
.kml-perk{background:var(--kml-light);padding:var(--kml-sec) 0;border-top:1px solid var(--kml-grey)}
.kml-perk__grid{display:grid;grid-template-columns:1fr;gap:22px;max-width:460px;margin:0 auto}
.kml-pcard{position:relative;display:block;border:1.3px solid var(--kml-navy);border-radius:var(--kml-radius);overflow:hidden;background:var(--kml-navy);color:#fff;isolation:isolate}
.kml-pcard__media{display:block;aspect-ratio:460/481;overflow:hidden}
.kml-page .kml-pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.kml-pcard:hover .kml-pcard__media img{transform:scale(1.07)}
.kml-pcard__box{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 7% 14px;text-align:center}
.kml-pcard__box::before{content:'';position:absolute;z-index:-1;left:-6%;width:112%;top:0;height:200%;border-radius:50%;background:var(--kml-navy)}
.kml-pcard__lock{position:absolute;left:50%;top:-18px;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:var(--kml-navy);z-index:-1;display:flex;justify-content:center;padding-top:5px;transition:transform .35s ease}
.kml-pcard__lock svg{width:17px;height:23px;fill:currentColor}
.kml-pcard:hover .kml-pcard__lock{transform:translateY(-4px)}
.kml-page .kml-pcard__tags{font-weight:600;text-transform:uppercase;font-size:12px;line-height:1.3;color:#BCA153;margin-top:6px}
.kml-pcard__dot{color:#fff;margin:0 .35em}
.kml-page .kml-pcard__title{font-weight:600;text-transform:uppercase;color:#fff;font-size:var(--kml-fs-small);line-height:1.3;margin-top:4px}
.kml-page .kml-pcard__desc{font-weight:300;color:#fff;font-size:12.5px;line-height:1.4;margin-top:4px;opacity:.92}
@media (min-width:768px){
	.kml-perk__grid{grid-template-columns:repeat(3,1fr);max-width:none;gap:20px}
	.kml-pcard__box{padding:12px 6% 12px}
}
@media (min-width:1200px){
	.kml-perk__grid{gap:clamp(28px,2.9vw,56px)}
	.kml-pcard__box{padding:clamp(12px,.8vw,16px) 7% clamp(12px,.8vw,16px)}
	.kml-page .kml-pcard__tags{font-size:clamp(12px,.7vw,14px)}
	.kml-page .kml-pcard__title{font-size:clamp(14px,.83vw,16px);margin-top:clamp(4px,.3vw,6px)}
	.kml-page .kml-pcard__desc{font-size:clamp(12.5px,.73vw,14px)}
}

/* =====================================================================
   7. NHẬN QUÀ
   ===================================================================== */
.kml-gift{background:#fff;padding:var(--kml-sec) 0}
.kml-gift__grid{display:grid;grid-template-columns:1fr;gap:20px;margin:0 auto}
.kml-gbox{display:flex;flex-direction:column;border-radius:var(--kml-radius);padding:32px 22px 30px;background:var(--kml-light);color:var(--kml-grey)}
.kml-gbox--navy{background:var(--kml-navy);color:#fff}
.kml-page .kml-gbox__title{font-weight:800;text-transform:uppercase;color:var(--kml-navy);font-size:var(--kml-fs-h2);line-height:1.2}
.kml-page .kml-gbox--navy .kml-gbox__title{color:#fff}
.kml-pills{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:22px;max-width:440px}
.kml-page .kml-pill{
	display:inline-flex;align-items:center;justify-content:center;min-width:110px;min-height:44px;padding:0 18px;
	border-radius:999px;font-weight:600;font-size:clamp(15px,1.11vw,22px);white-space:nowrap;
	background:var(--kml-navy);color:#fff;border:1.8px solid var(--kml-navy);
	transition:transform .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease;
}
.kml-page .kml-gbox--navy .kml-pill{background:#fff;color:var(--kml-navy);border-color:#D2D1D3}
.kml-page .kml-pill:hover{transform:translateY(-2px);background:var(--kml-lime);color:var(--kml-navy);border-color:var(--kml-lime)}
.kml-page .kml-gbox__list{margin-top:26px}
.kml-page .kml-gbox__list li{font-weight:300;font-size:var(--kml-fs-body);line-height:1.35;margin-bottom:12px}
.kml-gbox__btn{margin-top:auto;padding-top:16px}
@media (min-width:768px){
	.kml-gift__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1200px){
	.kml-gift__grid{gap:clamp(32px,3.4vw,64px)}
	.kml-gbox{min-height:clamp(520px,31.25vw,600px);padding:clamp(60px,4.25vw,82px) clamp(24px,1.8vw,34px) clamp(56px,3.8vw,73px) clamp(40px,2.75vw,53px)}
	.kml-pills{margin-top:clamp(30px,2.4vw,46px);gap:clamp(16px,1.25vw,24px) clamp(12px,.83vw,16px)}
	.kml-page .kml-pill{min-height:clamp(44px,2.45vw,47px);padding:0 clamp(16px,1vw,20px)}
	.kml-page .kml-pill--w{min-width:clamp(190px,11.5vw,221px)}
	.kml-page .kml-gbox__list{margin-top:clamp(36px,3.3vw,63px)}
	.kml-page .kml-gbox__list li{margin-bottom:clamp(12px,.95vw,18px)}
	.kml-page .kml-gbox__btn .kml-btn{min-width:clamp(260px,15.7vw,301px)}
}

/* =====================================================================
   8. HỎI ĐÁP
   ===================================================================== */
.kml-faq{background:#fff;padding:var(--kml-sec) 0;border-top:1px solid var(--kml-grey)}
.kml-faq__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.kml-page .kml-faq__tab{
	min-height:42px;padding:6px 16px;min-width:110px;border-radius:8px;
	border:1.4px solid var(--kml-navy2);background:#fff;color:var(--kml-navy);
	font-weight:600;text-transform:uppercase;font-size:var(--kml-fs-small);line-height:1.2;white-space:nowrap;
	transition:background-color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.kml-page .kml-faq__tab:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(15,40,93,.15)}
.kml-page .kml-faq__tab.is-active{background:var(--kml-lime);border-color:var(--kml-lime);box-shadow:none;transform:none}
.kml-faq__list{margin:28px auto 0}
.kml-faq__item{border-bottom:1.4px solid var(--kml-navy2);position:relative}
.kml-faq__item[hidden]{display:none}
.kml-faq__item::before{content:'';position:absolute;left:0;top:-1.4px;bottom:-1.4px;width:4px;background:var(--kml-lime);transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.kml-faq__item.is-open::before{transform:scaleY(1)}
.kml-page .kml-faq__q{
	display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
	min-height:60px;padding:16px 4px 16px 16px;margin:0;border:0;background:none;text-align:left;border-radius:0;
	font-weight:600;text-transform:none;color:var(--kml-navy);font-size:var(--kml-fs-body);line-height:1.35;
	transition:background-color .25s ease,color .25s ease,padding .25s ease;
}
.kml-page .kml-faq__q:hover{background:var(--kml-light)}
.kml-faq__item.is-open .kml-faq__q{background:var(--kml-light)}
.kml-faq__qtext{flex:1;min-width:0}
.kml-faq__no{display:inline}
.kml-faq__icon{flex:0 0 auto;position:relative;width:32px;height:32px;border-radius:50%;border:1.4px solid var(--kml-navy);transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
.kml-faq__icon::before,.kml-faq__icon::after{content:'';position:absolute;left:50%;top:50%;background:var(--kml-navy);border-radius:2px;transition:transform .3s ease}
.kml-faq__icon::before{width:12px;height:2px;margin:-1px 0 0 -6px}
.kml-faq__icon::after{width:2px;height:12px;margin:-6px 0 0 -1px}
.kml-page .kml-faq__q:hover .kml-faq__icon{border-color:var(--kml-navy);background:#fff}
.kml-faq__item.is-open .kml-faq__icon{background:var(--kml-lime);border-color:var(--kml-lime);transform:rotate(180deg)}
.kml-faq__item.is-open .kml-faq__icon::after{transform:scaleY(0)}
.kml-faq__a{overflow:hidden;height:0;transition:height .35s ease;background:var(--kml-light)}
.kml-faq__a-in{padding:0 60px 20px 16px}
.kml-page .kml-faq__a-in p{font-weight:300;color:var(--kml-grey);font-size:var(--kml-fs-body);line-height:1.55}
.kml-page .kml-faq__label{font-weight:600;color:var(--kml-navy)}
.kml-page .kml-faq__a-in strong{font-weight:600}
.kml-page .kml-faq__a-in em{font-style:italic}
@media (max-width:767px){
	.kml-faq__tabs{gap:8px}
	.kml-page .kml-faq__tab{min-width:0;padding:6px 12px;font-size:13px}
	.kml-faq__a-in{padding:0 16px 18px 16px}
	.kml-faq__icon{width:28px;height:28px}
}
@media (min-width:1200px){
	.kml-faq__tabs{gap:12px clamp(16px,1.35vw,26px)}
	.kml-page .kml-faq__tab{min-height:clamp(40px,2.14vw,41px);min-width:clamp(120px,7.25vw,139px);padding:0 clamp(12px,.9vw,18px)}
	.kml-faq__list{margin-top:clamp(28px,2.1vw,40px)}
	.kml-page .kml-faq__q{min-height:clamp(62px,3.5vw,67px);padding:14px 8px 14px 20px}
	.kml-faq__a-in{padding:0 80px 24px 20px}
}

/* =====================================================================
   9. CTA CUỐI TRANG
   ===================================================================== */
.kml-cta{background:var(--kml-navy2);color:#fff;text-align:center;padding:44px 0 48px}
.kml-page .kml-cta .kml-h2{color:#fff;margin-top:0}
.kml-page .kml-cta__sub{font-weight:300;color:#fff;font-size:var(--kml-fs-body);margin-top:8px}
.kml-cta__btn{margin-top:22px}
.kml-page .kml-cta .kml-btn:hover{background:#fff;color:var(--kml-navy)}
.kml-strip{height:28px;background:var(--kml-lime)}
@media (min-width:1200px){
	.kml-cta{padding:clamp(48px,2.85vw,55px) 0 clamp(52px,3.05vw,59px)}
	.kml-cta__btn{margin-top:clamp(26px,1.8vw,35px)}
	.kml-page .kml-cta .kml-btn{min-width:clamp(260px,15.7vw,301px)}
	.kml-strip{height:clamp(48px,3.75vw,72px)}
}

/* =====================================================================
   TRANG HƯỚNG DẪN ĐỔI QUÀ
   ===================================================================== */
.kml-guide{background:var(--kml-light);padding:var(--kml-sec) 0}
.kml-guide__grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.kml-page .kml-guide .kml-eyebrow{text-align:left}
.kml-page .kml-guide__title{font-weight:800;color:var(--kml-navy);text-transform:uppercase;font-size:var(--kml-fs-h2);line-height:1.22;margin-top:10px}
.kml-page .kml-guide__steps{margin-top:28px}
.kml-page .kml-guide__steps li{margin-bottom:22px}
.kml-page .kml-guide__steps li:last-child{margin-bottom:0}
.kml-page .kml-guide__sline{display:flex;gap:6px;font-weight:600;text-transform:uppercase;font-size:var(--kml-fs-body);line-height:1.3;color:var(--kml-navy)}
.kml-guide__sno{color:var(--kml-red);white-space:nowrap}
.kml-page .kml-guide__sdesc{font-weight:300;color:var(--kml-grey);font-size:var(--kml-fs-small);line-height:1.45;margin:6px 0 0 2.4em;max-width:440px}
.kml-videos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kml-video{position:relative;border-radius:var(--kml-radius);overflow:hidden;background:var(--kml-navy);aspect-ratio:386/669;color:#fff;transition:box-shadow .3s ease,transform .3s ease}
.kml-video:hover{box-shadow:0 0 0 3px rgba(227,244,42,.6),0 14px 34px rgba(15,40,93,.2);transform:translateY(-4px)}
.kml-video.is-playing{transform:none}
.kml-video__frame{position:absolute;inset:0}
.kml-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kml-page .kml-video__poster{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:var(--kml-navy);display:block;border-radius:0}
.kml-page .kml-video__poster img{width:100%;height:100%;object-fit:cover;opacity:.35;transition:transform .6s ease,opacity .3s ease}
.kml-video__poster:hover img{transform:scale(1.07);opacity:.5}
.kml-video__play{position:absolute;left:50%;top:48.7%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--kml-pct);transition:transform .3s ease;pointer-events:none}
.kml-video__play::after{content:'';position:absolute;left:50%;top:50%;margin:-13px 0 0 -8px;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.kml-video:hover .kml-video__play{transform:scale(1.12)}
.kml-page .kml-video__cap{position:absolute;left:0;right:0;bottom:0;padding:12px 10px 8%;text-align:center;pointer-events:none;font-weight:600;text-transform:uppercase;color:#F4F6F8;font-size:13px;line-height:1.25}
.kml-video.is-playing .kml-video__cap,.kml-video.is-playing .kml-video__play{display:none}
.kml-video__missing{position:absolute;left:12px;right:12px;top:60%;text-align:center;font-size:13px;color:#fff;opacity:.75}
@media (min-width:768px){
	.kml-page .kml-video__cap{font-size:clamp(14px,1.28vw,22px)}
}
@media (min-width:992px){
	.kml-guide__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,4vw,80px)}
	.kml-page .kml-guide__steps{margin-top:clamp(36px,3.6vw,68px)}
	.kml-page .kml-guide__steps li{margin-bottom:clamp(20px,1.6vw,31px)}
	.kml-videos{gap:clamp(14px,1.5vw,29px);max-width:801px;margin-left:auto;width:100%}
	.kml-video__play{width:clamp(52px,3.4vw,64px);height:clamp(52px,3.4vw,64px);margin:calc(clamp(52px,3.4vw,64px) / -2) 0 0 calc(clamp(52px,3.4vw,64px) / -2)}
	.kml-page .kml-video__cap{font-size:clamp(14px,1.05vw,20px)}
}

/* =====================================================================
   CĂN ĐỀU 2 BÊN (justify) cho các đoạn văn nội dung — cả 2 trang
   - Đoạn canh giữa (thẻ lợi ích, đặc quyền, mô tả dưới tiêu đề, CTA): justify, dòng cuối canh giữa
   - Đoạn canh trái (khối chữ banner, nhận quà, hỏi đáp, bước hướng dẫn): justify, dòng cuối canh trái
   - Tiêu đề, nhãn, nút, số %: giữ nguyên (không justify)
   ===================================================================== */
.kml-page .kml-sub,
.kml-page .kml-bcard__body,
.kml-page .kml-pcard__desc,
.kml-page .kml-cta__sub{text-align:justify;text-align-last:center;-webkit-hyphens:none;hyphens:none}
.kml-page .kml-split__desc,
.kml-page .kml-split__note,
.kml-page .kml-gbox__list li,
.kml-page .kml-faq__a-in p,
.kml-page .kml-guide__sdesc{text-align:justify;text-align-last:left;-webkit-hyphens:none;hyphens:none}