/* Ẩn scrollbar nhưng vẫn cuộn */
:root {
    --height: calc(100vh)
}

@font-face {
    font-family: "OPPOSansVN";
    src: url("../fonts/OPPOSans-VN-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OPPOSansVN";
    src: url("../fonts/OPPOSans-VN-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OPPOSansVN";
    src: url("../fonts/OPPOSans-VN-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: "OPPOSansVN", sans-serif;
}

body {
    background: #E4F3FD;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.main {
    /* height: var(--height); */
}

.main {
    display: flex;
    height: 100svh;
    width: auto;
}

.panel {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    width: auto;
    height: 100svh;
}

.panel1 img {
    height: var(--height);
}

/* Helpers chung */
.card {
    position: absolute;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(12, 36, 76, .18);
    overflow: hidden
}

.card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.badge {
    letter-spacing: .14em;
    text-transform: uppercase
}

.text-body {
    font-size: 1.05rem;
    line-height: 1.75
}

/* -------- Panel Intro: khung pixel 1440×900 để bám sát thiết kế -------- */
/* .frame {
            position: relative;
            width: 1440px;
            height: 900px;
            margin: 0 auto;
            transform-origin: top center
        } */

@media (max-width:1440px) {
    .frame {
        transform: scale(calc(100vw / 1440));
        height: calc(900px * (100vw / 1440))
    }
}

@media (max-width:768px) {
    .frame {
        transform: none;
        width: 100vw;
        height: auto;
        padding: 24px
    }

    .card {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin-bottom: 16px
    }

    .round-stamp {
        display: none
    }
}



/* ===================== PANEL 2 — Nha Trang (artboard 4100×1600) ===================== */
/* Scale theo chiều cao viewport: s = 100svh / 1600
   Ba cột: 714 / 2027 / 1359 (px artboard), ảnh đặt theo (x hoặc rx, y) của artboard. */

#p2 {
    --W: 4100;
    --H: 1600;
    --s: calc(100svh / var(--H));
    /* scale theo viewport height */

    /* Bố cục 3 cột theo px artboard */
    --col1: 1600;
    /* trái */
    --col3: 1360;
    /* phải */
    --gapX: 0;
    /* nếu có gap giữa cột trong file, nhập px artboard tại đây */
    --padX: 0;
    /* padding trái/phải artboard nếu có */
    --padY: 0;
    /* padding trên/dưới artboard nếu có */

    /* Cột giữa = tổng - (trái + phải + gaps + paddings) */
    --col2: calc(var(--W) - (var(--col1) + var(--col3)) - (2 * var(--gapX)) - (2 * var(--padX)));

    /* Kích thước panel theo tỉ lệ artboard (nếu bạn đã set bằng Tailwind thì block này vẫn an toàn) */
    height: 100svh;
    width: calc(100svh * (var(--W) / var(--H)));
    --articleTop: 675;
    /* px artboard */
    --articleLeftOffset: 129;
    /* px lệch trái so với mép trái cột 2 / tiêu đề */
    --articleWidth: 1029;
    /* bề rộng max khối văn bản (px artboard) */
    --padY2: 165;

    --titleX: 1652;
    /* mép trái chữ "Nha Trang" theo artboard */
}

/* Khung 3 cột đúng tỉ lệ (cho text/khối nội dung) */
#p2 .p2-inner {
    height: 100%;
    display: grid;
    grid-template-columns:
        calc(var(--col1) * var(--s)) calc(var(--col2) * var(--s)) calc(var(--col3) * var(--s));
    gap: calc(var(--gapX) * var(--s));
    padding: calc(var(--padY) * var(--s)) calc(var(--padX) * var(--s));
    position: relative;

    /* Trang trí tuỳ chọn */
    /* background: linear-gradient(#f2f8ff, #e9f4ff); */
    /* border-radius: 24px; */
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, .12); */
}

/* Vùng cột chứa text (giữa) và placeholder trái/phải */
#p2 .p2-col {
    /* để static để ảnh absolute bám .p2-inner (full artboard) */
    position: static;
    height: 100%;
}

#p2 .p2-center {
    padding-top: calc(var(--padY2) * var(--s));
    position: relative;
    z-index: 5;
    /* text nổi trên ảnh */
    display: grid;
    align-content: start;
    gap: 1rem;
}

#p2 .p2-center h1 {
    font-size: calc(230 * var(--s));
}

#p2 .nt-article-abs {
    position: absolute;
    z-index: 6;

    /* top = (675 - padY) * s */
    top: calc((var(--articleTop) - var(--padY)) * var(--s));

    /* left = (titleX - 129 - padX) * s */
    /* left: calc((var(--titleX) - 129 - var(--padX)) * var(--s)); */
    left: calc(-129 * var(--s));
    width: calc(var(--articleWidth) * var(--s));
}

/* STYLE TYPO NHƯ FIGMA */
#p2 .nt-article-abs h3 {
    margin: 0 0 calc(12 * var(--s)) 0;
    font-weight: 700;
    /* bold */
    font-size: calc(76 * var(--s));
    /* 76px @1600 */
    line-height: 1.55;
    /* 155% */
    letter-spacing: -0.03em;
    /* -3% */
}

#p2 .nt-article-abs p {
    font-size: calc(30 * var(--s));
    color: #154D71;
}


/* Ảnh (card) — kích thước theo file + vị trí theo (x|rx, y) của artboard */
#p2 .p2-card {
    position: absolute;

    /* reset ngang để tránh bị dính right:0/left:0 từ rule khác */
    left: auto;
    right: auto;

    /* Y theo artboard, có bù padY nếu có */
    top: calc((var(--y) - var(--padY)) * var(--s));

    /* kích thước thẻ ảnh (polaroid) */
    width: calc(var(--w) * var(--s));
    height: calc(var(--h) * var(--s));
    box-sizing: border-box;
    /* để padding không làm sai số đo khung */

    /* xoay ảnh, gốc xoay tuỳ theo neo trái/phải (xem .use-left / .use-right) */
    transform: rotate(calc(var(--r, 0) * 1deg));
    transform-origin: top left;
    /* sẽ đổi sang top right khi .use-right */
    will-change: transform;
    z-index: 2;

    /* style thẻ */
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(20, 35, 70, .15);
    overflow: hidden;
}

/* Neo theo mép trái của artboard: dùng --x (px artboard) */
#p2 .p2-card.use-left {
    left: calc((var(--x) - var(--padX)) * var(--s));
    right: auto;
    transform-origin: top left;
}

/* Neo theo mép phải của artboard: dùng --rx (px artboard) */
#p2 .p2-card.use-right {
    /* left = (W - rx - w - padX) * s */
    left: calc((var(--W) - var(--rx) - var(--w) - var(--padX)) * var(--s));
    right: auto;
    transform-origin: top left;
    /* xoay quanh mép trái vì ta đã tính left tuyệt đối */
}

/* Ảnh bên trong thẻ */
#p2 .p2-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* ================= PANEL 3 (artboard 4100×1600, scale theo viewport height) ================= */
/* ================= PANEL 3 (artboard 4100×1600) ================= */
#p3 {
    /* scale theo chiều cao viewport */
    --H: 1600;
    --s: calc(100svh / var(--H));

    /* bề rộng nội dung panel (px figma) */
    --PW: 1750;
    /* panel width */
    height: 100svh;
    width: calc(var(--PW) * var(--s));

    /* Cột trái + gallery */
    --colL: 980;
    /* cột 1 = 980px */
    --imgW: 318.67;
    /* width mỗi ảnh trong hàng 2 */
    --gapL: calc((var(--colL) - 3*var(--imgW)) / 2);
    /* gap giữa 3 ảnh để khít 980 */

    /* Khoảng cách/padding & cột phải */
    --padX: 0;
    /* padding trái/phải toàn panel (nếu có) */
    --padY: 0;
    /* padding trên/dưới toàn panel (nếu có) */
    --colGap: 80;
    /* khoảng cách giữa 2 cột (px figma) */
    --colR: calc(var(--PW) - var(--colL) - (2*var(--padX)) - var(--colGap));
    /* cột phải */

    --leftTextY: 326;
    /* px theo Figma */
    --leftGap: 45;
    /* px giữa text và cụm ảnh */

    --imgR: 600;
}

/* Lưới 2 cột: trái 980px, phải phần còn lại của 1750px */
#p3 .p3-inner {
    height: 100%;
    display: grid;
    grid-template-columns:
        calc(var(--colL) * var(--s)) calc(var(--colR) * var(--s));
    column-gap: calc(var(--colGap) * var(--s));
    padding: calc(var(--padY) * var(--s)) calc(var(--padX) * var(--s));

    /* nền nếu cần: bật 1 trong 2 dòng dưới */
    /* background: linear-gradient(#eff7ff, #e6f3ff); */
    /* background: transparent; */
}

/* Cột trái có 2 hàng: text + gallery 3 ảnh */
#p3 .p3-left {
    display: grid;
    grid-template-rows: auto 1fr;
    /* khoảng giữa 2 hàng */
    padding-top: calc((var(--leftTextY) - var(--padY)) * var(--s));
}

#p3 .p3-text {
    /* style thêm cho đoạn văn tùy bạn */
}

/* Hàng 2: 3 ảnh width cố định 318.67, height auto theo tỉ lệ ảnh */
#p3 .p3-photos {
    display: grid;
    grid-template-columns: repeat(3, calc(var(--imgW) * var(--s)));
    column-gap: calc(var(--gapL) * var(--s));
    /* = (980 - 3*318.67)/2 */
    align-content: space-between;
    /* muốn dồn xuống đáy cột trái */
}

#p3 .p3-photos img {
    width: calc(var(--imgW) * var(--s));
    height: auto;
    /* giữ tỉ lệ ảnh gốc */
    display: block;
    object-fit: cover;
    /* bỏ nếu không muốn cắt */
    border-radius: 0;
    box-shadow: none;
}

/* Cột phải: bạn tự bố trí nội dung (quote, text…) */
#p3 .p3-right {
    height: 100%;
}

.p3-topimg {
    padding: 0 35px;
}

#p3 .p3-topimg {
    margin-bottom: calc(24 * var(--s));
}

#p3 .p3-topimg img {
    width: calc(var(--imgR) * var(--s));
    /* = 600 * (100svh/1600) */
    height: auto;
    /* giữ tỉ lệ */
    display: block;
    border-radius: 0;
    box-shadow: none;
}


/* ================= PANEL 5 (artboard 1600, width 3263) ================= */
#p5 {
    --H: 1600;
    --s: calc(100svh / var(--H));

    /* panel width */
    --PW: 3263;
    height: 100svh;
    width: calc(var(--PW) * var(--s));

    /* 3 cột theo Figma */
    --col1: 1495;
    --col2: 1177;
    --col3: 600;

    /* padding/gap (px Figma, chỉnh nếu cần) */
    --padX: 0;
    --padY: 0;
    /* Tính 2 khoảng gap để tổng = 3263 */
    --gapX: calc((var(--PW) - (var(--col1) + var(--col2) + var(--col3)) - 2*var(--padX)) / 2);
    --spill: 200;



    /* gap giữa cột 1 và 2 = 0 để "xát" nhau */
    --gap12: 80;

    /* gap giữa cột 2 và 3 tự tính để đủ tổng width */
    --gap23: calc(var(--PW) - (var(--col1Vis) + var(--col2) + var(--col3)) - 2*var(--padX) - var(--gap12));
    --col1Vis: 1093; 
}

#p5 .p5-inner {
    height: 100%;
  position: relative;
  display: grid;
  grid-template-columns:
    calc(var(--col1Vis) * var(--s))
    calc(var(--gap12) * var(--s))
    calc(var(--col2)   * var(--s))
    calc(var(--gap23)  * var(--s))
    calc(var(--col3)   * var(--s));
  column-gap: 0;
  padding: calc(var(--padY) * var(--s)) calc(var(--padX) * var(--s));
}

/* Cột 1 & 2: text trên, ảnh dưới (fluid theo cột) */
#p5 .p5-col {
    position: relative;
    z-index: 5;
}

#p5 .p5-col img {
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

/* Ảnh cột 3: width 600, y = 111; không bo góc/bóng */
#p5 .p5-img {
    position: absolute;
    top: calc((var(--y) - var(--padY)) * var(--s));
    width: calc(var(--w) * var(--s));
    height: auto;
    left: auto;
    right: auto;
    transform-origin: top left;
    z-index: 2;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#p5 .p5-img img {
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

/* LEFT của ảnh cột 3 = bắt đầu cột 3 */
/* Đặt mỗi cột vào đúng track */
#p5 .p5-col1{ grid-column: 1; }
#p5 .p5-col2{ grid-column: 3; }
#p5 .p5-col3{ grid-column: 5; }

#p5 .p5-img.c3{
  left: calc((var(--padX) + var(--col1Vis) + var(--gap12) + var(--col2) + var(--gap23)) * var(--s));
}
img{max-height:calc(100vh - 44px);}
.panel{margint-top:44px;}
.box-section{
    margin-top:44px;
}        
.overlayads {height:calc(100vh - 44px) !important;max-height: 100vh;}
.box-section p,.box-section h1, .box-section div, .box-section span, .box-section *{
    font-family: OPPOSansVN;
}