@import url("common.css?v=2326eb1b");
@import url("animation.css?v=7655cd33");

html {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.with-scrollbar {
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

.font-esthetic {
    /* Sacramento khong co subset tieng Viet -> doi sang Great Vibes (co vietnamese). */
    font-family: 'Great Vibes', 'Dancing Script', cursive !important;
}



.img-center-crop {
    width: 13rem;
    height: 13rem;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

html[data-bs-theme="dark"] .btn-transparent {
    background-color: rgba(var(--bs-dark-rgb), 0.5) !important;
    backdrop-filter: blur(0.5rem);
}

html[data-bs-theme="light"] .btn-transparent {
    background-color: rgba(var(--bs-light-rgb), 0.5) !important;
    backdrop-filter: blur(0.5rem);
}

.loading-page {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1056;
}

html[data-bs-theme="light"] .color-theme-svg {
    color: rgb(255, 255, 255);
    background-color: var(--bs-light);
}

html[data-bs-theme="dark"] .color-theme-svg {
    color: rgb(0, 0, 0);
    background-color: var(--bs-dark);
}

html[data-bs-theme="light"] .bg-light-dark {
    background-color: rgb(var(--bs-light-rgb));
}

html[data-bs-theme="dark"] .bg-light-dark {
    background-color: rgb(var(--bs-dark-rgb));
}

html[data-bs-theme="light"] .bg-white-black {
    background-color: rgb(var(--bs-white-rgb));
}

html[data-bs-theme="dark"] .bg-white-black {
    background-color: rgb(var(--bs-black-rgb));
}

.bg-cover-home {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(0.5turn, transparent, black 40%, black 60%, transparent);
}

.width-loading {
    width: 25%;
}

.cursor-pointer {
    cursor: pointer;
}

@media screen and (max-width: 992px) {
    .width-loading {
        width: 50%;
    }
}

@media screen and (max-width: 576px) {
    .width-loading {
        width: 75%;
    }
}

svg {
    display: block;
    line-height: 0;
    shape-rendering: geometricPrecision;
    backface-visibility: hidden;
}

.svg-wrapper {
    overflow: hidden !important;
    transform: translateZ(0) !important;
}

.no-gap-bottom {
    margin-bottom: -0.75rem !important;
}

/* ---------------------------------------------------------------
   Man hinh mo thiep (#welcome): anh nen full khung.
   Anh 2:3 nen tren man hinh 9:16 se bi crop hai ben - phong nen
   rem o hai canh nen crop khong lam mat chu re / co dau.
   --------------------------------------------------------------- */
/* Khung chua anh nen man hinh mo thiep.
   Dien thoai: phu kin chieu rong.
   Khong dung cong thuc vh cho ca hai truong hop: ti le man hinh dien thoai
   thay doi (375x812 = 0.462, 375x667 = 0.562) nen bat ky he so vh co dinh
   nao cung se hut vai px o mot so may -> ho vien hai ben. */
.welcome-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
}

/* Tu breakpoint sm tro len (dung moc site chuyen sang layout 2 cot): dong
   khung anh lai theo ti le ~9:19.5 giong khung nhin dien thoai.
   - Desktop 1990x990: khung 455x990, anh 1600x2400 THU NHO 0.41x -> net,
     bo cuc y het ban mobile (cat 31% chieu ngang, 0% chieu doc).
   Bo cach keo full-bleed vi anh 2:3 phu kin man 1990x990 phai PHONG 1.66x
   (mo nhoe) va cat mat 67% chieu doc. */
@media (width >= 576px) {
    .welcome-frame {
        width: min(100%, max(20rem, 46vh));
    }
}

/* Nen phia sau khung anh tren man hinh rong: anh 48x72 phong to + blur,
   chi ton ~766 byte va khong can net vi da lam mo. */
.welcome-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../assets/images/welcome-bg-blur.webp?v=1177e05d");
    background-position: center;
    background-size: cover;
    filter: blur(2.5rem) brightness(0.45);
    transform: scale(1.15);
}

.welcome-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Scrim lam toi nhe de chu trang luon doc duoc, bat ke anh sang toi. */
.welcome-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Do dam do bang cach lay mau luminance thuc te cua anh nen: phong rem
       kem rat sang nen scrim nhe (0.15) chi cho tuong phan 1.4:1 - chu trang
       gan nhu chim. Muc duoi dat toi thieu 4:1 o moi vung co chu. */
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.52) 0%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.57) 60%,
            rgba(0, 0, 0, 0.62) 100%);
}

.welcome-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.55);

    /* Day khoi chu xuong ~24px so voi tam man hinh de khong de len mat
       co dau / chu re (dau hai nguoi nam o khoang 30-38% chieu cao anh). */
    transform: translateY(1.5rem);
}

.welcome-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.welcome-name {
    font-size: 2.6rem;
    line-height: 1.15;
    margin: 0;
}

.welcome-amp {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.welcome-date {
    font-size: 1.05rem;
    letter-spacing: 0.22em;
}

/* Man hinh rat hep: giam co chu de ten khong sat mep. */
@media (width <= 360px) {
    .welcome-name {
        font-size: 2.15rem;
    }

    .welcome-date {
        font-size: 0.95rem;
        letter-spacing: 0.16em;
    }
}

/* Anh QR mung cuoi. Anh nguon ~900-985px, hien thi ~240px => luon LA THU NHO,
   nen de trinh duyet lam min mac dinh (image-rendering: pixelated se lam be rong
   cac o vuong khong deu khi thu nho, gay kho quet). */
.qr-image {
    width: 100%;
    max-width: 15rem;
    height: auto;
    display: block;
}