/* ==================================================
   Hero nhân vật động + phong cách pastel
   (dựa trên hero SVG: nền trắng, xanh pastel rgb(199,226,205))
   ================================================== */

:root {
    --pastel-green: #c7e2cd;
    --pastel-green-soft: #e8f4eb;
    --pastel-green-deep: #9fcaa9;
    --pastel-ink: #22332a;
    /* Satoshi toàn site; glyph tiếng Việt thiếu sẽ fallback sang Be Vietnam Pro */
    --title-font: 'Satoshi', 'Be Vietnam Pro', Helvetica, Arial, sans-serif;
    --body-font: 'Satoshi', 'Be Vietnam Pro', Helvetica, Arial, sans-serif;
    --main-font: 'Satoshi', 'Be Vietnam Pro', Helvetica, Arial, sans-serif;
}

body, h1, h2, h3, h4, h5, h6,
header div#logo,
input, textarea, select, button {
    font-family: 'Satoshi', 'Be Vietnam Pro', Helvetica, Arial, sans-serif;
}

/* --- iframe nhân vật động --- */
.hero-character-frame {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    aspect-ratio: 1344 / 881;
    overflow: hidden;
    pointer-events: none; /* không chặn tương tác trang */
}

/* bản crop=char (chỉ nhân vật): khung hình vuông hơn */
.hero-character-frame.char {
    aspect-ratio: 1180 / 850;
}

/* --- iframe nhân vật thao tác bảng điều khiển (hero-person) --- */
.hero-person-frame {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    aspect-ratio: 1330 / 920;
    overflow: hidden;
    pointer-events: none;
}

/* --- hero trang chủ: nền sạch theo phong cách pastel --- */
#section-hero.hero-pastel {
    background: #ffffff !important;
    background-image: none !important;
    position: relative;
    overflow: hidden;
}

#section-hero.hero-pastel::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -140px;
    top: -120px;
    background: var(--pastel-green-soft);
    border-radius: 50%;
    z-index: 0;
}

#section-hero.hero-pastel::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -80px;
    bottom: 10%;
    background: var(--pastel-green);
    opacity: .45;
    border-radius: 50%;
    z-index: 0;
}

#section-hero.hero-pastel > .container,
#section-hero.hero-pastel > .v-center {
    position: relative;
    z-index: 1;
}

#section-hero.hero-pastel h1,
#section-hero.hero-pastel p {
    color: var(--pastel-ink);
}

/* --- subheader / hero trang con: thiết kế lại theo hero pastel --- */
.subheader-pastel {
    background: linear-gradient(180deg, #ffffff 0%, var(--pastel-green-soft) 100%) !important;
    background-image: none;
    position: relative;
    overflow: hidden;
}

.subheader-pastel h1,
.subheader-pastel h2,
.subheader-pastel p,
.subheader-pastel .lead,
.subheader-pastel .crumb,
.subheader-pastel .crumb a {
    color: var(--pastel-ink) !important;
}

/* khối bo góc pastel giống thẻ trong hero SVG */
.subheader-pastel::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    left: -90px;
    top: -110px;
    background: var(--pastel-green);
    opacity: .5;
    border-radius: 34% 66% 62% 38% / 45% 40% 60% 55%;
}

.subheader-pastel::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: 8%;
    bottom: -90px;
    background: var(--pastel-green);
    opacity: .35;
    border-radius: 62% 38% 40% 60% / 55% 62% 38% 45%;
}

.subheader-pastel > .container,
.subheader-pastel .center-y {
    position: relative;
    z-index: 1;
}

/* nhân vật nhỏ trang trí ở subheader trang con */
.subheader-character {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    opacity: .95;
    z-index: 0;
    pointer-events: none;
}

.subheader-character iframe {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    aspect-ratio: 1180 / 850;
}

/* --- bản dark vẫn giữ chất pastel (dùng cho 404-dark) --- */
.subheader-pastel-dark {
    background: linear-gradient(180deg, #1c2620 0%, #22332a 100%) !important;
    position: relative;
    overflow: hidden;
}

.subheader-pastel-dark::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    left: -90px;
    top: -110px;
    background: var(--pastel-green-deep);
    opacity: .25;
    border-radius: 34% 66% 62% 38% / 45% 40% 60% 55%;
}

.subheader-pastel-dark::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: 8%;
    bottom: -90px;
    background: var(--pastel-green);
    opacity: .15;
    border-radius: 62% 38% 40% 60% / 55% 62% 38% 45%;
}

.subheader-pastel-dark > .container,
.subheader-pastel-dark .center-y {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .subheader-character { display: none; }
}

/* --- sửa lệch/tràn ngang trên mobile --- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* menu desktop ẩn hẳn trên mobile, chỉ hiện khi bấm hamburger */
@media (max-width: 992px) {
    header #mainmenu {
        display: none;
    }

    /* khi mở menu: header thành cột dọc gọn gàng, logo trên cùng, nút ☰ góc phải */
    header.menu-open {
        background: #ffffff !important;
    }

    header.menu-open .de-flex,
    header.menu-open .de-flex-col {
        display: block;
        width: 100%;
        height: auto;
    }

    header.menu-open #logo {
        padding: 6px 0;
        text-align: left;
    }

    /* nút Client Area: ẩn mặc định trên mobile, chỉ hiện khi mở menu */
    header .menu_side_area .btn-client-area {
        display: none;
    }

    header.menu-open .menu_side_area {
        position: static;
    }

    /* giữ nút ☰ ở góc phải trên khi menu mở */
    header.menu-open #menu-btn {
        position: absolute;
        top: 14px;
        right: 18px;
        z-index: 99;
    }

    header.menu-open .menu_side_area .btn-client-area {
        display: block;
        margin: 0 0 25px;
        text-align: center;
    }

    header.menu-open #mainmenu {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        max-height: 75vh;
        overflow-y: auto;
        padding: 10px 0 30px;
        margin-top: 10px;
        background: #fff;
    }

    header.menu-open #mainmenu li a {
        color: var(--pastel-ink);
    }
}

.hero-character-frame,
.hero-person-frame {
    max-width: 100%;
}

@media (max-width: 767px) {
    /* ẩn topbar (phone/email) trên màn hình nhỏ cho gọn */
    #topbar { display: none; }

    /* tiêu đề hero co lại vừa màn hình */
    #section-hero.hero-pastel h1 {
        font-size: 32px;
        line-height: 1.22;
        letter-spacing: -0.5px;
        word-wrap: break-word;
    }

    #section-hero.hero-pastel .lead {
        font-size: 15px;
    }

    /* hàng giá domain tự xuống dòng gọn gàng */
    .domain-ext .ext {
        margin: 0 6px 8px 0;
        padding: 8px;
    }

    /* khung nhân vật laptop không vượt quá màn hình */
    .hero-character-frame {
        width: 100%;
        max-width: 100vw;
    }

    /* hero nhân vật 2 tay: full-bleed toàn chiều ngang màn hình */
    .hero-person-frame {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
    }
}


/* --- mobile: can chinh khoang cach dai logo doi tac --- */
@media (max-width: 767px) {
    /* bot khoang trong duoi hero -> logo doi tac khong bi day xuong thap */
    #section-hero.hero-pastel { padding-bottom: 40px; }
    #section-hero.hero-pastel .spacer-double { height: 20px; }

    /* day minh hoa ben duoi ra xa dai logo, giu khung om sat logo */
    .partner-logo-frame { margin-bottom: 60px; }
}