/* ===== RESET + KHÓA SCROLL ===== */
html,
body {
    height: 100%;
    margin: 0;
}
/* chặn scroll toàn trang */
html,
        =
        /* ẩn tạm đến khi font sẵn sàng */
        html:not(.fonts-ready) .font-fabnum,
        html:not(.fonts-ready) .menu-sans,
        html:not(.fonts-ready) #fab-title,
        html:not(.fonts-ready) #ent-label {
    visibility: hidden;
}



 
/* Bỏ border/shadow cho logo */
#contactLogo img
{
  display: block;
  height: auto;
  border: 0 !important;
  box-shadow: none !important;
}

/* Vị trí cố định + fix iOS "hairline" */
#contactLogo {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);

  display: inline-flex;               /* giống button */
  align-items: center;
  justify-content: center;
  cursor: pointer;

  border: 0 !important;
  box-shadow: none !important;
  outline: 1px solid transparent;

  background-clip: padding-box;
  backface-visibility: hidden;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;

  /* fix seam iOS */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  pointer-events: auto;
}

/* Mobile: ép sang trái */
@media (max-width: 768px) {
  #contactLogo {
    z-index: 70;
    left: 24px !important;
    top: 24px !important;
    transform: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
  }
}



/* ===== CANVAS full màn ===== */
#fullpage .section { overflow: hidden; }
#fullpage .section img{object-fit:cover;}
/* ===== Overlay text nằm TRÊN canvas (để fade out) ===== */
#overlay {
    position: fixed;
    inset: 0;
    z-index: 2;

}
/* ===== Menu panel (nếu dùng) ===== */
aside.menu-panel {
    --reveal-open: 650ms;
    --reveal-close: 360ms;
    --stagger-base: 120ms;
    --stagger-step: 70ms;
    --img-zoom-open: 1.06;
    --cx: 50%;
    --cy: 10%;
    position: fixed;
    inset: 0;
    clip-path: circle(0% at var(--cx) var(--cy));
    transition: clip-path var(--reveal-close) cubic-bezier(0.2, 0.7, 0.1, 1),
        visibility 0s linear var(--reveal-close);
}
.menu-btn-disabled {
  pointer-events: none !important;
}
aside.menu-panel.hidden {
    visibility: hidden;
    pointer-events: none;
}
#menuBtn[aria-disabled="true"] {
  pointer-events: none !important;
  opacity: .7; /* tùy chọn: feedback thị giác */
}

aside.menu-panel.is-open {
    visibility: visible;
    pointer-events: auto;
    clip-path: circle(150% at var(--cx) var(--cy));
    transition: clip-path var(--reveal-open) cubic-bezier(0.2, 0.7, 0.1, 1),
        visibility 0s;
}

aside.menu-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.06);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

aside.menu-panel.is-open::after {
    opacity: 1;
}
#fp-nav ul li a span {
    background-color: white !important;
    border: 0.5px solid white;
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 9999px;
    opacity: 1;
    transition: all 0.3s ease;
}

#fp-nav ul li .active span {
    background-color: rgb(255, 255, 255) !important;
    transform: scale(1.01);
}

/* khóa layout trong button, tránh rung sub-pixel */
#ent - fab {
    contain: layout pa int;
}

/* text trong slot: không xuống dòng, line-height sạch */
#fab-num,
#fab-t itle {
    disp lay: block;
    white-sp ace: nowrap;
    line-hei gh t: 1;
    /* base = 1, JS sẽ set line-height theo slotH khi animate */
    will-change: transform;
}
@media (min-width: 768px) {

.menu-right{
margin-left:15rem;
}
}

/* MENU BUTTON (Hamburger → X) */
#menuIcon {
    /* Kích thước cơ sở */
    --w: 68px;
    /* ngang */
    --h: 16px;
    /* cao (≈ line-height) */
    --th: 1.5px;
    /* độ dày nét */
    --gap: 6px;
    /* khoảng cách 2 line khi đóng */

    display: inline-block;
    position: relative;
    width: var(--w);
    height: var(--h);
    margin: 0 10px;
}

#menuIcon .menuline {
    position: absolute;
    inset: 0 auto 0 0;
    right: 0;
    top: 50%;
    height: var(--th);
    background: #fff;
    border-radius: 999px;
    transform-origin: center;
    transition: transform .48s ease, opacity .48s ease;
}

/* Trạng thái đóng */
#menuIcon .menuline.top {
    transform: translateY(calc(-50% - var(--gap)));
}

#menuIcon .menuline.bot {
    transform: translateY(calc(-50% + var(--gap)));
}

/* Trạng thái mở (đổi thành dấu X nhẹ) */
#menuBtn.open #menuIcon .menuline.top {
    transform: translateY(-50%) rotate(15deg);
    border: 0px solid transparent!important;outline: 0px solid transparent!important;
}

#menuBtn.open #menuIcon .menuline.bot {
    transform: translateY(-50%) rotate(-15deg);
    border: 0px solid transparent!important;outline: 0px solid transparent!important;
}


/* Mobile: đưa nút sang góc phải, ẩn chữ "MENU", thu gọn icon */
@media (max-width: 768px) {
    #menuBtn {
        left: auto !important;
        right: 24px !important;
        top: 24px !important;
    }

    /* Ẩn nhãn chữ "MENU" – span cuối cùng trong #menuBtn */
    #menuTitle {
        display: none !important;
    }

    /* Thu nhỏ icon cho gọn mắt hơn */
    #menuIcon {
        --w: 36px;
        --h: 14px;
        --gap: 5px;
        margin:0;
    }
}

       /* Mobile/Tablet: ép grid 1 cột và reset mọi col-start/col-span bên trong */
@media (max-width: 1024px) {
  aside#menuPanel .site-grid {
    display: grid;
    grid-template-columns: 1fr !important;
  }}

.menu-image picture,
.menu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    opacity: 0.85;
    transition: transform 700ms ease, opacity 500ms ease;
}

aside.menu-panel.is-open .menu-image img {
    transform: scale(var(--img-zoom-open));
    opacity: 1;
}

.menu-links li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease var(--d, 0ms),
        transform 0.45s ease var(--d, 0ms);
}

aside.menu-panel.is-open .menu-links li {
    opacity: 1;
    transform: none;
}
#menuPanel.no-image .menu-links-wrapper {
  @apply s:col-start-3 sm:col-start-2 l:col-start-4 col-span-8 mx-auto;
  /* tuỳ chỉnh col-span cho cân giữa */
}


.bottom-link {
  position: relative;
  text-decoration: none;        /* bỏ underline mặc định */
  color: inherit;
}

.bottom-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background-color: currentColor; /* màu giống text */
  opacity: 0.3;                   /* giống decoration-white/30 */
  transition: width 0.3s ease, opacity 0.3s ease;
}

.bottom-link:hover::after {
  width: 100%;
  opacity: 1;                     /* giống hover:decoration-white */
}

html.no-scroll {
    overflow: hidden;
}
/* ===== INTRO VIDEO overlay nằm TRÊN overlay ===== */
.introvid {
    position: fixed;
    inset: 0;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    object-fit: cover;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    pointer-events: none;
    display: none;
    ransform: translateZ(0);
  will-change: transform;
}

.introvid.is-show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
    pointer-events: auto;
    display: flex;

}

#fullpage .section {
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fullpage .section img {
   position: absolute;
  inset: 0;            /* pin vào 4 cạnh */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;      /* kill baseline gap */
  transform: translateZ(0); kín */
}

.skipbtn {
  display: inline-flex;                /* giống button */
  align-items: center;
  justify-content: center;

  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;

  width: 46px;
  height: 46px;
  padding: 5px;

  border-radius: 50%;
  border: 0;
  outline: 1px solid transparent;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);

  color: #5a5959;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}



/* Base: desktop (slide từ phải) */
#ent-sheet {
    position: absolute;
    inset: 24px; /* top/right/bottom/left 24px */
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateX(100%); /* ẩn bên phải */
    border-radius: 4px;

    display: flex; /* chia header/body theo cột */
    flex-direction: column;
    overflow: hidden; /* chặn scroll ở SHEET */
}
#ent-sheet::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

#ent-head {
    position: sticky; /* hoặc keep class sticky của bạn */
    top: 0;
    z-index: 10;
    /* nền + blur để che nội dung khi cuộn */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #d6d1c8;
}
#ent-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge cũ */
}
#ent-body::-webkit-scrollbar {
    display: none;
} /* Chrome/Safari */

/* Mobile: bottom sheet + căn giữa, rộng 90% */
@media (max-width: 768px) {
    #ent-sheet {
        position: fixed; /* bám viewport để kéo từ dưới lên */
        left: 12px;
        right: 12px; /* => tự căn giữa, tương đương width ~90% */
        bottom: 12px;
        top: 12px;

        background: #fff;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

        /* ẩn dưới màn hình để chuẩn bị animate theo trục Y */
        transform: translateY(110%);
        border-radius: 4px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* Vòng tròn ngoài mỗi dot */
#fp-nav ul li a span {
    background-color: white !important;
    border: 0.5px solid white;
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 9999px;
    opacity: 1;
    transition: all 0.3s ease;
}

#fp-nav ul li .active span {
    background-color: rgb(255, 255, 255) !important;
    transform: scale(1.01);
}

/* khóa layout trong button, tránh rung sub-pixel */

#menuBtn.show {
    opacity: 1;
    pointer-events: auto;
}

.menu-open #fp-nav {
    display: none !important;
}

.js-menu-mask {
    will-change: transform;
    transform-origin: top center;
}


#downText {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  font-weight: 900;
  font-family: sans-serif; /* phần lớn trắng, chỉ ~20% là xám mờ */
    -webkit-font-smoothing:auto;  /* đừng ép antialiased để khỏi mỏng */
  background: linear-gradient(
    135deg,
    #fff 0%,
    #fff 40%,
    rgba(255, 255, 255, 0.2) 50%,
    /* dải mờ */ #fff 60%,
    #fff 100%
  );
  cursor:pointer;
  background-size: 400% 400%;
  background-position: 120% 120%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* làm chậm: 8 giây 1 vòng */
  animation: shine 5s linear infinite;

}
@keyframes shine {
  to {
    background-position: -20% -20%;
  }
}

#downButton {
    display: none;
    padding: 7px;
    border: 1px solid #7c726266 !important;

}
#RightNumber {
    display: flex;
} /* hoặc block theo layout của bạn */

/* Mobile ≤ 768px: đảo lại */
@media (max-width: 768px) {
    #downButton {
        display: flex !important;
        padding: 5px;
        border: 1px solid #7c726266 !important;
    } /* hoặc block */
    #RightNumber {
        display: none !important;
    }
    #block {
        display: none !important;
    }
   #downText{
    display: none !important; /* ép ẩn cả trên mobile */
  }
}

.fpd-body{ 
position:relative; 
overflow-y:auto;  
scrollbar-width: none;        /* Firefox */
-ms-overflow-style: none; 
}
.fpd-body::-webkit-scrollbar {  /* Chrome/Safari/Edge */
  display: none;                /* ẩn thanh cuộn */
}
.fpd-left { 
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     
}
.fpd-left::-webkit-scrollbar {  /* Chrome/Safari/Edge */
  display: none;                /* ẩn thanh cuộn */
}
  /* Desktop: 40/60 bằng flex-basis (ổn định hơn width) */
@media (min-width:1025px){
  .fpd-body{
    display:flex;
    align-items:stretch;
    width:100%;
    min-width:0;           /* cho phép con co lại */
  }
  .fpd-left,
  .fpd-right{
    min-width:0;           /* QUAN TRỌNG: cho nội dung co, tránh tràn đẩy cột */
  }
  .fpd-left{
    flex: 0 0 40%;
    max-width:40%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:180px;
  }
  .fpd-right{
    flex: 0 0 60%;
    max-width:60%;
    height:85vh;
    overflow:hidden;
    position:relative;
    border-left:1px solid rgba(202,168,109,.20);
  }
}

/* Mobile/Tablet: xếp dọc, 100% chiều ngang, cuộn trong body */
@media (max-width:1024px){
  .fpd-body{
    display:flex;
    flex-direction:column;
    width:100%;
    max-height:100svh;                    /* hoặc 100dvh nếu muốn */
    overflow:auto;                        /* cuộn cả khối */
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    border-top:1px solid rgba(202,168,109,.20);
    min-width:0;
  }
  .fpd-left,
  .fpd-right{
    flex: 0 0 auto;                       
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    overflow:visible !important;
    min-width:0;                           
  }
  .fpd-right{ border-left:0; }
  #ifr{
    height:50vh;
  }
}


  .fpd-plan{ display:block; width:100%; height:auto; }

.fpd-mask{ display:flex; flex-direction:column; height:100%; min-height:0; }

.intro__line[data-v-140c621f] {
    --scale: 0;
    transform: scaleX(var(--scale));
    transition: transform 0.25s ease-out;
}

#ent-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;

    width: 452px;
    height: 100px;

    background: #fff;
    border: 0.2px solid #c2b8af;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px;
    color: #6f6657;
    cursor: pointer;
    user-select: none;
    --fab-bg-rgb: 255, 255, 255;
    --fab-op-dur: 0.35s;
    --fab-bg-dur: 0.5s;

    opacity: 1;
    background-color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

    transition: opacity var(--fab-op-dur) ease,
        background-color var(--fab-bg-dur) ease,
        box-shadow var(--fab-bg-dur) ease;
    will-change: opacity, background-color, box-shadow;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
#ent-fab.fab--hidden {

    --fab-op-dur: 0.9s;
    --fab-bg-dur: 1.2s;

    opacity: 0;
    background-color: rgba(var(--fab-bg-rgb), 0);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0);
    pointer-events: none;
}
#fab-title,
.ent-fab-line {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    font-variant-ligatures: none;
}
#fab-num {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

#fab-num .fixed-zero {
    display: inline-block;
}

#fab-num .roll-holder {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    line-height: 1em;
}
#fab-num,
#fab-num .fixed-zero,
#fab-num .roll-holder,
#fab-num .roll-digit {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

#ent-fab.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.fab-hide {
    opacity: 0;
    pointer-events: none;
}


html.menu-open #ent-fab,
html.ent-open #ent-fab {
    opacity: 0 !important;
    transform: translateY(6px);
    pointer-events: none;
    visibility: hidden;
}

@media (max-width: 768px) {
    #ent-fab {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        height: 82px;
        padding: 8px 16px;
        border-radius: 4px;
        gap: 16px;

        transform: none !important;
        opacity: 1;
        transition: opacity 0.9s ease;
    }
    #fab-title{
        font-size:15px;
    }
}
  #bgmToggle{
        left:auto;
        right:24px;
        top:70px !important;
        align-items:start !important;
        cursor:pointer;
        bottom:auto;
    }

#dropBody{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  pointer-events: auto;
   -ms-overflow-style: none;    /* IE, Edge */
    scrollbar-width: none
}
/* khối mask full màn: phải có chiều cao & cho con co được */
/* khung trắng */
#dropPage .js-drop-mask{

  display:flex;
  flex-direction:column;
  min-height:0;
}

/* hàng bọc quanh #dropBody */
#dropPage .js-drop-mask > .flex{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

/* vùng cuộn chính */
#dropBody{
  height:100%;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding-right:2px; /* tránh scrollbar đè chữ */
}

.brand-underline {
  position: relative;
  padding-bottom: .4rem;
}
.brand-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, #C8C1B4, rgba(200,193,180,0));
}

.brand-list {
  list-style: none;
  padding-left: 0;
}
.brand-list li {
  position: relative;
  padding-left: 1.25rem;
}
.brand-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
}

.brand-list.number {
  counter-reset: item;
}
.brand-list.number li {
  padding-left: 2rem;
}
.brand-list.number li::before {
  counter-increment: item;
  content: counter(item) ".";
  width: auto; height: auto; border-radius: 0;
  background: transparent;
  color: #C8C1B4;
  box-shadow: none;
  left: 0; top: 0;
  font-weight: 700;
}

.contact-section {
    max-width: 900px;
    margin: 40px auto;
    padding: 10px 20px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif !important;
    background:white;
}


/* Tiêu đề */
.contact-title {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  margin-bottom: 30px;
}

.contact-title .subtitle {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: #444;
}

.contact-title .main-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

/* Form */
/* Outer wrapper: nền đỏ + viền bo tròn giống ảnh */
.width-full {
  width: 100%;
}

.grid-1 {
  grid-template-columns: 1fr !important;
}

.contact-section {
  padding: 10px;
  /* khoảng đỏ bên ngoài */
  /* background: #7b1f07; */
  /* đỏ nền ngoài */
  /* background-image: linear-gradient(180deg, #8a2a0d, #7b1f07); */
  border-radius: 12px;
}

.contact-shell {
  border-radius: 10px;
  /* background: rgb(32, 32, 32); */
  background: rgb(255, 253, 253);
  /* panel trong */
  padding: 24px 18px;
  position: relative;
  overflow: hidden;
}

/* Title */
.contact-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.main-title {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  color: #d9c89f;
  /* vàng nhạt */
  text-align: center;
  font-size: clamp(22px, 3.2vw, 36px);
}

/* Grid form: PC 1 hàng, Mobile 3 hàng */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  /* 3 ô + nút */
  gap: 14px;
  align-items: center;
}

/* Label ẩn nhưng vẫn accessible */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Input & Select style */
.contact-form .form-group {
  margin: 0;
}

.contact-form input,
.contact-form select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(24, 24, 24, 0.15);
  background: #fff;
  /* như ảnh là nền sáng */
  color: #756A59 !important;
  -webkit-text-fill-color: #756A59 !important;
  font-size: 15px;
  outline: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:not(:placeholder-shown),
.contact-form select:valid {
color: #756A59 !important; /* hoặc màu bạn muốn */
}

.contact-form input::placeholder {
  color: #666;
}

.contact-form input:focus,
.contact-form select:focus {
  border-color: #d8c89e;
  box-shadow: 0 0 0 3px rgba(216, 200, 158, .25);
  color: #756A59 !important;
  -webkit-text-fill-color: #756A59 !important;
}

/* Select: mũi tên giống native, có thể custom nhẹ */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
      linear-gradient(45deg, transparent 50%, #333 50%),
      linear-gradient(135deg, #333 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
  background-position:
      calc(100% - 22px) 20px,
      calc(100% - 16px) 20px,
      100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 100%;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.submit-btn {
  height: 48px;
  padding: 0 22px;
  white-space: nowrap;
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: #756A59;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease;
}

.submit-btn:hover {
  filter: brightness(.98);
}

.submit-btn:active {
  transform: translateY(1px);
}

.contact-note {
  text-align: center;
  color: #756A59;
  margin: 10px 0 0;
  font-style: italic;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .contact-form {
      grid-template-columns: 1fr;
      /* 1 cột */
  }

  .submit-btn {
      width: 100%;
  }
}

.contact-shell::before,
.contact-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 220px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, .06), transparent 70%);
  pointer-events: none;
}

.contact-shell::before {
  left: -40px;
}

.contact-shell::after {
  right: -40px;
}
.droup-modal{
  position: fixed; inset: 0; z-index: 999999;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
/* đảm bảo lúc mở luôn hiện */
.droup-modal.is-active { 
  display: grid !important; 
  opacity: 1; 
  pointer-events: auto; 
}
.droup-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
/* Card — bạn có thể gắn background tùy ý vào .droup-card */
.droup-card{
  position:relative; z-index:1;
  width: min(420px, 92vw);
  color:#fff;
  border-radius:12px;
  backdrop-filter: blur(2px);
  padding:18px 16px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  background: radial-gradient(80% 100% at 50% 0%, #ecececff 0%, #ffffffff 60%, #ffffffff 100%);
}

/* Close */
.droup-close{
  color:black !important;
  position:absolute; top:8px; right:8px;
  width:30px; height:30px; border:0; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; font-size:20px;
  display:grid; place-items:center; cursor:pointer;
}
.droup-close:hover{ background:rgba(255,255,255,.25); }

/* Header */
.droup-head{ display:flex; align-items:center; gap:8px; margin:4px 2px 8px; }
.droup-emoji{ font-size:22px; line-height:1; }
.droup-title{
  color:#7C7262;
  margin:0; font-weight:800; letter-spacing:.04em;
  font-size:18px; text-transform:uppercase;
}

/* Message */
.droup-text{
  margin:8px 2px 16px;
  text-align:center; line-height:1.6;
  font-size:14px; color:#7C7262;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}
/* Call button */
.droup-btn{
  display:flex; align-items:center; justify-content:center;
  gap:10px; width:100%;
  padding:12px 14px;
  color:#fff; font-size:16px;
  background-color:#756A59;
  border-radius:10px; text-decoration:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(0,0,0,.2);
  transition: transform .08s ease, filter .2s ease;
}
.droup-btn:hover{ filter:brightness(.98); }
.droup-btn:active{ transform: translateY(1px); }

@media (max-width: 420px){
  .droup-card{ padding:16px 12px 20px; }
  .droup-title{ font-size:17px; }
  .droup-text{ font-size:13px; }
}
.fpd-stage { transform: translateZ(0); backface-visibility: hidden; }
.fpd-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; padding: .5rem .75rem; background: rgba(0,0,0,.35);
  color: #fff; border-radius: .5rem; border: 0;
}
.fpd-prev{ left: 1rem; }
.fpd-next{ right: 1rem; }

/* tránh “hairline” iOS */
.fpd-stage, .fpd-slide-wrap, .fpd-img, .fpd-cover{
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* mobile: ẩn left nếu chật */

/* Khung & lớp slide */
.fpd-stage { position: relative; overflow: hidden; }
.fpd-slide-wrap { position: relative; width:100%; height:100%; }
.fpd-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  will-change: transform, opacity, filter;
  backface-visibility:hidden; transform: translateZ(0);
}
.fpd-slide > img, .fpd-cover{
  max-width:100%; max-height:100%;
  will-change: transform, opacity, filter;
  backface-visibility:hidden; transform: translateZ(0);
}
/* Slide khởi tạo & vào/ra theo trục ngang */
/* SLIDE vào/ra theo trục Y */
.fpd-slide.is-enter{
  opacity: 0; transform: translateY(var(--y, 24px)) scale(1.02);
}
.fpd-slide.is-enter.in{
  opacity: 1; transform: translateY(0) scale(1);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.fpd-slide.is-leave{ opacity: 1; transform: translateY(0) scale(1); }
.fpd-slide.is-leave.out{
  opacity: 0; transform: translateY(var(--y, -16px)) scale(1.01);
  transition: transform .30s ease, opacity .30s ease;
}

/* Hướng: xuống / lên */
.fpd-slide.dir-down{ --y: 24px; }  /* slide mới bay từ DƯỚI lên vị trí */
.fpd-slide.dir-up{   --y:-24px; }  /* slide mới bay từ TRÊN xuống vị trí */

/* (giữ nếu bạn đã có) blur + skeleton + reduce motion */

/* (giữ lại) hiệu ứng blur + skeleton nếu bạn đã thêm trước đó */
#new-card p{
  font-size:12px !important; line-height:1.6; color:#7C7262;
}
#new-card h3{
  font-size:14px !important; line-height:1.6; color:#7C7262;
}
#menuBtn{
}
#menuBtn,
#contactLogo {
  border: 0 !important;
  shadow: none !important;
  outline:none !important;
  will-change: auto !important;
}
#menuBtn, #contactLogo {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
} 
#menuBtn::after {
  content: "";
  position: absolute;
  inset: -6px;        /* phủ ra ngoài một chút để đè lên outline */
  background: transparent; /* vô hình hoàn toàn */
  z-index: 10;        /* nằm trên outline */
  pointer-events: none; /* vẫn click bình thường */
}
.brand-underline{position:relative;display:inline-block;padding-bottom:.25rem;}
.brand-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#d9c89f 0%,rgba(217,200,159,.15) 100%);border-radius:9999px;
}
.brand-list{list-style:none;padding-left:0;}
.brand-list li{position:relative;padding-left:1.25rem;}
.brand-list li::before{
  content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:9999px;background:#d9c89f;
}
.brand-list.number{counter-reset:item;}
.brand-list.number li{padding-left:2rem;}
.brand-list.number li::before{
  content:counter(item) ".";counter-increment:item;position:absolute;left:0;top:0;font-weight:600;color:#7C7262;background:transparent;width:auto;height:auto;border-radius:0;
}
  .about-underline{position:relative;display:inline-block;padding-bottom:.25rem}
  .about-underline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#d9c89f 0%,rgba(217,200,159,.15) 100%);border-radius:9999px}

  .about-card{border:1px solid rgba(217,200,159,.5);background:#fff; border-radius:1rem; padding:1.25rem}
  .about-card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.2s}
  .about-badge{width:44px;height:44px;border-radius:9999px;background:rgba(217,200,159,.2);display:grid;place-items:center;color:#7C7262;font-weight:700;margin-bottom:.5rem}
  .about-card-title{color:#7C7262;font-weight:600}
  .about-card-text{color:#4b463b;font-size:14.5px;line-height:1.65}

  .about-bullet{position:relative;padding-left:1.1rem}
  .about-bullet::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:9999px;background:#d9c89f}

  .about-step{position:relative;padding-left:2.25rem;border-left:2px solid rgba(217,200,159,.4);margin-left:.5rem}
  .about-step::before{content:"";position:absolute;left:-9px;top:.25rem;width:14px;height:14px;border-radius:9999px;background:#fff;border:2px solid #d9c89f}
  .about-step-title{color:#7C7262;font-weight:600}
  .about-step-text{color:#4b463b;font-size:14.5px;line-height:1.65;margin-top:.25rem}

  .about-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(217,200,159,.5);border-radius:9999px;padding:.4rem .75rem;background:#fff;color:#7C7262;font-size:14px}

  .about-corecard{display:flex;gap:.75rem;border:1px solid rgba(217,200,159,.45);border-radius:1rem;background:#fff;padding:1rem}
  .about-num{width:36px;height:36px;border-radius:9999px;background:rgba(217,200,159,.2);display:grid;place-items:center;color:#7C7262;font-weight:700}
  .about-coretitle{color:#7C7262;font-weight:600}
  .about-coretext{color:#4b463b;font-size:14.5px;line-height:1.65}



.menuwrap::before{
    content: none !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.border-tranparent{
}

#skipBtn::after {
  content: "";
  position: absolute;
  inset: -6px;        
  background: transparent; 
  z-index: 10;       
  pointer-events: none; 
}

#introVid::after {
  content: "";
  position: absolute;
  inset: -6px;       
  background: transparent; 
  z-index: 10;        
  pointer-events: none; 
}

@keyframes marquee-slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



.marquee-paused {
  animation-play-state: paused;
}

.marquee-anim {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-slide 10s linear infinite;
}
.marquee-text {
  padding-right: 2rem;
}
.pointer-events-auto{pointer-events: auto !important;}
.pointer-events-none{pointer-events: none !important;}