:root {
  --lv-canvas-w: 1240px;
  --lv-header-h: 122px;
  --lv-footer-h: 94px;
  --lv-footer-gap: 40px;
  --lv-left-w: 243px;
  --lv-center-w: 724px;
  --lv-right-w: 273px;
  --lv-nav-h: 210px;
  --lv-step-nav-top: 75px;
  --lv-step-nav-h: 210px;
  --lv-step-nav-gap: 19px;
  --lv-slot-header-gap: 32px;
  --lv-left-local-top: 143px;
  --lv-right-local-top: 96px;
  --lv-left-top-stop: 251px;
  --lv-right-top-stop: 218px;
  --lv-left-panel-h: 856px;
  --lv-right-panel-h: 484px;
  /* JS đo chiều cao thật của 3 panel rồi ghi 3 biến dưới (layout-page.js).
     Các giá trị cứng ở trên chỉ là dự phòng cho khung hình đầu tiên, trước khi
     JS chạy, và cho trường hợp JS không nạp được.
     KHÔNG bỏ 'initial': thiếu nó thì var() rỗng, cả khai báo top:min(...) thành
     invalid at computed-value time và sticky chết hẳn. */
  --lv-left-measured-h: initial;
  --lv-content-measured-h: initial;
  --lv-right-measured-h: initial;

  /* Cột giữa cũng là panel smart-sticky như hai cột bên (bản demo
     StableNativeSticky). Mốc dừng = header + khe 30px + chiều cao navigator. */
  --lv-content-top-stop: calc(var(--lv-header-h) + var(--lv-slot-header-gap) + var(--lv-nav-h));
  /* Dự phòng CỐ Ý đặt rất lớn: nội dung mỗi page một chiều cao, không có con số
     đúng cho mọi page. Số lớn làm calc() ra âm -> min() chọn âm -> sticky không
     bao giờ ghim -> cột giữa chảy theo trang y như trước khi có bản port này.
     Đó là hành vi an toàn khi chưa có số đo thật. */
  --lv-content-panel-h: 100000px;

  --lv-side-bg: #e8e9ee;
  --lv-center-bg: #ffffff;
  --lv-footer-bg: #666666;

  --lvp-account-font-regular: 'SfproDisplay-Regular';
  --lvp-account-font-bold: 'SfproDisplay-Bold';
  --lvp-account-font-medium: 'SfproDisplay-Medium';
  --lvp-account-font-size: 14px;
  --lvp-account-text: #000000;
  --lvp-account-disabled-text: #A8A7A7;;
  --lvp-account-input-border: #e2e8f0;
  --lvp-account-gold: #d7c155;
  --lvp-account-gold-deep: #c0944b;
  --lvp-account-secondary: #b8babb;
  --lvp-account-btn-color: #111111;
  --lvp-account-icon-btn: #808098;
  --lvp-account-input-height: 38px;
  --lvp-account-input-radius: 5px;
  --lvp-account-button-height: 40px;
  --lvp-account-button-radius: 4px;
  --lvp-account-radius-sm: 4px;
  --lvp-account-radius-md: 6px;
  --lvp-account-radius-lg: 7px;
  --lvp-account-radius-xl: 8px;
  --lvp-account-white: #ffffff;
  --lvp-account-black: #000000;
  --lvp-account-input-bg: #ffffff;
  --lvp-account-search-border: #d9d9df;
  --lvp-account-table-border: #dcdce2;
  --lvp-account-focus-border: #d4b240;
  --lvp-account-valid-border: #ff0000;
  --lvp-account-focus-ring: rgba(212, 178, 64, 0.12);
  --lvp-account-placeholder: #a5a2a2;
  --lvp-account-link: #0800f8;
  --lvp-shop-link: #0800f8;
  --lvp-account-pagination-bg: #dddddd;
  --lvp-account-pagination-border: #c8c8c8;
  --lvp-account-checkbox-border: #333333;
  --lvp-account-loading-bg: rgba(255, 255, 255, 0.75);
  --lvp-account-popover-width: 320px;
  --lvp-account-popover-radius: 8px;
  --lvp-account-popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  --lvp-account-space-xs: 4px;
  --lvp-account-space-sm: 8px;
  --lvp-account-space-md: 10px;
  --lvp-account-space-lg: 20px;
}

* {
  box-sizing: border-box;
  font-family: 'SfproDisplay-Regular', Arial, Helvetica, sans-serif;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  min-width: var(--lv-canvas-w);
  background: var(--lv-side-bg);
}

body {
  min-width: var(--lv-canvas-w);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: auto;
  overflow-y: auto;
  background: var(--lv-side-bg);
  font-family: 'SfproDisplay-Regular', Arial, Helvetica, sans-serif;
}

img {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  vertical-align: middle;
}

body {
  line-height: 1.5;
  color: #212529;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
}

a {
  color: #0d6efd;
}

svg {
  vertical-align: middle;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  color: inherit;
}

button {
  border-radius: 0;
}

/* =========================================================
   PAGE + FIXED 1240px DESKTOP CANVAS
   ========================================================= */
.lvf-page {
  width: 100%;
  min-width: var(--lv-canvas-w);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--lv-side-bg);
}

.lvf-canvas {
  width: var(--lv-canvas-w);
  min-width: var(--lv-canvas-w);
  max-width: var(--lv-canvas-w);
  margin-inline: auto;
}

.lvf-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  flex: 0 0 var(--lv-header-h);
  width: 100%;
  min-width: var(--lv-canvas-w);
  height: var(--lv-header-h);
  background: #fff;
}

.lvf-header-inner {
  height: var(--lv-header-h);
}

.lvf-header .header {
  position: static;
  left: auto;
  transform: none;
  width: 100%;
  height: var(--lv-header-h);
}

@media (min-width: 1240px) {
  .lvf-header {
    position: sticky !important;
    top: 0;
    align-self: flex-start;
  }

  .lvf-header .header {
    position: static !important;
    left: auto !important;
    transform: none !important;
  }

  /* .lvf-main {
    margin-top: var(--lv-header-h);
  } */
}

@media (max-width: 1239px) {
  .lvf-header .header {
    position: static;
    left: auto;
    transform: none;
  }
}

.lvf-main {
  position: relative;
  z-index: auto;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: var(--lv-canvas-w);
  background: var(--lv-side-bg);
}

.lvf-workspace {
  position: relative;
  flex: 1 0 auto;   /* cao bằng main, xem ghi chú ở .lvf-main */
  display: grid;
  grid-template-columns: var(--lv-left-w) var(--lv-center-w) var(--lv-right-w);
  align-items: stretch;
  padding-bottom: var(--lv-footer-gap);
  background:
   linear-gradient(to right, var(--lv-side-bg) 0 var(--lv-left-w), var(--lv-center-bg) var(--lv-left-w) calc(var(--lv-left-w) + var(--lv-center-w)), var(--lv-side-bg) calc(var(--lv-left-w) + var(--lv-center-w)) 100%);
}

.lvf-side-track,
.lvf-center-column {
  position: relative;
  min-width: 0;
}

.lvf-left-track,
.lvf-right-track {
  align-self: stretch;
  background: var(--lv-side-bg);
}

.lvf-left-track {
  padding-top: var(--lv-left-local-top);
}

.lvf-right-track {
  padding-top: var(--lv-right-local-top);
}

.lvf-center-column {
  width: var(--lv-center-w);
  /* height: max(calc(100vh - var(--lv-header-h) - var(--lv-footer-h) - 30px), calc(100% - var(--lv-header-h) - var(--lv-footer-h) - 30px)); */
  /* background: var(--lv-center-bg); */
}

/* =========================================================
   TOP NAVIGATOR
   - always pinned immediately under the header
   ========================================================= */
.lvf-top-navigator {
  position: sticky;
  margin-top: var(--lv-slot-header-gap);
  top: calc(var(--lv-header-h) + var(--lv-slot-header-gap));
  z-index: 1001;
  width: var(--lv-center-w);
  min-height: var(--lv-nav-h);
  display: flow-root;
  background: transparent;
}

.lvf-top-navigator::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--lv-slot-header-gap));
  left: 0px;
  right: 0px;
  height: var(--lv-slot-header-gap);
  background: var(--lv-side-bg);
  pointer-events: none;
  z-index: -1;
}

.lvf-top-navigator::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background:
    radial-gradient(circle 10px at 100% 100%, transparent 9.9px, var(--lv-side-bg) 10.1px) 0 0 / 10px 10px no-repeat,
    radial-gradient(circle 10px at 0 100%, transparent 9.9px, var(--lv-side-bg) 10.1px) 100% 0 / 10px 10px no-repeat;
  pointer-events: none;
  z-index: -1;
}

.lvf-top-navigator .lv-step-navigation {
  position: absolute;
  top: calc(var(--lv-step-nav-top) - var(--lv-header-h) - var(--lv-slot-header-gap));
  left: 0;
  right: 0;
  transform: none;
  z-index: 1;
}

.lvf-content {
  /* sticky chứ không relative: khi cột phải cao hơn nhiều, nội dung cột giữa
     không bị trôi hẳn lên khỏi khung nhìn. */
  position: sticky;
  z-index: 1;
  width: var(--lv-center-w);
  top: min(
    var(--lv-content-top-stop),
    calc(100vh - var(--lv-footer-gap) - var(--lv-content-measured-h, var(--lv-content-panel-h)))
  );
  top: min(
    var(--lv-content-top-stop),
    calc(100dvh - var(--lv-footer-gap) - var(--lv-content-measured-h, var(--lv-content-panel-h)))
  );
  background: var(--lv-center-bg);
}

.lvf-content > img {
  width: var(--lv-center-w);
  height: auto;
}

/* Real WordPress content must stay in normal document flow.
   Do NOT give this area an internal vertical scrollbar. */
.lvf-content-real {
  width: 100%;
  overflow: visible;
}

.lvf-smart-sidebar {
  position: sticky;
  z-index: 100;
  width: 100%;
}

.lvf-left-sidebar {
  --lv-panel-h: var(--lv-left-measured-h, var(--lv-left-panel-h));
  --lv-panel-top-stop: var(--lv-left-top-stop);
  top: min(
    var(--lv-panel-top-stop),
    calc(100vh - var(--lv-footer-gap) - var(--lv-panel-h))
  );
  top: min(
    var(--lv-panel-top-stop),
    calc(100dvh - var(--lv-footer-gap) - var(--lv-panel-h))
  );
}

.lvf-right-sidebar {
  --lv-panel-h: var(--lv-right-measured-h, var(--lv-right-panel-h));
  --lv-panel-top-stop: var(--lv-right-top-stop);
  top: min(
    var(--lv-panel-top-stop),
    calc(100vh - var(--lv-footer-gap) - var(--lv-panel-h))
  );
  top: min(
    var(--lv-panel-top-stop),
    calc(100dvh - var(--lv-footer-gap) - var(--lv-panel-h))
  );
}

.lvf-left-sidebar .lv-sidebar-inner {
  padding-top: 0;
}

#lvf-page .lvf-left-sidebar .menu-group:last-child {
  margin-bottom: 0;
}

/* menu.css còn hai khoản bù riêng cho layout cũ dưới 1239px:
       .lv-sidebar       { margin-top: -122px }   né header chuyển sang sticky
       .lv-sidebar-inner { padding-bottom: 94px } chừa chỗ footer
   Layout này không có breakpoint nào, và khe trước footer do
   .lvf-workspace{padding-bottom:40px} lo. Gỡ cả hai. */
@media (max-width: 1239px) {
  .lvf-left-sidebar .lv-sidebar {
    margin-top: 0;
  }
  .lvf-left-sidebar .lv-sidebar-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.lvf-right-sidebar > img {
  width: var(--lv-right-w);
  height: var(--lv-right-panel-h);
}

/* =========================================================
   FOOTER
   ========================================================= */
.lv-footer {
  position: relative;
  z-index: 500;
  flex: 0 0 var(--lv-footer-h);
  width: 100%;
  min-width: var(--lv-canvas-w);
  height: var(--lv-footer-h);
  margin-top: auto;
  background: var(--lv-footer-bg);
}

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media (max-width: 767px) {
  /* THU PHÓNG CẢ CANVAS, không đổi lưới sang phần trăm.
   *
   * Bản trước chép nguyên cách của demo: lưới thành %, ảnh width:100%, các chiều
   * cao tính bằng vw. Cách đó chỉ đúng với demo vì ba cột của nó CHỈ chứa <img>.
   * Cột của ta chứa DOM thật — menu khoá 243px, step-nav, mock điện thoại 216px,
   * các ô nhập liệu — nên khung co còn nội dung thì không, đo được menu 243px
   * tràn ra khỏi track 149px và đè lên cột giữa.
   *
   * zoom thu nhỏ CẢ HỘP BỐ CỤC (khác transform:scale chỉ thu phần vẽ, để lại
   * khoảng trắng thừa và vẫn cuộn ngang), nên toàn bộ 1240px co vừa bề ngang
   * thiết bị, giữ đúng tỉ lệ như demo.
   */
  .lvf-page {
    /* Chia độ dài cho ĐỘ DÀI mới ra số — calc(100vw / 1240) cho ra một độ dài
       và zoom bỏ qua giá trị đó. Mẫu số phải bằng --lv-canvas-w. */
    zoom: calc(100vw / 1240px);
  }

  /* Phải gỡ khoá 1240 ở html/body: .lvf-page đã thu nhỏ nhưng nếu tài liệu vẫn
     rộng 1240 thì khối co lại bị canh giữa, thừa lề hai bên và vẫn cuộn ngang.
     .lvf-page giữ nguyên min-width 1240 — với zoom, 1240 đơn vị đó đã thu nhỏ
     đúng bằng bề ngang thiết bị. */
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }
}

#lvf-page .lvf-slot,
#lvf-page .lvf-slot > * {
  /* Lớp bọc của page hay mang theo phần dựng cột của layout gốc: padding-top để
     né header cố định, height:100% để lấp khung cha. Lưới đã do .lvf-workspace lo. */
  padding-top: 0;
  height: auto;
  /* position:fixed + top/bottom là cách plugin tự ghim mình để né header và
     footer của layout cũ (reporting làm vậy: fixed, top:154, bottom:94). Trong
     lưới này nó làm slot rỗng và nội dung nổi đè lên trang.
     Đổi về relative chứ KHÔNG về static: relative vẫn là mốc định vị cho con
     cháu absolute, nên phần tử vốn đã relative không đổi hành vi. Phải xoá cả
     4 inset, không thì top:154px lại thành lệch 154px. */
  position: relative;
  inset: auto;
  /* margin-top: cùng loại với padding-top — lớp bọc hay tự đẩy mình xuống cho
     khỏi đụng header cố định (startscreens: .pss-preview margin-top:64px).
     Vị trí dọc của cột đã do .lvf-left-track / .lvf-right-track{padding-top} lo. */
  margin-top: 0;
  /* min-height: lớp bọc hay chừa chỗ footer bằng calc(100vh - 94px)
     (account-manager làm vậy). Không gỡ thì slot cao bằng khung nhìn. */
  min-height: 0;
  width: auto;
  flex: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

#lvf-page .lvf-slot .body {
  display: block;   /* gốc là flex builder hai cột */
  gap: 0;
  height: auto;     /* gốc calc(100% - 60px) */
}

#lvf-page .lvf-slot .main {
  flex: none;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Step navigation nằm ĐÈ lên vùng này (absolute, top âm, z-index 1), nên vùng
 * header phải tự đẩy nội dung xuống dưới nó. Không có phần này thì mọi thứ
 * plugin đặt vào slot header đều bị ảnh step nav che mất.
 *
 * Suy từ chính các biến đang có:
 *   75 (đỉnh step nav) + 210 (cao) + 19 (khe) − 122 (header) − 30 (khe slot) = 152
 * Đúng bằng con số mà rule riêng của app_text vẫn dùng.
 *
 * Chỉ áp khi THẬT SỰ có step nav — layout-page.php gắn .has-step-nav. Trang
 * không thuộc app/account/shop/fulfillment thì không chừa, khỏi thừa 152px. */
#lvf-page .lvf-slot-header {
  background: var(--lv-center-bg);
  border-radius: 8px 8px 0 0;
  padding-bottom: 20px;
  padding: 0 31px;   /* gốc 152px 37px 48px 34px */
}

#lvf-page .lvf-top-navigator.has-step-nav .lvf-slot-header {
  padding-top: calc(
    var(--lv-step-nav-top) + var(--lv-step-nav-h) + var(--lv-step-nav-gap)
    - var(--lv-header-h) - var(--lv-slot-header-gap)
  );
  padding-bottom: 10px;
}

/* padding-top cũ 152px đã chuyển lên .lvf-slot-header ở trên (việc của layout,
   không phải của riêng app_text). Ở đây chỉ còn lề ngang. */
#lvf-page .lvf-slot-header .main {
  padding: 0 37px 0 34px;
}

#lvf-page .lvf-slot-content .main {
  padding: 0 37px 0 34px;   /* gốc 148px 37px 48px 34px */
}

/* Khối preview là con trực tiếp DUY NHẤT của .body, nên `> *` bắt đúng nó mà không
   cần biết page gọi nó là .au-preview hay .dc-preview.
   Gốc: flex:0 0 242px; margin:66px -13px 0 0 — margin-right âm làm nó thò 13px ra
   ngoài cột, còn 66px thì .lvf-right-track{padding-top:96px} đã lo. */
#lvf-page .lvf-slot-preview .body > * {
  flex: none;
  width: auto;
  margin: 0;
}

/* Khe 30px giữa cột giữa và mock preview — yêu cầu của team, đã áp cho layout cũ.
   Demo không đọc được khoản này vì nó nướng sẵn vào file ảnh, và ba cột của demo
   cộng khít 1240 nên không có gutter nào.
   Lùi từ BÊN TRONG cột, KHÔNG đặt margin lên .lvf-right-track: track mà có margin
   thì lưới 243+724+273 không còn cộng đúng 1240 nữa.
   Mock rộng 215px vẫn vừa: 273 - 30 = 243.

   Đặt trên CHÍNH slot, không bám cấu trúc bên trong: bản trước viết
   `.lvf-slot-preview .body > *` nên chỉ app_text (có .body) được áp, còn
   startscreens thì mock dính sát mép trái cột. */
#lvf-page .lvf-slot-preview {
  padding-left: 30px;
}

/* Runtime state used by layout-page.js. CSS performs the actual movement;
   JavaScript only measures panels and changes this state. */
/* JS ghi biến CSS vào ba phần tử này; contain:style khoanh vùng ảnh hưởng. */
.lvf-left-sidebar,
.lvf-content,
.lvf-right-sidebar {
  contain: style;
}

html.lv-stable-sticky .lvf-workspace {
  min-height: var(--lv-runtime-workspace-h, auto);
}

html.lv-stable-sticky .lvf-left-sidebar,
html.lv-stable-sticky .lvf-content,
html.lv-stable-sticky .lvf-right-sidebar {
  margin: 0;
  will-change: auto;
  transform: none;
}

html.lv-stable-sticky [data-lv-sticky-state="free"] {
  position: absolute;
  top: var(--lv-runtime-free-top, 0px);
}

html.lv-stable-sticky [data-lv-sticky-state="top"] {
  position: sticky;
  top: var(--lv-runtime-top-stop, 0px);
}

html.lv-stable-sticky [data-lv-sticky-state="bottom"] {
  position: sticky;
  top: calc(100vh - var(--lv-footer-gap) - var(--lv-runtime-panel-h, 0px));
  top: calc(100dvh - var(--lv-footer-gap) - var(--lv-runtime-panel-h, 0px));
}

html.lv-stable-sticky .lvf-left-track,
html.lv-stable-sticky .lvf-center-column,
html.lv-stable-sticky .lvf-right-track {
  position: relative;
}

html.lv-stable-sticky .lvf-left-sidebar,
html.lv-stable-sticky .lvf-content,
html.lv-stable-sticky .lvf-right-sidebar {
  transition: none !important;
}

.lvf-modal-root {
  position: relative;
  z-index: 2000;
}

@media (max-width: 767px) {
  .lvf-modal-root {
    zoom: calc(100vw / 1240px);
  }
}


.lvf-slot-header{
  position: relative;
}
.lvf-slot-header::after {
    content: "";
    position: absolute;
    width: 724px;
    height: 18px;
    left: 50%;
    top: calc(100% - 2px);
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        #fff 0%,
        rgba(255, 255, 255, .99) 10%,
        rgba(255, 255, 255, .96) 22%,
        rgba(255, 255, 255, .88) 36%,
        rgba(255, 255, 255, .72) 52%,
        rgba(255, 255, 255, .50) 67%,
        rgba(255, 255, 255, .28) 80%,
        rgba(255, 255, 255, .10) 91%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}
.lvf-slot.lvf-slot-content{
    padding-top: 10px !important;
}