/* =========================================================================
   RT Landing Page — Dolphin
   Viết mobile-first: mặc định là bố cục điện thoại, media query mở rộng dần.
   ========================================================================= */

:root{
	--navy:#0E3C7B;
	--navy-d:#0A2E60;
	--blue:#2E7CE4;
	--blue-l:#5AA0F2;
	--blue-soft:#EAF3FD;
	--blue-soft-2:#DCEAFA;
	--pink:#EE5A92;
	--pink-d:#DC4680;
	--yellow:#FFD34E;
	--ink:#12365E;
	--muted:#5C7595;
	--line:#D8E6F6;
	--white:#fff;
	--radius:18px;
	--shadow:0 10px 30px rgba(14,60,123,.10);
	--shadow-lg:0 18px 50px rgba(14,60,123,.16);
}

*,*::before,*::after{box-sizing:border-box}

/*
 * Phải đứng trước mọi khai báo display khác: các phần tử điều khiển bằng
 * thuộc tính [hidden] (spinner, thông báo lỗi, khối cảm ơn) sẽ bị lộ ra
 * nếu một selector cùng độ ưu tiên đặt display cho chúng ở phía dưới.
 */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body.rtlp-body{
	margin:0;
	font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	color:var(--ink);
	background:#FBEAF0;
	line-height:1.55;
	font-size:15px;
	overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.2}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.rtlp-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}

/* Khung giữ chỗ khi chưa upload ảnh — để bố cục không vỡ lúc dựng trang */
.rtlp-ph{
	display:flex;align-items:center;justify-content:center;
	width:100%;min-height:120px;
	border:2px dashed var(--line);border-radius:12px;
	background:linear-gradient(135deg,#F5FAFF,#E9F3FE);
	color:#9DB6D4;font-size:12px;font-weight:600;text-align:center;padding:12px;
}

.rtlp-ico{width:100%;height:100%;display:block}

/* =============================== HERO =============================== */

.rtlp-hero{
	position:relative;
	background:linear-gradient(160deg,#F3F9FF 0%,#E4F0FD 45%,#D9E9FB 100%);
	background-size:cover;background-position:center;
	padding-bottom:28px;
}

/*
 * Khi có ảnh nền: phủ thêm một lớp sáng mờ dần từ trái sang phải. Chữ tiêu đề
 * nằm bên trái nên cần nền đục ở đó để đọc được, còn bên phải để lộ ảnh nhiều
 * hơn. Ảnh đi qua biến --rtlp-hero-bg nên lớp phủ vẫn nằm đè lên được.
 */
.rtlp-hero.has-bg{
	background-image:
		linear-gradient(102deg,
			rgba(255,255,255,.93) 0%,
			rgba(242,248,255,.80) 30%,
			rgba(228,240,253,.50) 56%,
			rgba(217,233,251,.34) 100%),
		var(--rtlp-hero-bg);
	background-size:cover,cover;
	background-position:center,center;
	background-repeat:no-repeat,no-repeat;
}

/* Làm mềm mép ảnh bé gái để nó hoà vào nền phòng thay vì lộ khung chữ nhật */
.rtlp-hero.has-bg .rtlp-hero-img{
	border-radius:20px;
	-webkit-mask-image:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 100%);
	mask-image:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 100%);
}

/*
 * Kiểu tràn viền: ảnh phòng học phủ kín đầu trang, chữ và form đè lên.
 *
 * Mobile: chữ trải gần hết chiều ngang nên phải phủ đục theo chiều dọc,
 * ảnh chỉ còn làm không khí. Desktop (bên dưới) đổi sang phủ ngang để lộ
 * bé gái và khung cửa sổ ở khoảng giữa.
 */
/*
 * MỚI: poster giờ là <img> (.rtlp-hero-poster) nên nền section chỉ còn màu dịu.
 * Mobile: banner (poster) hiển thị nguyên tấm NÉT phía trên, form nằm hẳn dưới.
 */
.rtlp-hero.is-bleed{
	background:linear-gradient(160deg,#F3F9FF 0%,#E7F1FD 55%,#DCEAFB 100%);
}

.rtlp-hero.is-bleed .rtlp-hero-mid{ text-align:center }

/* Badge "SỨ MỆNH" ẩn ở chế độ bleed vì bản thân poster đã có sẵn chữ "Sứ mệnh". */
.rtlp-hero.is-bleed .rtlp-badge{display:none}

/* Banner poster dạng ảnh thật — hiển thị nguyên tấm (tỉ lệ gốc 2.2:1), luôn
   sắc nét, không bị phủ tối. */
.rtlp-hero-poster{
	display:block;width:100%;height:auto;margin:0 auto;
	border-radius:16px;box-shadow:0 12px 30px rgba(14,60,123,.16);
}

.rtlp-topbar{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:14px 0;
}

.rtlp-logo-img{width:110px}
.rtlp-logo .rtlp-ph{min-height:44px;width:110px}

.rtlp-hotline{display:flex;align-items:center;gap:8px}
.rtlp-hotline-ico{
	flex:0 0 auto;width:32px;height:32px;padding:7px;border-radius:50%;
	background:var(--white);color:var(--blue);
	box-shadow:0 3px 10px rgba(14,60,123,.14);
}
.rtlp-hotline-txt{display:flex;flex-direction:column;line-height:1.15}
.rtlp-hotline-txt small{font-size:11px;color:var(--muted)}
.rtlp-hotline-txt strong{font-size:16px;color:var(--navy);font-weight:800;letter-spacing:.2px}

.rtlp-hero-grid{display:flex;flex-direction:column;gap:22px}

/* Mobile: tiêu đề/USP -> BANNER (poster) -> form ở dưới cùng */
.rtlp-hero-left{order:1}
.rtlp-hero-mid{order:2}
.rtlp-hero-right{order:3}

/*
 * Cỡ chữ trần được ghìm lại để tiêu đề mặc định vừa đúng một dòng trong cột hero.
 * text-wrap:balance để nếu khách đổi sang tiêu đề dài hơn thì chia đều hai dòng,
 * không bị mồ côi một từ ở dòng dưới.
 */
.rtlp-h1{display:flex;flex-direction:column;gap:2px;font-weight:800;letter-spacing:.2px}
.rtlp-h1-a,.rtlp-h1-b{text-wrap:balance}
.rtlp-h1-a{font-size:clamp(26px,6.6vw,34px);color:var(--navy)}
.rtlp-h1-b{font-size:clamp(24px,6.2vw,32px);color:var(--pink)}

.rtlp-h1-sub{
	margin-top:8px;font-size:clamp(12.5px,3.4vw,14px);font-weight:700;
	color:var(--blue);letter-spacing:.2px;text-wrap:balance;
}

.rtlp-quote{
	margin:14px 0 0;padding-left:12px;
	border-left:3px solid var(--blue-l);
	font-size:13.5px;font-style:italic;color:var(--muted);
}

.rtlp-usp{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin-top:18px}
.rtlp-usp li{display:flex;align-items:center;gap:9px}
.rtlp-usp-ico{
	flex:0 0 auto;width:34px;height:34px;padding:6px;
	color:var(--blue);background:rgba(255,255,255,.75);border-radius:10px;
}
.rtlp-usp-txt{display:flex;flex-direction:column;line-height:1.25}
.rtlp-usp-txt strong{font-size:13px;font-weight:700;color:var(--navy)}
.rtlp-usp-txt em{font-size:11.5px;font-style:normal;color:var(--muted)}

.rtlp-hero-mid{position:relative;text-align:center}
.rtlp-hero-img{margin:0 auto;border-radius:16px}
.rtlp-hero-mid .rtlp-ph{min-height:220px}

.rtlp-badge{
	display:inline-flex;flex-direction:column;align-items:center;gap:2px;
	margin-top:-18px;position:relative;
	padding:10px 20px;border-radius:14px;
	background:var(--white);border:2px solid var(--blue-soft-2);
	box-shadow:var(--shadow);
}
.rtlp-badge strong{font-size:20px;font-weight:800;color:var(--pink)}
.rtlp-badge span{font-size:11px;font-weight:700;color:var(--navy);line-height:1.25;text-align:center}

/* ------------------------------- Form ------------------------------- */

.rtlp-formbox{
	position:relative;
	background:linear-gradient(165deg,var(--navy) 0%,var(--navy-d) 100%);
	border-radius:var(--radius);
	padding:26px 18px 20px;
	box-shadow:var(--shadow-lg);
	scroll-margin-top:20px;
}

.rtlp-formbox-gift{
	position:absolute;top:-20px;right:16px;
	width:52px;height:52px;padding:11px;border-radius:14px;
	color:var(--navy);background:var(--yellow);
	box-shadow:0 8px 18px rgba(14,60,123,.28);
	transform:rotate(-8deg);
}

.rtlp-formbox-head{text-align:center;margin-bottom:16px}
.rtlp-formbox-t1{font-size:clamp(18px,5vw,22px);font-weight:800;color:var(--white);letter-spacing:.3px}
.rtlp-formbox-t2{font-size:clamp(18px,5vw,22px);font-weight:800;color:var(--yellow);letter-spacing:.3px}
.rtlp-formbox-sub{margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.82)}
/* Tach form khoi nen hero cho noi khoi, khong bi chen vao anh */
.rtlp-hero-right .rtlp-formbox{box-shadow:0 26px 60px rgba(8,30,66,.42),0 8px 22px rgba(8,30,66,.24)}

.rtlp-field{margin-bottom:9px}
.rtlp-field input{
	width:100%;height:44px;padding:0 14px;
	border:1px solid transparent;border-radius:10px;
	background:var(--white);color:var(--ink);
	font-family:inherit;font-size:14px;
	transition:border-color .15s,box-shadow .15s;
}
.rtlp-field input::placeholder{color:#9BB0C7}
.rtlp-field input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,211,78,.3)}
.rtlp-field input.rtlp-invalid{border-color:#FF8A8A;box-shadow:0 0 0 3px rgba(255,138,138,.25)}

/* Honeypot: giấu khỏi mắt người nhưng vẫn tồn tại với bot */
.rtlp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.rtlp-form-error{
	margin:2px 0 8px;padding:8px 11px;border-radius:8px;
	background:rgba(255,138,138,.16);color:#FFD9D9;
	font-size:12.5px;font-weight:600;
}

.rtlp-submit{
	position:relative;
	width:100%;height:50px;margin-top:6px;
	border:0;border-radius:11px;cursor:pointer;
	background:linear-gradient(180deg,var(--pink) 0%,var(--pink-d) 100%);
	color:var(--white);font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.4px;
	box-shadow:0 8px 20px rgba(220,70,128,.36);
	transition:transform .12s,box-shadow .12s,opacity .12s;
}
.rtlp-submit:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(220,70,128,.44)}
.rtlp-submit:active{transform:translateY(0)}
.rtlp-submit[disabled]{opacity:.7;cursor:not-allowed;transform:none}

.rtlp-spinner{
	display:inline-block;width:17px;height:17px;margin-left:9px;vertical-align:-3px;
	border:2.5px solid rgba(255,255,255,.35);border-top-color:var(--white);
	border-radius:50%;animation:rtlp-spin .7s linear infinite;
}
@keyframes rtlp-spin{to{transform:rotate(360deg)}}

.rtlp-privacy{
	display:flex;align-items:center;justify-content:center;gap:6px;
	margin-top:11px;font-size:11.5px;color:rgba(255,255,255,.75);
}
.rtlp-privacy .rtlp-ico{width:14px;height:14px;flex:0 0 auto}

/* Trạng thái cảm ơn — hiện tại chỗ, không chuyển trang để giữ event tracking */
.rtlp-thanks{text-align:center;padding:14px 4px 6px;animation:rtlp-fade .35s ease}
@keyframes rtlp-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rtlp-thanks-ico{
	width:56px;height:56px;margin:0 auto 12px;padding:13px;border-radius:50%;
	background:var(--yellow);color:var(--navy);
}
.rtlp-thanks-title{font-size:20px;font-weight:800;color:var(--yellow);margin-bottom:8px}
.rtlp-thanks-msg{font-size:13.5px;color:rgba(255,255,255,.88)}
.rtlp-thanks-call{
	display:inline-block;margin-top:16px;padding:12px 22px;border-radius:10px;
	background:var(--pink);color:var(--white);font-weight:800;font-size:14.5px;
}

/* ============================= SECTIONS ============================= */

.rtlp-sec{padding:38px 0}

.rtlp-h2{
	font-size:clamp(19px,5.2vw,28px);font-weight:800;color:var(--navy);
	text-align:center;letter-spacing:.3px;
}
.rtlp-sub{margin-top:7px;text-align:center;font-size:14px;color:var(--muted)}

/* ------------------------------ Lợi ích ------------------------------ */

.rtlp-benefit-grid{
	display:grid;grid-template-columns:1fr 1fr;gap:24px 14px;
	margin-top:26px;
}
.rtlp-benefit{text-align:center}
.rtlp-benefit-ico{
	display:block;width:52px;height:52px;margin:0 auto 12px;
	color:var(--blue);
}
.rtlp-benefit h3{font-size:13.5px;font-weight:800;color:var(--navy);margin-bottom:6px}
.rtlp-benefit p{font-size:12.5px;color:var(--muted)}

/* ----------------------- 2 Ô vuông ----------------------- */
.rtlp-tiles{background:transparent}
.rtlp-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:6px auto 0}
.rtlp-tile{
	position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
	display:flex;color:#fff;transition:transform .18s ease,box-shadow .18s ease;
}
.rtlp-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rtlp-tile--a{background:linear-gradient(150deg,#2E7CE4 0%,#0E3C7B 100%)}
.rtlp-tile--b{background:linear-gradient(150deg,#F27CA8 0%,#DC4680 100%)}
.rtlp-tile.has-img{background:var(--rtlp-tile-bg) center/cover no-repeat}
.rtlp-tile.has-img .rtlp-tile-t,.rtlp-tile.has-img .rtlp-tile-d{text-shadow:0 1px 6px rgba(0,0,0,.45)}
.rtlp-tile-body{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 22px}
.rtlp-tile.has-img .rtlp-tile-body{justify-content:flex-end}
.rtlp-tile-t{font-size:clamp(16px,2.4vw,20px);font-weight:800;margin-bottom:8px;color:#fff}
.rtlp-tile-d{font-size:13px;line-height:1.5;opacity:.95;max-width:30ch}
.rtlp-tile-btn{margin-top:16px;display:inline-block;background:var(--yellow);color:var(--navy-d);font-weight:800;font-size:13px;padding:10px 22px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.14)}
@media(max-width:560px){.rtlp-tile-grid{grid-template-columns:1fr;max-width:420px;gap:16px}}

/* ----------------------------- Quà tặng ----------------------------- */

.rtlp-gifts{position:relative;overflow:hidden;background:#E0F2F1}
.rtlp-gifts .rtlp-wrap{position:relative}

/* Confetti: một cụm SVG dùng hai lần, cụm phải lật ngang cho khỏi lặp y hệt */
.rtlp-confetti{
	position:absolute;top:-6px;z-index:0;
	width:min(230px,30%);pointer-events:none;user-select:none;
	opacity:.9;
}
.rtlp-confetti-svg{width:100%;height:auto;display:block}
.rtlp-confetti-l{left:-14px}
.rtlp-confetti-r{right:-14px;transform:scaleX(-1)}

.rtlp-h2-gift{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.rtlp-gift-deco{width:34px;height:34px;color:var(--pink);flex:0 0 auto}
.rtlp-gift-deco img{width:100%;height:100%;object-fit:contain}

/*
 * Hàng thẻ quà + hai hộp quà trang trí hai bên.
 * Dưới 1000px các thẻ đã chiếm trọn bề ngang nên ẩn hộp đi, bật lại ở
 * media query desktop cùng lúc với việc thu hẹp hàng thẻ để chừa chỗ.
 */
.rtlp-gift-row{position:relative;z-index:1}
.rtlp-gift-box{display:none;position:absolute;bottom:14%;width:8.5%;max-width:104px;height:auto;z-index:2;pointer-events:none}
.rtlp-gift-box-l{left:0}
.rtlp-gift-box-r{right:0}

.rtlp-gift-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}

.rtlp-gift{
	position:relative;
	background:var(--white);border:2px solid #F6D9E4;border-radius:14px;
	padding:26px 16px 18px;text-align:center;
	box-shadow:0 6px 18px rgba(14,60,123,.07);
}
.rtlp-gift-badge{
	position:absolute;top:-13px;left:50%;transform:translateX(-50%);
	padding:5px 18px;border-radius:6px;white-space:nowrap;
	background:var(--pink);color:var(--white);
	font-size:12px;font-weight:800;letter-spacing:.4px;
	box-shadow:0 5px 12px rgba(220,70,128,.3);
}
.rtlp-gift-img{height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.rtlp-gift-img img{max-height:120px;width:auto;object-fit:contain}
.rtlp-gift h3{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:4px}
.rtlp-gift p{font-size:13px;color:var(--pink);font-weight:700}

.rtlp-gift-note{margin-top:18px;text-align:center;font-size:12px;font-style:italic;color:var(--muted)}

/* ---------------------------- Sản phẩm ---------------------------- */

.rtlp-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:24px}

.rtlp-product{
	display:flex;flex-direction:column;
	background:var(--white);border-radius:14px;overflow:hidden;
	box-shadow:0 6px 18px rgba(14,60,123,.08);
}
.rtlp-product-img{aspect-ratio:1/1;overflow:hidden;background:var(--blue-soft)}
.rtlp-product-img img{width:100%;height:100%;object-fit:cover}
.rtlp-product-img .rtlp-ph{height:100%;border:0;border-radius:0}
.rtlp-product h3{
	flex:1 0 auto;padding:12px 10px 8px;
	font-size:12.5px;font-weight:800;color:var(--navy);text-align:center;
}
.rtlp-btn-sm{
	display:block;margin:0 12px 14px;padding:8px;border-radius:8px;
	background:var(--blue);color:var(--white);
	font-size:12px;font-weight:800;text-align:center;letter-spacing:.4px;
	transition:background .15s;
}
.rtlp-btn-sm:hover{background:var(--navy)}

/* ----------------------------- Cam kết ----------------------------- */

.rtlp-commit{padding:0 0 34px}
.rtlp-commit-grid{
	display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;
	padding:20px 16px;border-radius:16px;
	background:var(--blue-soft);
}
.rtlp-commit-grid li{display:flex;align-items:center;gap:9px}
.rtlp-commit-ico{flex:0 0 auto;width:30px;height:30px;color:var(--blue)}
.rtlp-commit-txt{display:flex;flex-direction:column;line-height:1.25}
.rtlp-commit-txt strong{font-size:11.5px;font-weight:800;color:var(--navy)}
.rtlp-commit-txt em{font-size:11.5px;font-style:normal;font-weight:700;color:var(--navy)}

/* --------------------------- Vì sao chọn --------------------------- */

.rtlp-why-grid{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.rtlp-why-list{display:flex;flex-direction:column;gap:18px}
.rtlp-why-list li{display:flex;gap:12px}
.rtlp-why-ico{
	flex:0 0 auto;width:40px;height:40px;padding:8px;border-radius:11px;
	color:var(--blue);background:var(--blue-soft);
}
.rtlp-why-txt{display:flex;flex-direction:column;gap:2px}
.rtlp-why-txt strong{font-size:14px;font-weight:800;color:var(--navy)}
.rtlp-why-txt em{font-size:12.5px;font-style:normal;color:var(--muted)}
.rtlp-why-img img{border-radius:14px;box-shadow:var(--shadow)}
.rtlp-why-img .rtlp-ph{min-height:180px}

/* ------------------------- Video (kiểu facade) ------------------------- */

/*
 * Trước khi bấm: chỉ là ảnh + nút play, không có iframe nào.
 * JS chèn iframe sau khi bấm — xem landing.js.
 */
.rtlp-video{
	position:relative;display:block;width:100%;padding:0;border:0;
	aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:pointer;
	background:#0B2545;box-shadow:var(--shadow);
}
.rtlp-video-poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,filter .3s}
.rtlp-video:hover .rtlp-video-poster{transform:scale(1.03);filter:brightness(.92)}

.rtlp-video-play{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	display:flex;align-items:center;justify-content:center;
	width:66px;height:66px;border-radius:50%;
	background:var(--pink);color:#fff;
	box-shadow:0 8px 24px rgba(220,70,128,.45);
	transition:transform .2s,background .2s;
}
.rtlp-video-play .rtlp-ico{width:30px;height:30px;fill:currentColor;stroke:none;margin-left:3px}
.rtlp-video:hover .rtlp-video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--pink-d)}
.rtlp-video:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.rtlp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ----------------------------- Báo chí ----------------------------- */

.rtlp-press{background:linear-gradient(180deg,#F7FBFF 0%,#EDF5FE 100%)}

.rtlp-slider{position:relative;margin-top:26px}

.rtlp-slider-track{
	display:flex;gap:16px;
	overflow-x:auto;scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	padding:4px 2px 10px;
	scrollbar-width:none;-ms-overflow-style:none;
}
.rtlp-slider-track::-webkit-scrollbar{display:none}

.rtlp-press-card{
	flex:0 0 86%;scroll-snap-align:center;
	display:flex;flex-direction:column;
	background:var(--white);border-radius:14px;overflow:hidden;
	box-shadow:0 6px 18px rgba(14,60,123,.10);
	transition:transform .18s,box-shadow .18s;
}
a.rtlp-press-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(14,60,123,.16)}

.rtlp-press-shot{aspect-ratio:4/3;overflow:hidden;background:var(--blue-soft)}
.rtlp-press-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.rtlp-press-shot .rtlp-ph{height:100%;border:0;border-radius:0}

.rtlp-press-body{padding:14px 16px 18px}
.rtlp-press-src{
	display:inline-block;margin-bottom:6px;padding:2px 9px;border-radius:20px;
	background:var(--blue-soft);color:var(--blue);
	font-size:11.5px;font-weight:700;
}
.rtlp-press-body h3{font-size:14px;font-weight:700;color:var(--navy);line-height:1.4}

.rtlp-slider-nav{
	position:absolute;top:38%;z-index:3;
	width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
	background:var(--white);color:var(--navy);
	font-size:26px;line-height:1;
	box-shadow:0 4px 14px rgba(14,60,123,.20);
	transition:background .15s,color .15s,opacity .15s;
}
.rtlp-slider-nav:hover{background:var(--blue);color:var(--white)}
.rtlp-slider-nav[disabled]{opacity:.35;cursor:default}
.rtlp-slider-prev{left:-6px}
.rtlp-slider-next{right:-6px}

.rtlp-slider-dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
.rtlp-slider-dot{
	width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:#BDD4EC;transition:background .2s,width .2s;
}
.rtlp-slider-dot.is-active{width:22px;border-radius:5px;background:var(--blue)}

/* ------------------------------ Footer ------------------------------ */

.rtlp-footer{background:linear-gradient(180deg,#EDF5FE 0%,#DFEDFB 100%);padding:30px 0}
.rtlp-footer-grid{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.rtlp-footer-logo img{width:140px;margin:0 auto}
.rtlp-footer-logo .rtlp-ph{width:140px;min-height:60px}
.rtlp-footer-txt h3{font-size:19px;font-weight:800;color:var(--navy)}
.rtlp-footer-tagline{margin:6px 0 10px;font-size:13px;font-weight:700;color:var(--blue)}
.rtlp-footer-txt p{font-size:12.5px;color:var(--muted)}
.rtlp-footer-copy{margin-top:12px;font-size:11.5px;color:#8AA2BE}

/* ------------------- Showroom + thông tin công ty (nền tối) ------------------- */

.rtlp-dark{
	background:#3A3A3A;color:#E9E9E9;
	padding:36px 0 42px;
	font-size:14px;
}
.rtlp-dark a{color:inherit}

.rtlp-showroom-head{
	display:flex;flex-direction:column;gap:14px;
	padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.18);
}
.rtlp-showroom-head h2{font-size:clamp(17px,4.6vw,22px);font-weight:800;color:#fff;letter-spacing:.3px}

.rtlp-region-tabs{display:flex;gap:10px;flex-wrap:wrap}
.rtlp-region-tab{
	padding:9px 20px;border:1px solid rgba(255,255,255,.45);border-radius:3px;cursor:pointer;
	background:transparent;color:#fff;
	font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.3px;
	transition:background .15s,border-color .15s;
}
.rtlp-region-tab:hover{background:rgba(255,255,255,.10)}
.rtlp-region-tab.is-active{background:#1668C1;border-color:#1668C1}

.rtlp-region-panel{display:none;padding-top:22px}
.rtlp-region-panel.is-active{display:block}

.rtlp-shop-grid{display:grid;grid-template-columns:1fr;gap:26px 34px}

.rtlp-shop h3{
	display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
	font-size:14.5px;font-weight:800;color:#3FA0F5;line-height:1.35;margin-bottom:9px;
}
.rtlp-shop-no{
	flex:0 0 auto;
	min-width:24px;padding:1px 5px;border:1px solid rgba(255,255,255,.55);border-radius:3px;
	color:#fff;font-size:11px;font-weight:700;text-align:center;
}
.rtlp-shop-addr{color:#DCDCDC;line-height:1.6;margin-bottom:5px}
.rtlp-shop-tel{color:#DCDCDC;margin-bottom:8px}
.rtlp-shop-tel a{font-weight:600}
.rtlp-shop-tel a:hover{color:#fff;text-decoration:underline}

.rtlp-shop-map{display:inline-flex;align-items:center;gap:5px;color:#F0B429;font-weight:600}
.rtlp-shop-map .rtlp-ico{width:15px;height:15px;flex:0 0 auto}
.rtlp-shop-map:hover{text-decoration:underline}

.rtlp-company{margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.rtlp-company h2{font-size:16px;font-weight:800;color:#fff;letter-spacing:.4px;margin-bottom:18px}
.rtlp-company-name{font-size:15px;font-weight:800;color:#fff;margin-bottom:14px}

.rtlp-company-list{display:flex;flex-direction:column;gap:11px}
.rtlp-company-list li{display:flex;align-items:flex-start;gap:10px;color:#DCDCDC;line-height:1.55}
.rtlp-company-list .rtlp-ico{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:#BFBFBF}
.rtlp-company-list a:hover{color:#fff;text-decoration:underline}

/* -------------------------- Thanh CTA mobile -------------------------- */

.rtlp-sticky{
	position:fixed;left:0;right:0;bottom:0;z-index:50;
	display:flex;gap:8px;padding:8px 10px;
	background:rgba(255,255,255,.96);
	border-top:1px solid var(--line);
	box-shadow:0 -4px 16px rgba(14,60,123,.10);
	padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.rtlp-sticky-call{
	display:flex;align-items:center;justify-content:center;gap:6px;
	flex:0 0 40%;height:44px;border-radius:10px;
	background:var(--blue-soft);color:var(--navy);
	font-size:13.5px;font-weight:800;
}
.rtlp-sticky-call .rtlp-ico{width:17px;height:17px;flex:0 0 auto}
.rtlp-sticky-cta{
	display:flex;align-items:center;justify-content:center;
	flex:1;height:44px;border-radius:10px;
	background:linear-gradient(180deg,var(--pink) 0%,var(--pink-d) 100%);
	color:var(--white);font-size:13.5px;font-weight:800;letter-spacing:.3px;
	box-shadow:0 5px 14px rgba(220,70,128,.32);
}
body.rtlp-has-sticky{padding-bottom:64px}

/* ============================== TABLET ============================== */

@media (min-width:640px){
	body.rtlp-body{font-size:16px}
	.rtlp-wrap{padding:0 24px}
	.rtlp-logo-img{width:140px}
	.rtlp-hotline-ico{width:38px;height:38px;padding:8px}
	.rtlp-hotline-txt strong{font-size:19px}

	.rtlp-usp{grid-template-columns:1fr 1fr;gap:14px}
	.rtlp-formbox{padding:30px 26px 24px}

	.rtlp-gift-grid{grid-template-columns:repeat(3,1fr);gap:20px}
	.rtlp-product-grid{grid-template-columns:repeat(4,1fr);gap:16px}
	.rtlp-commit-grid{grid-template-columns:repeat(4,1fr);gap:14px;padding:22px}
	.rtlp-benefit-grid{grid-template-columns:repeat(4,1fr);gap:20px}
	.rtlp-why-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
	.rtlp-footer-grid{flex-direction:row;text-align:left;gap:32px}
	.rtlp-footer-logo{flex:0 0 170px}

	.rtlp-press-card{flex-basis:calc((100% - 16px) / 2)}
	.rtlp-shop-grid{grid-template-columns:1fr 1fr}
	.rtlp-showroom-head{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
}

/* ============================== DESKTOP ============================== */

@media (min-width:1000px){
	.rtlp-hero{padding-bottom:46px}
	.rtlp-topbar{padding:20px 0}

	.rtlp-hero-grid{
		display:grid;
		grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(330px,.9fr);
		align-items:center;gap:24px;
	}
	.rtlp-hero-left,.rtlp-hero-mid,.rtlp-hero-right{order:0}
	.rtlp-hero-mid .rtlp-ph{min-height:320px}

	.rtlp-usp{grid-template-columns:1fr;gap:14px}
	.rtlp-usp-ico{width:38px;height:38px}
	.rtlp-usp-txt strong{font-size:14px}
	.rtlp-usp-txt em{font-size:12.5px}

	.rtlp-badge{position:absolute;left:0;bottom:6px;margin:0}
	.rtlp-badge strong{font-size:24px}
	.rtlp-badge span{font-size:12px}

	/*
	 * Tràn viền trên desktop: phủ trắng đậm ở dải trái nơi có chữ, nhạt dần
	 * về giữa để lộ bé gái và cửa sổ. Phần phải do hộp form navy che nên
	 * không cần phủ.
	 */
	/*
	 * Ảnh gốc rộng 3:2 nên nếu để cover thì lộ trọn chiều ngang, bé gái rơi
	 * đúng chỗ tiêu đề. Phóng lên 134% và neo mép phải để cắt bớt dải kệ sách
	 * bên trái — phần còn lại là mảng tường trống, chữ đặt lên đó mới đọc được.
	 * Neo dọc ở 16% để lấy cả trần và rèm, đẩy bé gái xuống dưới dòng tiêu đề.
	 */
	/* Desktop (MỚI): banner = poster ảnh thật cột trái–giữa (lớn, nét), form cột
	   phải trên nền sáng sạch, KHÔNG đè. H1/USP ẩn vì poster đã có tiêu đề. */
	.rtlp-hero.is-bleed{position:relative;padding-bottom:40px}
	.rtlp-hero.is-bleed .rtlp-hero-grid{display:block}
	.rtlp-hero.is-bleed .rtlp-hero-left{display:none}
	/* Poster tràn viền FULL màn hình (edge-to-edge, thiết kế cho 1920). */
	.rtlp-hero.is-bleed .rtlp-hero-mid{
		width:100vw;margin-left:calc(50% - 50vw);margin-bottom:28px;min-height:0;position:static;
	}
	.rtlp-hero.is-bleed .rtlp-hero-poster{border-radius:0;box-shadow:none}
	/* 1000–1365px: form nằm gọn dưới poster, căn giữa (chưa đủ rộng để đè). */
	.rtlp-hero.is-bleed .rtlp-hero-right{max-width:480px;margin:0 auto}

	.rtlp-sec{padding:56px 0}

	/* Thu hàng thẻ quà vào trong để hai hộp quà có chỗ đứng ở lề */
	.rtlp-gift-box{display:block}
	.rtlp-gift-row .rtlp-gift-grid{margin-left:10.5%;margin-right:10.5%}
	.rtlp-confetti{width:min(280px,24%);top:-18px}

	/* Kẻ vạch ngăn giữa các lợi ích như bản thiết kế */
	.rtlp-benefit{position:relative;padding:0 14px}
	.rtlp-benefit+.rtlp-benefit::before{
		content:'';position:absolute;left:0;top:14%;bottom:14%;
		width:1px;background:var(--line);
	}

	.rtlp-why-grid{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:40px}
	.rtlp-why-list{grid-template-columns:1fr}

	.rtlp-press-card{flex-basis:calc((100% - 32px) / 3)}
	.rtlp-slider-prev{left:-22px}
	.rtlp-slider-next{right:-22px}

	.rtlp-dark{padding:52px 0 58px}
	.rtlp-shop-grid{grid-template-columns:repeat(3,1fr);gap:30px 40px}
	.rtlp-company{margin-top:42px;padding-top:32px}

	.rtlp-sticky{display:none}
	body.rtlp-has-sticky{padding-bottom:0}
}

/*
 * Laptop 13" (1000–1199px): ba cột vẫn giữ được nhưng chật, nên bóp cột ảnh
 * và cỡ chữ tiêu đề lại để H1 không vỡ dòng xấu.
 */
@media (min-width:1000px) and (max-width:1199px){
	.rtlp-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr) minmax(300px,.85fr);gap:18px}
	.rtlp-h1-a{font-size:30px}
	.rtlp-h1-b{font-size:28px}
	.rtlp-hero-mid .rtlp-ph{min-height:260px}
	.rtlp-badge{padding:8px 14px}
	.rtlp-badge strong{font-size:20px}
}

/*
 * Màn rộng (thiết kế cho 1920): poster tràn viền, form ĐÈ lên đúng khoảng xanh
 * trống bên phải của poster — không lấn sang phần ảnh/nội dung bên trái.
 * Poster tỉ lệ 2000x908 (~45.4% cao so với rộng) nên tâm poster ≈ 86px(topbar)+22.7vw.
 */
@media (min-width:1366px){
	.rtlp-hero.is-bleed .rtlp-hero-mid{margin-bottom:0}
	.rtlp-hero.is-bleed .rtlp-hero-right{
		position:absolute;z-index:3;margin:0;
		right:3.2%;
		top:calc(86px + 22.7vw);
		transform:translateY(-50%);
		width:min(440px,24vw);
	}
}

@media (prefers-reduced-motion:reduce){
	*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 2026-10-20: text under tiles + under gift note */
.rtlp-tiles-note{max-width:880px;margin:22px auto 0;text-align:center;font-size:15px;line-height:1.6;color:#1f3a5f}
.rtlp-gift-note-more{max-width:880px;margin:8px auto 0;text-align:center;font-size:14px;line-height:1.6;color:#1f3a5f}
@media(max-width:639px){.rtlp-tiles-note{font-size:14px;margin-top:16px}.rtlp-gift-note-more{font-size:13px}}
.rtlp-richtext p{margin:0 0 .5em}.rtlp-richtext p:last-child{margin-bottom:0}.rtlp-richtext ul,.rtlp-richtext ol{text-align:left;display:inline-block;margin:0 0 .5em;padding-left:1.2em}.rtlp-richtext a{color:inherit;text-decoration:underline}