.ti1{display:block;line-height:0}
.ti1 img{width:100%;height:auto;display:block}
/* S2 */
.ti2{position:relative;width:100%;aspect-ratio:3072/2154;background:#0a1a12 center/cover no-repeat;container-type:inline-size}
.ti2-title{position:absolute;left:57.9%;top:24%;width:36.75%;height:auto;display:block}
.ti2-text{position:absolute;left:58.5%;top:54%;width:37%;color:#fdf6c2;font-family:'Gilroy',system-ui,Arial,sans-serif;font-weight:300;font-size:calc(1.214cqw*var(--ov-ti2t,1));line-height:1.6;text-align:justify}
.ti2-text p{margin:0 0 1em}
.ti2-text p:last-child{margin:0}
/* S3 */
.ti3{position:relative;width:100%;aspect-ratio:3072/2154;background:#04291a center/cover no-repeat;container-type:inline-size;overflow:hidden}
.ti3-title{position:absolute;left:4.5%;top:5%;width:42%;height:auto;display:block;z-index:3}
.ti3-text{position:absolute;left:65.7%;top:13.5%;width:31%;color:#fdf6c2;font-family:'Gilroy',sans-serif;font-weight:300;font-size:calc(1.43cqw*var(--ov-ti3t,1));line-height:1.5;z-index:3}
.ti3-stage{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:100%;height:0;padding-bottom:38%}
.ti3-item{position:absolute;top:50%;left:50%;width:54%;aspect-ratio:2064/1161;border-radius:14px;overflow:hidden;transform:translate(-50%,-50%);transition:transform .65s cubic-bezier(.22,.61,.36,1),opacity .65s,filter .65s;will-change:transform;backface-visibility:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ti3-item img{width:100%;height:100%;object-fit:cover;display:block}
.ti3-item.c{z-index:3}
.ti3-item.l{z-index:2;transform:translate(-50%,-50%) translateX(-52%) scale(.66);opacity:.42;filter:brightness(.5)}
.ti3-item.r{z-index:2;transform:translate(-50%,-50%) translateX(52%) scale(.66);opacity:.42;filter:brightness(.5)}
.ti3-item.l,.ti3-item.r{cursor:pointer}
.ti3-cap{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);z-index:4;color:#fdf6c2;font-family:'Gilroy',sans-serif;font-weight:300;font-size:calc(1.5cqw*var(--ov-ti3c,1));letter-spacing:.02em;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.ti3-btn{position:absolute;top:48%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid #fdf6c2;background:rgba(4,26,14,.5);color:#fdf6c2;font-size:20px;cursor:pointer;display:grid;place-items:center}
.ti3-btn.prev{left:8%}
.ti3-btn.next{right:8%}
@media(max-width:860px){
.ti2,.ti3{aspect-ratio:auto;padding:40px 20px}
.ti2-title,.ti2-text,.ti3-title,.ti3-text{position:static;width:auto}
.ti2-title{width:min(320px,80%);margin:0 0 16px}.ti2-text{font-size:14px;margin-top:0}
.ti3-title{width:min(300px,80%);margin:0 0 12px}.ti3-text{font-size:14px;margin-bottom:20px}
.ti3-stage{position:relative;left:auto;top:auto;transform:none;padding-bottom:64%}.ti3-item{width:82%}.ti3-item.l{transform:translate(-50%,-50%) translateX(-62%) scale(.7)}.ti3-item.r{transform:translate(-50%,-50%) translateX(62%) scale(.7)}.ti3-cap{font-size:15px}
}
.ftx{background:#062018 url(/assets/tien-ich/7116154aaa72.jpg) center/cover no-repeat;margin:0;padding:0}

/* ===== Backdrop gradient xanh — bọc .sub-canvas từ S2↓ (hero + footer giữ nguyên) ===== */
body[data-page="tien-ich"]{background:#011e10}
body[data-page="tien-ich"] .sub-canvas{background:#011e10 url(/assets/sub/sub-bg-v1.jpg) top center/100% 100% no-repeat}
body[data-page="tien-ich"] .ti3{background-color:transparent!important;background-image:none!important}
body[data-page="tien-ich"] .rmft{background:#001f11 !important}

/* Section 3: giảm chiều cao ~20% + căn đều lề-tiêu đề-slide-lề */
body[data-page="tien-ich"] .ti3{aspect-ratio:3072/1723}
body[data-page="tien-ich"] .ti3-title{top:8%}
body[data-page="tien-ich"] .ti3-stage{top:52%}
body[data-page="tien-ich"] .ti3-cap{bottom:5%}

/* Section 3: giảm thêm ~20% chiều cao + thu slide cho vừa + giãn caption + mũi tên tam giác/gạch 2 bên */
body[data-page="tien-ich"] .ti3{aspect-ratio:3072/1379}
body[data-page="tien-ich"] .ti3-title{top:7%}
body[data-page="tien-ich"] .ti3-stage{top:57%;padding-bottom:22%}
body[data-page="tien-ich"] .ti3-cap{bottom:13%;font-size:clamp(14px,1.25cqw,19px)}
/* mũi tên: tam giác + gạch ngang, 2 bên caption, click đổi slide */
body[data-page="tien-ich"] .ti3-btn{position:absolute;top:auto;bottom:12%;transform:none;width:6%;max-width:95px;height:14px;border:0;border-radius:0;background:none;font-size:0;color:transparent;cursor:pointer;z-index:6}
body[data-page="tien-ich"] .ti3-btn.prev{left:38.5%;right:auto}
body[data-page="tien-ich"] .ti3-btn.next{right:38.5%;left:auto}
body[data-page="tien-ich"] .ti3-btn::before{content:"";position:absolute;top:50%;height:1px;background:#fff;opacity:.9}
body[data-page="tien-ich"] .ti3-btn.prev::before{left:5px;right:0}
body[data-page="tien-ich"] .ti3-btn.next::before{right:5px;left:0}
body[data-page="tien-ich"] .ti3-btn::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;border:6px solid transparent}
body[data-page="tien-ich"] .ti3-btn.prev::after{left:0;border-right-color:#fff;border-left-width:0}
body[data-page="tien-ich"] .ti3-btn.next::after{right:0;border-left-color:#fff;border-right-width:0}
body[data-page="tien-ich"] .ti3-btn:hover::before{opacity:1}
body[data-page="tien-ich"] .ti3-btn:hover::after{filter:drop-shadow(0 0 2px #fff)}
/* Section 3: tiêu đề tùy chỉnh (Resort) đặt trên cùng, trên slide */
body[data-page="tien-ich"] .ti3 .rm-ct{position:absolute;top:12%;left:0;right:0;width:auto;z-index:5;text-align:center}

body[data-page="tien-ich"] .ti3-item{width:40%}

/* ===== Đồng bộ ti3 theo px cố định: top 100, tiêu đề→slide 71, slide→đáy 71; auto-height ===== */
body[data-page="tien-ich"] .ti3{aspect-ratio:auto;overflow:visible;padding:100px 0 71px;display:block}
body[data-page="tien-ich"] .ti3 .rm-ct{position:static;transform:none;margin:0 auto 71px}
body[data-page="tien-ich"] .ti3-stage{position:relative;left:auto;top:auto;transform:none;margin:0 auto}
body[data-page="tien-ich"] .ti3-cap{bottom:26px}
body[data-page="tien-ich"] .ti3-btn{bottom:20px}

/* S3 Resort: các thẻ coverflow ngoài cùng (far-r) vượt mép phải trên màn >=1920 / 2K -> cắt trong section,
   tránh trang rộng hơn màn hình (Mac trackpad vuốt ngang được, chụp/scroll lệch) */
@media (min-width:769px){ body[data-page="tien-ich"] section.ti3{ overflow:hidden; } @supports (overflow:clip){ body[data-page="tien-ich"] section.ti3{ overflow:clip; } } }