* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto;
  background-color: #000000;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html.scroll-locked,
body.scroll-locked {
  overflow: hidden !important;
  touch-action: none !important;
  height: 100% !important;
}

/* Page Preloader Overlay */
.page-preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: #000000;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #b8b8b8;
  user-select: none;
  pointer-events: all;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.preloader-percent {
  font-family: 'Workbench', sans-serif;
  font-size: clamp(64px, 12vw, 130px);
  line-height: 1;
  color: #b8b8b8;
  letter-spacing: 2px;
}

.preloader-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(9px, 1.2vw, 11px);
  font-weight: 500;
  letter-spacing: 2.5px;
  color: #777777;
  text-transform: uppercase;
}

/* Magazine Hero Section */
.magazine-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #000000;
  overflow: hidden;
}

.hero-pinned-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #000000;
}

/* Cards Container - Centered vertically for initial stack */
.cards-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

/* Card Item - Sharp edges (border-radius: 0), no box-shadow */
.card-item {
  position: absolute;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  will-change: transform, width, height;
  user-select: none;
  background: transparent;
  transform-origin: center center;
}

.card-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Local Fonts */
/* SuisseIntl */
@font-face {
  font-family: 'SuisseIntl';
  src: url('font/iCielSuisseIntl-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('font/iCielSuisseIntl-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('font/iCielSuisseIntl-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

/* IBM Plex Mono */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('font/IBMPlexMono-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('font/IBMPlexMono-Italic.ttf') format('truetype');
}

/* Workbench */
@font-face {
  font-family: 'Workbench';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/Workbench-Regular.ttf') format('truetype');
}

/* Xanh Mono */
@font-face {
  font-family: 'Xanh Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/XanhMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Xanh Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('font/XanhMono-Italic.ttf') format('truetype');
}

/* Editorial Text Block */
.editorial-text-section {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  text-align: center;
  z-index: 100;
  pointer-events: none;
}

.title-workbench {
  font-size: clamp(64px, 11vw, 170px);
  color: #9e9e9e;
  margin-bottom: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0.95;
}

.title-workbench.line-bottom {
  margin-bottom: 0;
}

.bracket-suisse {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 100;
  font-size: 1.18em;
  opacity: 0.5;
  line-height: 0.8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bracket-left {
  margin-right: 32px;
  transform: translateY(-4px);
}

.bracket-right {
  margin-left: 32px;
  transform: translateY(-8px);
}

.text-workbench {
  font-family: 'Workbench', monospace, sans-serif;
  font-variation-settings: 'SCAN' 0, 'BLED' 0;
  letter-spacing: 0;
  word-spacing: -0.35em;
  white-space: nowrap;
}

.text-workbench-delicate {
  font-family: 'Workbench', monospace, sans-serif;
  font-variation-settings: 'SCAN' -53, 'BLED' 0;
  letter-spacing: 0;
  word-spacing: -0.35em;
  white-space: nowrap;
}

/* Article Content Section Below Title (Chuẩn theo Figma) */
.article-content-section {
  position: relative;
  width: 100vw;
  min-height: auto;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 24px 80px 24px;
  z-index: 20;
}

/* Đường stroke dọc kéo ngay từ dưới title xuống */
.vertical-divider {
  width: 1px;
  height: 180px;
  background: rgba(255, 255, 255, 0.4);
  margin: 20px auto 0 auto;
}

/* Quả cầu emblem */
.globe-emblem-container {
  margin-bottom: 30px;
  opacity: 0.75;
}

.globe-emblem-container img {
  max-width: clamp(180px, 25vw, 240px);
  height: auto;
}

/* Vietnamese Fashion Banner Graphics */
.vietnamese-fashion-container {
  margin-bottom: 55px;
  opacity: 0.75;
}

.vietnamese-fashion-container img {
  max-width: clamp(320px, 60vw, 780px);
  height: auto;
}

/* Khối CREDIT */
.credit-block {
  font-family: 'IBM Plex Mono', monospace;
  color: #666666;
  margin-bottom: 45px;
  text-transform: uppercase;
}

.credit-title {
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 4px;
  font-weight: 500;
  color: #777777;
}

.credit-details {
  font-size: 11px;
  letter-spacing: 1.2px;
  line-height: 1.6;
  color: #555555;
}

/* Đoạn mở đầu bài viết */
.editorial-lead-paragraph {
  max-width: 960px;
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: #ffffff;
  opacity: 0.55;
  text-align: center;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   SECTION 3: SCREEN F STYLING (Chuẩn 100% theo bản vẽ Figma mới nhất)
   ========================================================================== */
.screen-f-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #000000;
  padding: 90px 5vw 140px 5vw;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.screen-f-main-container {
  display: flex;
  gap: 120px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* Cột 1 & Cột 2: flex: 1, justify-content: space-between */
.f-column-left,
.f-column-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.f-paragraph-1,
.f-paragraph-2 {
  font-family: 'SuisseIntl', sans-serif;
  font-size: 18px;
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  letter-spacing: -0.5px;
}

.f-paragraph-1 p,
.f-paragraph-2 p {
  margin-bottom: 24px;
}

.f-paragraph-1 p:first-child,
.f-paragraph-2 p:first-child {
  margin-top: 0;
}

.f-paragraph-1 p:last-child,
.f-paragraph-2 p:last-child {
  margin-bottom: 0;
}

.f-paragraph-2 p.highlight-text {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.f-header-tag {
  display: flex;
  gap: 30px;
  margin-top: 60px;
  margin-bottom: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
}

.screen-f-vn-title {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 60px;
}

.text-workbench-vn {
  font-family: 'Workbench', monospace, sans-serif;
  font-size: clamp(52px, 6.8vw, 110px);
  color: #9e9e9e;
  opacity: 0.6;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -1px;
}

.screen-f-vn-title .bracket-suisse {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 100;
  font-size: clamp(64px, 8vw, 120px);
  opacity: 0.5;
  line-height: 0.8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.screen-f-vn-title .bracket-left {
  margin-right: 2px;
  transform: translateY(-4px);
}

.screen-f-vn-title .bracket-right {
  margin-left: 2px;
  transform: translateY(-6px);
}

.vn-subtext {
  font-family: 'SuisseIntl', sans-serif;
  font-size: 19px;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.6);
  max-width: 220px;
  text-align: left;
  letter-spacing: -0.4px;
  margin: 0 4px;
}

/* Dải Thẻ Tương Tác CORTIS & BLACKPINK (Chạy Full Ngang 100vw & Tự Động Loop Vô Tận) */
.screen-f-cards-wrapper {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
  overflow: hidden;
  padding: 30px 0;
  user-select: none;
}

.screen-f-cards-track {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.photo-ambient {
  flex-shrink: 0;
  overflow: hidden;
}

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

.photo-jk02 {
  width: 160px;
  height: 240px;
}

.photo-rose32 {
  width: 250px;
  height: 310px;
}

.photo-cortis032 {
  width: 340px;
  height: 380px;
}

.photo-jk041 {
  width: 280px;
  height: 350px;
}

.photo-jk-full {
  width: 235px;
  height: 360px;
}

/* Feature Cards (CORTIS & BLACKPINK) */
.feature-card {
  flex-shrink: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.feature-card.card-lime {
  background-color: #dafc69;
  width: 380px;
  height: 330px;
}

.feature-card.card-white {
  background-color: #ffffff;
  width: 380px;
  height: 460px;
}

.feature-card .card-photo {
  width: 100%;
  height: 220px;
  overflow: hidden;
  margin-bottom: 16px;
}

.feature-card.card-white .card-photo {
  height: 340px;
}

.feature-card .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-brand-title {
  font-family: 'Workbench', monospace, sans-serif;
  font-size: 52px;
  color: #000000;
  opacity: 0.5;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.card-arrow {
  width: 28px;
  height: auto;
}

/* ==========================================================================
   SECTION 4: SCREEN 01 STYLING (Chuẩn 100% bản vẽ Figma)
   ========================================================================== */
.screen-01-section,
.screen-02-section,
.screen-03-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #000000;
  padding: 90px 5vw 160px 5vw;
}

/* Stroke phân cách giữa Section F và Section 01 */
.screen-01-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.screen-01-container,
.screen-02-container,
.screen-03-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
}

/* Top & Hero Block: Cột trái (Meta + Headline) và Cột phải (Số 01 cao FULL HEIGHT) */
.s01-hero-full-block {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  position: relative;
  margin-bottom: 50px;
  gap: 30px;
}

.s01-hero-left-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Top Metadata Header (Trải rộng đều 100% theo chiều rộng tiêu đề bên dưới) */
/* NGUỒN DUY NHẤT cho text nhỏ dạng meta/tag. Khối CREDIT giữ style riêng.
   Các rule bên dưới chỉ khai báo layout, không lặp lại typography. */
.s01-top-meta,
.f-header-tag,
.s-dy-tag,
.s-vv-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.s01-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 40px;
}

.s01-meta-col1 {
  flex: 1;
  max-width: 215px;
  margin-right: 35px;
  /* Tăng khoảng cách gap thoáng rộng hơn giữa Cụm 1 và Cụm 2 */
}

.s01-meta-col2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.s01-meta-col3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.s01-headline-wrapper {
  font-family: 'Xanh Mono', serif, monospace;
  font-size: clamp(46px, 5.8vw, 98px);
  /* Tăng cỡ chữ to và ấn tượng hơn */
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -1px;
  word-spacing: -0.32em;
  display: flex;
  flex-direction: column;
}

.s01-headline-wrapper p {
  margin: 0;
  white-space: nowrap;
}

.s01-headline-wrapper .line-1 {
  margin-left: 0;
}

.s01-headline-wrapper .line-2 {
  margin-left: 35px;
}

.s01-headline-wrapper .line-3 {
  margin-left: 0;
}

.s01-headline-wrapper .bracket-suisse {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 100;
  opacity: 0.5;
  margin: 0 4px;
}

.s01-big-number-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}

.s01-big-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dafc69;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  margin-top: 0;
}

.s01-big-number .num-digits {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 100;
  font-size: clamp(90px, 11vw, 210px);
  line-height: 1;
  letter-spacing: -2px;
  display: inline-block;
  transform: translateY(2px);
}

.s01-big-number .bracket-suisse {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 100;
  font-size: clamp(110px, 13.5vw, 250px);
  line-height: 0.8;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.s01-big-number .bracket-left {
  margin-right: 2px;
  transform: translateY(-4px);
}

.s01-big-number .bracket-right {
  margin-left: 2px;
  transform: translateY(-6px);
}

/* Bottom Three Column Editorial Article Text (Tỷ lệ 2 : 4 : 4 chuẩn Figma) */
.s01-columns-container {
  display: flex;
  gap: 60px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.s01-col-spacer {
  flex: 2;
  /* Cột 1 thụt lùi tỷ lệ 2 ở dải bài viết trên */
}

.s01-side-photo {
  width: 100%;
  overflow: hidden;
}

.s01-side-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.s01-col-text {
  flex: 4;
  /* Cột 2 và Cột 3 chứa bài viết tỷ lệ 4 */
  font-family: 'SuisseIntl', sans-serif;
  font-size: 18px;
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  letter-spacing: -0.5px;
  /* Thêm letter-spacing cho body text Section 01 */
}

.s01-col-text p {
  margin-bottom: 24px;
}

.s01-col-text p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SCREEN 5 STYLING (La Lune & Vicki Virus Founder Card)
   ========================================================================== */
.s05-main-flex-grid {
  display: flex;
  gap: 60px;
  max-width: 1440px;
  margin: 70px auto 0 auto;
  width: 100%;
  align-items: flex-start;
  /* Cột 1 độc lập hoàn toàn, không đẩy chiều cao khối phải! */
}

.s05-left-col-images {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.s05-right-col-content {
  flex: 8.8;
  display: flex;
  flex-direction: column;
  gap: 80px;
  /* Khoảng cách TRÊN card = 40px */
}

.s05-text-grid-row {
  display: flex;
  gap: 60px;
  width: 100%;
}

.s05-text-grid-row > div {
  flex: 1 1 0 !important;
  width: calc(50% - 30px) !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY CHUNG CHO MỌI TRÍCH DẪN TRONG BÀI
   Trước đây mỗi khối tự khai cỡ chữ riêng (20px cố định, clamp 1.39vw, 29.956px
   của Figma...) nên các đoạn quote trong cùng một bài lệch nhau. Gom về một
   công thức duy nhất; từng khối chỉ còn khai màu + lề theo nền của nó.
   -------------------------------------------------------------------------- */
.s05-quote-text p,
.s-ll-quote p,
.s-dy-quote p,
.s03-hc-quote p,
.s03-banner-text p,
.s-hc-quote p,
.s-vf-quote p,
.s-af-quote p,
.s-dna-quote p,
.s-ms-quote p {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.528vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.04em;
}

/* Ngoại lệ về cỡ chữ, chỉ cho 2 khối collage thật sự không còn chỗ nở vì text
   đặt ở toạ độ tuyệt đối trong khung khoá cứng aspect-ratio theo Figma:
   - Alex Fox: đo ở 1440px, 22px làm 2 đoạn quote đè lên nhau và đè lên headline.
   - Diệp Yến: khung vốn đã hụt chiều cao so với lượng chữ (tràn 85px ngay ở bản
     cũ 20px); 22px đẩy lên 97px. Giữ 20px để không làm nặng thêm.
   La Lune KHÔNG nằm trong nhóm này: ở 22px nó vẫn thừa 69px đáy khung tại 1440px,
   chỉ chạm đáy ở dải 900-1113px nên xử lý riêng bằng media query bên dưới.
   Mọi thuộc tính còn lại (font, weight, line-height{
  font-size: clamp(14px, 1.39vw, 20px);
}

.s05-quote-text p {
  color: #bed080 !important;
  margin-bottom: 24px;
}

.s05-quote-text p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   KHỐI FOUNDER LA LUNE - Vicki Virus (Figma Frame 1410119039 node 48:308)
   Frame 1433 x 704 quy đổi về bề rộng cột phải (1124px), hệ số 0.7847.
   Trước đây là 1 ảnh phẳng, nay dựng lại bằng code. Nền trong Figma là màu đặc
   #cccfd4 (ảnh nền bị lớp màu phủ kín) nên không cần ảnh nền.
   -------------------------------------------------------------------------- */
.s-ll-block {
  position: relative;
  width: 100%;
  aspect-ratio: 1433 / 704;
  background-color: #cccfd4;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.s-ll-photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 39.60%;
  height: 100%;
  overflow: hidden;
}

.s-ll-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  display: block;
}

.s-ll-eyebrow {
  position: absolute;
  left: 51.17%;
  top: 12.79%;
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 1.06;
  letter-spacing: -0.9px;
  color: #000000;
  white-space: nowrap;
}

/* Title Workbench - dùng lại .text-workbench + .bracket-suisse của trang */
.s-ll-title {
  position: absolute;
  left: 51.17%;
  top: 19.33%;
  display: flex;
  align-items: center;
  color: #000000;
  font-size: clamp(34px, 4.91vw, 79px);
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.s-ll-title .text-workbench {
  letter-spacing: -0.01em;
}

.s-ll-title .bracket-left  { margin-right: 14px; }
.s-ll-title .bracket-right { margin-left: 14px; }

/* Trích dẫn - metrics theo .s05-quote-text, riêng màu đen theo nền sáng */
.s-ll-quote {
  position: absolute;
  left: 51.17%;
  top: 40.46%;
  width: 40.48%;
  font-family: 'SuisseIntl', sans-serif;
}

/* Chữ trong các khối collage toạ độ tuyệt đối phải co giãn theo viewport thì mới
   giữ đúng tỷ lệ với khung. Cỡ chữ cố định + khung tính theo % = chữ tràn/đè khi
   màn hẹp hơn 1440 (Macbook 13", iPad). clamp max = đúng cỡ của bản vẽ 1440. */
.s-ll-quote p {
  color: #000000;
  margin: 0;
}

.s05-bottom-row {
  margin-top: 40px;
}

/* ==========================================================================
   SECTION 01 MARQUEE GALLERY TRACK (100vw Overlapping Collage Strip)
   ========================================================================== */
.s01-marquee-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 100px;
  overflow: visible;
  padding: 90px 0;
}

.s01-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
}

.s01-marquee-item {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0 !important; /* Bỏ bo tròn hoàn toàn */
  box-shadow: none !important; /* Bỏ drop shadow hoàn toàn theo yêu cầu */
  position: relative;
  transition: transform 180ms ease-out;
  transform-origin: center center;
}

.s01-marquee-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0 !important;
}

/* Định hình KÍCH THƯỚC, ĐỘ ĐÈ NHAU TĂNG CAO (Negative Margin lớn hơn) và ĐỘ LỆCH DỌC Y (translateY) */
.s01-marquee-item.item-1  { width: 150px; height: 210px; transform: translateY(-40px); z-index: 2; margin-right: -85px; }
.s01-marquee-item.item-2  { width: 360px; height: 500px; transform: translateY(15px);  z-index: 6; margin-right: -140px; }
.s01-marquee-item.item-3  { width: 170px; height: 220px; transform: translateY(-70px); z-index: 9; margin-right: -95px; }
.s01-marquee-item.item-4  { width: 290px; height: 380px; transform: translateY(50px);  z-index: 3; margin-right: -125px; }
.s01-marquee-item.item-5  { width: 120px; height: 140px; transform: translateY(-25px); z-index: 10; margin-right: -75px; }
.s01-marquee-item.item-6  { width: 400px; height: 280px; transform: translateY(-80px); z-index: 4; margin-right: -170px; }
.s01-marquee-item.item-7  { width: 250px; height: 400px; transform: translateY(25px);  z-index: 8; margin-right: -115px; }
.s01-marquee-item.item-8  { width: 110px; height: 110px; transform: translateY(15px);  z-index: 11; margin-right: -60px; }
.s01-marquee-item.item-9  { width: 340px; height: 440px; transform: translateY(-50px); z-index: 3; margin-right: -155px; }
.s01-marquee-item.item-10 { width: 270px; height: 470px; transform: translateY(5px);   z-index: 7; margin-right: -125px; }
.s01-marquee-item.item-11 { width: 140px; height: 140px; transform: translateY(35px);  z-index: 9; margin-right: -75px; }
.s01-marquee-item.item-12 { width: 380px; height: 520px; transform: translateY(-30px); z-index: 7; margin-right: -180px; }
.s01-marquee-item.item-13 { width: 230px; height: 290px; transform: translateY(60px);  z-index: 10; margin-right: -115px; }
.s01-marquee-item.item-14 { width: 310px; height: 210px; transform: translateY(-60px); z-index: 5; margin-right: -145px; }
.s01-marquee-item.item-15 { width: 290px; height: 480px; transform: translateY(35px);  z-index: 8; margin-right: -130px; }
.s01-marquee-item.item-16 { width: 210px; height: 270px; transform: translateY(-30px); z-index: 4; margin-right: -80px; }

/* ==========================================================================
   MONTSAND SECTION STYLING (NTK Diệp Yến & Founder Montsand)
   ========================================================================== */
/* ==========================================================================
   SECTION MONTSAND - NTK DIỆP YẾN (Figma Frame node 124:115)
   Frame 1476 x 2266.649 quy đổi về container 1440px, hệ số 0.9756. Bản vẽ dựng
   bằng flex 2 cột nên khối này để chiều cao tự nhiên (không ghim aspect-ratio),
   như vậy đoạn text tiếng Việt dài hơn bản vẽ cũng không bị cắt đáy.
   Padding + bề rộng cột tính theo % bề ngang khung nên co giãn đúng tỷ lệ.
   ========================================================================== */
.s-ms-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4.465%;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 5.388% 4.414% 5.799% 5.827%;
  background-color: #111111;
  overflow: hidden;
}

/* 4 dấu góc: cùng 2 file SVG chung, lật/xoay để ra 4 hướng. Lề trên/dưới tính
   bằng vw chứ không phải % (vì % của top sẽ ăn theo chiều cao khối, mà chiều
   cao ở đây do nội dung quyết định nên dấu góc sẽ trôi). */
.s-ms-corner {
  position: absolute;
  width: 2.84%;
  height: auto;
  display: block;
}

.s-ms-corner-tl { left: 2.62%;  top: clamp(14px, 1.84vw, 27px);    transform: scaleX(-1); }
.s-ms-corner-tr { right: 1.20%; top: clamp(14px, 1.84vw, 27px); }
.s-ms-corner-bl { left: 2.62%;  bottom: clamp(18px, 2.47vw, 36px); transform: rotate(180deg); }
.s-ms-corner-br { right: 1.20%; bottom: clamp(18px, 2.47vw, 36px); transform: scaleY(-1); }

/* --- Cột trái: headline + chân dung + lockup Workbench --- */
.s-ms-left-col {
  flex: 0 0 35.023%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4.56vw, 66px);
  /* Bản vẽ đặt cột trái thấp hơn cột phải 19.47px; % của margin ăn theo bề
     ngang nên vẫn co giãn đồng bộ với padding. */
  margin-top: 1.32%;
}

.s-ms-headline {
  font-family: 'Xanh Mono', serif, monospace;
  font-size: clamp(30px, 5.38vw, 77px);
  line-height: 0.936;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  word-spacing: -0.32em;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.s-ms-line.s-lime { color: #dafc69; }

/* Thụt lề từng dòng theo bản vẽ (10.59px và 77px trên cỡ chữ gốc 79.421px) */
.s-ms-line-founder   { margin-left: 0.133em; }
.s-ms-line-brandword { margin-left: 0.97em; }
.s-ms-line-brand     { margin-left: 0.97em; margin-top: -0.063em; }

.s-ms-portrait {
  width: 100%;
  aspect-ratio: 463.931 / 909.027;
  overflow: hidden;
}

.s-ms-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lockup Workbench - dùng lại .text-workbench + .bracket-suisse của trang.
   Opacity đặt trên từng span vì bracket đã có sẵn opacity riêng. */
.s-ms-lockup {
  font-size: clamp(28px, 5.78vw, 83px);
  color: #ffffff;
}

.s-ms-title {
  display: flex;
  align-items: center;
  width: max-content;
  line-height: 0.953;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.s-ms-title .text-workbench,
.s-ms-title .text-workbench-delicate { opacity: 0.6; }
.s-ms-title .text-workbench { letter-spacing: 0.06em; }
.s-ms-title .text-workbench-delicate { letter-spacing: -0.01em; }
.s-ms-title .bracket-left  { margin-right: 0.44em; }
.s-ms-title .bracket-right { margin-left: 0.44em; }

.s-ms-title-1 { margin-left: 0.310em; }
.s-ms-title-2 { margin-left: 0.448em; }
.s-ms-title-3 { margin-top: 0.106em; }

.s-ms-meta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.15vw, 31px);
  margin-top: clamp(16px, 2.44vw, 35px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cccfd4;
  white-space: nowrap;
}

.s-ms-meta-group {
  display: flex;
  gap: 4px;
}

.s-ms-meta-item { opacity: 0.55; }

/* --- Cột phải: 2 khối trích dẫn + dải ảnh --- */
.s-ms-right-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.98vw, 43px);
}

.s-ms-quote p {
  color: #bed080;
  margin: 0;
}

/* Bản vẽ chèn 1 dòng trống giữa 2 đoạn, quy ra đúng 1 line-height */
.s-ms-quote p + p { margin-top: 1.2em; }

.s-ms-photo-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4.67vw, 67px);
}

/* gap tính bằng % để 224.232 : 50 : 527.413 của bản vẽ giữ nguyên tỷ lệ */
.s-ms-photo-row {
  display: flex;
  align-items: flex-start;
  gap: 6.237%;
}

.s-ms-photo { overflow: hidden; }

.s-ms-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-ms-photo-jacket { flex: 0 0 27.97%; aspect-ratio: 224.232 / 210.683; }
.s-ms-photo-sewing { flex: 1 1 auto; min-width: 0; aspect-ratio: 527.413 / 280.472; }
.s-ms-photo-bridal { width: 100%; aspect-ratio: 801.645 / 730.618; }

/* ==========================================================================
   SECTION HIẾU CAO - CEO ARTCLASS FASHION AGENCY (Figma node 133:28)
   Layout 2 cột: ảnh trái co giãn tự do + panel #111 rộng cố định 713/1476 của
   khung. Chiều cao do panel quyết định, ảnh kéo theo (align-items: stretch),
   nên đoạn text dài ngắn thế nào khối cũng không bao giờ hụt chỗ.
   ========================================================================== */
.s-hieucao-block {
  display: flex;
  align-items: stretch;
  max-width: 1440px;
  margin: 100px auto 0 auto;
  width: 100%;
  overflow: hidden;
}

.s-hc-photo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.s-hc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-hc-panel {
  flex: 0 0 48.31%;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5.35vw, 77px);
  box-sizing: border-box;
  padding: clamp(30px, 4.4vw, 63px) clamp(26px, 3.93vw, 57px);
  background-color: #111111;
}

/* Headline canh trái, cụm meta canh phải, cả hai dóng chân dưới */
.s-hc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.s-hc-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.196em;
  font-family: 'Xanh Mono', serif, monospace;
  font-size: clamp(30px, 4.5vw, 65px);
  line-height: 0.93;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  word-spacing: -0.32em;
  color: #eaeaea;
  pointer-events: none;
}

/* Bản vẽ: 2 dòng đầu canh trái trong khối, 2 dòng sau canh phải */
.s-hc-lines-start { align-self: stretch; text-align: left; }
.s-hc-lines-end   { text-align: right; }

.s-hc-line { white-space: nowrap; }

.s-hc-meta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.15vw, 31px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cccfd4;
  white-space: nowrap;
}

.s-hc-meta-group {
  display: flex;
  gap: 4px;
}

.s-hc-meta-item { opacity: 0.55; }

.s-hc-quote p { color: #bed080; }
.s-hc-quote p + p { margin-top: 1.2em; }

/* ==========================================================================
   BANNER FOUNDER LA LUNE (Figma Group 1410119036 node 48:229)
   Frame 1871 x 856 quy đổi về container 1440px, hệ số 0.7696.
   Trước đây là 1 ảnh phẳng, nay dựng lại bằng code.
   ========================================================================== */
.s-vv-banner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1871 / 856;
  background-color: #111111;
  overflow: hidden;
}

/* 4 dấu góc: cùng 2 file SVG, lật/xoay để ra 4 hướng */
.s-vv-corner {
  position: absolute;
  width: 2.24%;
  height: auto;
  display: block;
}

.s-vv-corner-tl { left: 4.72%;  top: 4.21%;  transform: scaleX(-1); }
.s-vv-corner-tr { left: 95.26%; top: 4.21%; }
.s-vv-corner-bl { left: 4.72%;  top: 95.14%; transform: rotate(180deg); }
.s-vv-corner-br { left: 95.26%; top: 95.14%; transform: scaleY(-1); }

.s-vv-tag {
  position: absolute;
  white-space: nowrap;
}

.s-vv-tag-emag    { left: 12.19%; top: 14.34%; }
.s-vv-tag-fashion { left: 78.07%; top: 79.49%; }
.s-vv-tag-year    { left: 85.56%; top: 79.49%; }

.s-vv-strip {
  position: absolute;
  overflow: hidden;
}

.s-vv-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-vv-strip-suit   { left: 12.18%; top: 24.40%; width: 30.17%; height: 12.51%; }
.s-vv-strip-models { left: 51.19%; top: 44.99%; width: 36.19%; height: 14.03%; }
.s-vv-strip-eye    { left: 12.18%; top: 64.62%; width: 12.42%; height: 12.51%; }

/* Title Xanh Mono. Chữ và dải ảnh cài răng lược ở toạ độ tuyệt đối nên phải giữ
   đúng cỡ + tracking Figma (141.4px & -0.04em quy đổi), không dùng 96px chung. */
.s-vv-line {
  position: absolute;
  font-family: 'Xanh Mono', serif, monospace;
  font-size: clamp(48px, 6.80vw, 109px);
  line-height: 1.02;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  word-spacing: -0.32em;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.s-vv-line-name  { left: 43.85%; top: 24.52%; color: #dafc69; }
.s-vv-line-role  { left: 12.18%; top: 44.99%; }
.s-vv-line-brand { left: 27.35%; top: 64.62%; color: #dafc69; }

/* ==========================================================================
   BANNER THE RAW & FREE DNA (Figma Frame node 124:96)
   Frame 1476 x 1261.192 quy đổi về container 1440px, hệ số 0.9756.
   3 ảnh hậu trường + title Workbench + đoạn so sánh Tokyo/Seoul/Việt Nam.
   ========================================================================== */
.s-dna-banner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1476 / 1261.192;
  background-color: #111111;
  overflow: hidden;
}

/* 4 dấu góc: cùng 2 file SVG chung, lật/xoay để ra 4 hướng */
.s-dna-corner {
  position: absolute;
  width: 2.84%;
  height: auto;
  display: block;
}

.s-dna-corner-tl { left: 1.94%;  top: 1.38%;  transform: scaleX(-1); }
.s-dna-corner-tr { left: 95.29%; top: 1.38%; }
.s-dna-corner-bl { left: 1.94%;  top: 96.55%; transform: rotate(180deg); }
.s-dna-corner-br { left: 95.29%; top: 96.55%; transform: scaleY(-1); }

.s-dna-photo {
  position: absolute;
  overflow: hidden;
}

.s-dna-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-dna-photo-main   { left: 5.15%;  top: 6.34%;  width: 59.13%; height: 53.04%; }
.s-dna-photo-models { left: 67.30%; top: 6.34%;  width: 27.57%; height: 22.46%; }
.s-dna-photo-white  { left: 73.45%; top: 32.02%; width: 15.19%; height: 27.28%; }

/* Chữ trong khối toạ độ tuyệt đối phải co giãn theo viewport mới giữ đúng tỷ lệ
   với khung; clamp max = đúng cỡ của bản vẽ quy về 1440. */
.s-dna-quote {
  position: absolute;
  left: 39.16%;
  top: 66.05%;
  width: 54.28%;
}

.s-dna-quote p {
  color: #bed080;
  margin: 0;
}

/* Title Workbench - dùng lại .text-workbench + .bracket-suisse của trang.
   Opacity đặt trên từng span vì bracket đã có sẵn opacity riêng. */
.s-dna-title {
  position: absolute;
  display: flex;
  align-items: center;
  width: max-content;
  font-size: clamp(34px, 5.78vw, 83px);
  line-height: 1.15;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.s-dna-title .text-workbench,
.s-dna-title .text-workbench-delicate { opacity: 0.6; }
.s-dna-title .text-workbench { letter-spacing: 0.06em; }
.s-dna-title .text-workbench-delicate { letter-spacing: -0.01em; }
.s-dna-title .bracket-left  { margin-right: 0.44em; }
.s-dna-title .bracket-right { margin-left: 0.44em; }

.s-dna-title-1 { left: 6.93%;  top: 65.97%; }
.s-dna-title-2 { left: 12.63%; top: 72.42%; }
.s-dna-title-3 { left: 6.30%;  top: 79.58%; }

.s-dna-meta {
  position: absolute;
  left: 6.30%;
  top: 89.44%;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.15vw, 31px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cccfd4;
  white-space: nowrap;
}

/* "FASHION /" và "2026" cách nhau 92.57px tính từ đầu chữ; IBM Plex Mono rộng
   0.6em/ký tự nên phần dôi ra chỉ còn ~6px. */
.s-dna-meta-group {
  display: flex;
  gap: 4px;
}

.s-dna-meta-item { opacity: 0.55; }

/* ==========================================================================
   KHỐI NTK DIỆP YẾN (Figma Frame node 130:195)
   Frame 1476px quy đổi về container 1440px, hệ số 0.9756. Flex 2 cột: cột trái
   co giãn tự do, panel #111 bên phải rộng cố định 665/1476. Chiều cao do panel
   quyết định nên đoạn trích dẫn dài ngắn thế nào cũng không bị cắt.
   ========================================================================== */
.s-dy-block {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1440px;
  margin: 70px auto 0 auto;
  background-color: #111111;
}

/* Ảnh nền cửa hàng lộ ra ở dải trên và dưới ảnh chính (bản vẽ chừa 34px) */
.s-dy-left {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  box-sizing: border-box;
  padding: 3.4% 0;
  overflow: hidden;
}

/* Bản vẽ đặt ảnh nền cao 139.37% và đẩy lên -31.16%, tức phần lộ ra là khoảng
   22%-94% chiều cao ảnh (dải kệ đồ), không phải vùng giữa mà cover mặc định lấy. */
.s-dy-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 86%;
  display: block;
}

.s-dy-photo-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.s-dy-photo-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-dy-panel {
  flex: 0 0 45.05%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.17vw, 60px);
  box-sizing: border-box;
  padding: clamp(24px, 2.92vw, 42px) clamp(20px, 3.33vw, 48px);
  background-color: #111111;
}

/* Title Workbench - dùng lại .text-workbench + .bracket-suisse của trang.
   Bản vẽ để ngoặc cùng cỡ và cùng độ đậm với chữ, nên bỏ opacity mặc định. */
.s-dy-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: clamp(30px, 6.78vw, 98px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.s-dy-title .text-workbench { word-spacing: -0.3em; }

.s-dy-title .bracket-suisse { opacity: 1; }
.s-dy-title .bracket-left  { margin-right: 0.06em; }
.s-dy-title .bracket-right { margin-left: 0.06em; }

/* Hàng giữa: nhãn - ảnh nhỏ - nhãn, căn giữa theo trục ngang */
.s-dy-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4.17vw, 60px);
  width: 100%;
}

.s-dy-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.6;
  white-space: nowrap;
}

.s-dy-photo-side {
  flex: 0 0 auto;
  width: 30.24%;
  max-width: 200px;
  aspect-ratio: 196.072 / 245;
  overflow: hidden;
}

.s-dy-photo-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-dy-quote {
  width: 100%;
  text-align: center;
}

.s-dy-quote p { color: #bed080; }

/* ==========================================================================
   SECTION 02 - NGHỊCH LÝ CỐT LÕI (Figma SCREEN 6 node 62:548)
   Frame 2108px, vùng nội dung 1914.32px quy đổi về container 1440px, hệ số 0.7522.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BANNER VIETNAMESE FASHION (Figma Frame node 139:77)
   Frame 1476px quy đổi về container 1440px, hệ số 0.9756. Hai dải xếp dọc, mỗi
   dải là flex 2 cột nên chiều cao do nội dung quyết định - không ghim
   aspect-ratio, đoạn text dài hơn bản vẽ cũng không bị cắt.
   -------------------------------------------------------------------------- */
.s-vf-banner {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* Dải trên: nền #111, ảnh hero co giãn + panel xanh neon rộng cố định */
.s-vf-top {
  position: relative;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  padding: 3.388% 5.894%;
  background-color: #111111;
}

/* 4 dấu góc nằm trong vùng padding của dải, dùng lại 2 file SVG chung */
.s-vf-corner {
  position: absolute;
  width: 2.91%;
  height: auto;
  display: block;
}

.s-vf-corner-tl { left: 2.43%;  top: 4.22%;  transform: scaleX(-1); }
.s-vf-corner-tr { left: 95.63%; top: 3.92%; }
.s-vf-corner-bl { left: 2.43%;  bottom: 3.99%; transform: rotate(180deg); }
.s-vf-corner-br { left: 95.63%; bottom: 4.29%; transform: scaleY(-1); }

/* Ảnh đặt absolute để KHÔNG tham gia tính chiều cao dải: chiều cao do panel xanh
   quyết định, ảnh chỉ việc lấp đầy phần còn lại (đúng cách bản vẽ dựng). */
.s-vf-hero {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.s-vf-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-vf-panel {
  flex: 0 0 52.53%;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.83vw, 26px);
  box-sizing: border-box;
  padding: clamp(18px, 2.44vw, 35px) clamp(22px, 3.52vw, 51px);
  background-color: #dafc69;
}

/* Title Workbench - dùng lại .text-workbench + .bracket-suisse của trang */
.s-vf-headline {
  font-size: clamp(24px, 5.78vw, 83px);
  line-height: 1.15;
  text-transform: uppercase;
  color: #000000;
  pointer-events: none;
}

.s-vf-title-1 {
  width: 84.5%;
  text-align: center;
  white-space: nowrap;
  /* Bản vẽ kéo dòng dưới lên sát chân dòng trên */
  margin-bottom: -0.12em;
}

.s-vf-title-1 .text-workbench { letter-spacing: 0.06em; }

.s-vf-title-2 {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
}

.s-vf-title-2 .text-workbench-delicate { letter-spacing: -0.01em; }
.s-vf-title-2 .bracket-left  { margin-right: 0.281em; }
.s-vf-title-2 .bracket-right { margin-left: 0.281em; }

/* 2 ảnh nhỏ dóng đỉnh trên, chiều cao khác nhau đúng bản vẽ */
.s-vf-thumbs {
  display: flex;
  align-items: flex-start;
  gap: 3.28%;
  width: 100%;
}

.s-vf-thumb {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.s-vf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-vf-thumb-rack  { aspect-ratio: 280.5 / 168.561; }
.s-vf-thumb-crowd { aspect-ratio: 280.5 / 232; }

.s-vf-meta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.15vw, 31px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000000;
  white-space: nowrap;
}

.s-vf-meta-group {
  display: flex;
  gap: 4px;
}

.s-vf-meta-item { opacity: 0.55; }

/* Dải dưới: ảnh cửa hàng trái + đoạn phản biện trên nền #111 */
.s-vf-bottom {
  display: flex;
  align-items: stretch;
  padding-left: 5.691%;
}

/* Cùng lý do với .s-vf-hero: chiều cao dải do đoạn text bên phải quyết định */
.s-vf-store {
  position: relative;
  flex: 0 0 38.75%;
  overflow: hidden;
}

.s-vf-store img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-vf-note {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 5.623% 2.913%;
  background-color: #111111;
}

.s-vf-quote p { color: #bed080; }

/* --------------------------------------------------------------------------
   KHỐI ALEX FOX - GIÁM ĐỐC SÁNG TẠO (Figma Frame node 139:163)
   Frame 1476px quy đổi về container 1440px, hệ số 0.9756. Panel #111 nổi trên
   một ảnh nền, chừa ảnh lộ ra ở mép trái/phải/đáy. Panel là flex 2 cột, chiều
   cao do nội dung quyết định nên không ghim aspect-ratio.
   -------------------------------------------------------------------------- */
.s-af-block {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.s-af-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-af-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 58px);
  box-sizing: border-box;
  margin: 0 7.32% 4% 5.22%;
  padding: clamp(24px, 5.42vw, 78px);
  background-color: #111111;
}

/* 4 dấu góc: cùng 2 file SVG chung, lật/xoay để ra 4 hướng. Lề trên/dưới dùng vw
   chứ không phải % vì % của top ăn theo chiều cao panel, mà chiều cao ở đây do
   nội dung quyết định nên dấu góc sẽ trôi. */
.s-af-corner {
  position: absolute;
  width: 2.91%;
  height: auto;
  display: block;
}

.s-af-corner-tl { left: 3.13%;  top: clamp(12px, 1.5vw, 22px);    transform: scaleX(-1); }
.s-af-corner-tr { right: 3.13%; top: clamp(12px, 1.5vw, 22px); }
.s-af-corner-bl { left: 3.13%;  bottom: clamp(12px, 1.5vw, 22px); transform: rotate(180deg); }
.s-af-corner-br { right: 3.13%; bottom: clamp(12px, 1.5vw, 22px); transform: scaleY(-1); }

/* --- Cột trái --- */
.s-af-left {
  flex: 0 0 41.02%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4.2vw, 61px);
}

.s-af-headline {
  font-family: 'Xanh Mono', serif, monospace;
  font-size: clamp(30px, 6.15vw, 89px);
  line-height: 0.957;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  word-spacing: -0.32em;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

/* Thụt lề từng dòng theo bản vẽ (0 / 25.32% / 9.9% bề ngang cột) */
.s-af-line-name  { color: #dafc69; }
.s-af-line-role  { margin-left: 25.32%; }
.s-af-line-craft { margin-left: 9.9%; }

/* Chân dung chiếm hết phần chiều cao còn thừa giữa headline và lockup */
.s-af-portrait {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.s-af-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lockup Workbench - dùng lại .text-workbench + .bracket-suisse của trang */
.s-af-lockup {
  font-size: clamp(24px, 5.78vw, 83px);
  color: #ffffff;
}

.s-af-title {
  display: flex;
  align-items: center;
  width: max-content;
  line-height: 0.953;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.s-af-title .text-workbench,
.s-af-title .text-workbench-delicate { opacity: 0.6; }
.s-af-title .text-workbench { letter-spacing: 0.06em; }
.s-af-title .text-workbench-delicate { letter-spacing: -0.01em; }
.s-af-title .bracket-left  { margin-right: 0.44em; }
.s-af-title .bracket-right { margin-left: 0.44em; }

.s-af-title-1 { margin-left: 0.310em; }
.s-af-title-2 { margin-left: 0.448em; }
.s-af-title-3 { margin-top: 0.106em; }

.s-af-meta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.15vw, 31px);
  margin-top: clamp(16px, 2.44vw, 35px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cccfd4;
  white-space: nowrap;
}

.s-af-meta-group {
  display: flex;
  gap: 4px;
}

.s-af-meta-item { opacity: 0.55; }

/* --- Cột phải --- */
.s-af-right {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6.44vw, 93px);
}

.s-af-quote p { color: #bed080; }
.s-af-quote p + p { margin-top: 1.2em; }

.s-af-photos {
  display: flex;
  align-items: center;
  gap: 10.53%;
  width: 100%;
}

.s-af-photo { overflow: hidden; }

.s-af-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-af-photo-chess { flex: 0 0 58.06%; aspect-ratio: 353 / 435; }
.s-af-photo-face  { flex: 1 1 auto; min-width: 0; aspect-ratio: 191 / 169; }

/* Dải 7 ảnh chạy ngang: dóng đỉnh trên, cách đều 15px, KHÔNG đè nhau */
.s02-marquee-wrapper {
  padding: 40px 0;
}

.s02-marquee-track {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: max-content;
  will-change: transform;
}

.s02-marquee-item {
  flex-shrink: 0;
  overflow: hidden;
}

.s02-marquee-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.s02-marquee-item.item-a { width: 228px; height: 316px; }
.s02-marquee-item.item-b { width: 295px; height: 409px; }
.s02-marquee-item.item-c { width: 420px; height: 316px; }
.s02-marquee-item.item-d { width: 409px; height: 409px; }
.s02-marquee-item.item-e { width: 310px; height: 316px; }
.s02-marquee-item.item-f { width: 310px; height: 316px; }
.s02-marquee-item.item-g { width: 409px; height: 409px; }

/* Khối ảnh full width 2 cột Section 2 (height 300px tại 1440px, tự crop fill) */
.s02-full2col-photo {
  flex: 8;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.s02-full2col-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dóng baseline khít với 2 dòng title: EMAGAZINE ~ GIÁM ĐỐC{ left: 9.95%;  top: 89.39%; }

/* ==========================================================================
   SECTION 03 - BẢN KẾ HOẠCH TƯƠNG LAI GẦN (Figma Frame node 139:214)
   Khung nội dung 1440px (bản vẽ: lề trái 109, mép phải 1549). Cột chữ bắt đầu
   ở 569, tức thụt vào 460/1440 = 31.94%. Toàn bộ dựng bằng flow dọc + flex nên
   chiều cao do nội dung quyết định, không ghim aspect-ratio.
   ========================================================================== */

/* --- Dải chữ 2 cột (spacer 460 : 470 : 470, gap 40) --- */
.s03-textrow {
  display: flex;
  align-items: flex-start;
  gap: 2.78%;
  width: 100%;
}

.s03-spacer { flex: 0 0 31.94%; }

/* Metrics lấy nguyên của .s01-col-text để body text section 3 không lệch với
   phần còn lại của bài. Bản vẽ để 1.35/-0.72px/opacity .6 nhưng mặt bằng chung
   của trang là 1.52/-0.5px/.55 nên theo trang. */
.s03-textrow p {
  flex: 1 1 0;
  min-width: 0;
  font-family: 'SuisseIntl', sans-serif;
  font-size: 18px;
  line-height: 1.52;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* --- Banner tấm vé thông hành --- */
.s03-banner {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.s03-banner-photo {
  position: relative;
  flex: 0 0 47.78%;
  aspect-ratio: 688 / 791;
  overflow: hidden;
}

.s03-banner-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bản vẽ đổ bóng đen cứng lệch trái - xuống, không blur mềm */
.s03-banner-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4.4%;
  box-sizing: border-box;
  padding: clamp(18px, 3.06vw, 44px);
  background-color: #dafc69;
  box-shadow: -39px 56px 2px #000000;
}

.s03-banner-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5.21vw, 75px);
}

/* Title Workbench - dùng lại .text-workbench + .bracket-suisse của trang */
.s03-banner-headline {
  font-size: clamp(22px, 4.35vw, 63px);
  line-height: 1.15;
  text-transform: uppercase;
  color: #000000;
  pointer-events: none;
}

.s03-banner-title-1 {
  text-align: center;
  white-space: nowrap;
}

.s03-banner-title-1 .text-workbench { letter-spacing: 0.06em; }

.s03-banner-title-2 {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
}

.s03-banner-title-2 .text-workbench-delicate { letter-spacing: -0.01em; }
.s03-banner-title-2 .bracket-left  { margin-right: 0.433em; }
.s03-banner-title-2 .bracket-right { margin-left: 0.433em; }

.s03-banner-text p {
  color: #000000;
  margin: 0;
}

.s03-banner-text p + p { margin-top: 1.2em; }

.s03-banner-side {
  flex: 0 0 22.9%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.s03-banner-thumbs {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.28vw, 47px);
}

.s03-banner-thumb { overflow: hidden; }

.s03-banner-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s03-banner-thumb-1 { width: 81.24%; aspect-ratio: 182.168 / 128.366; }
.s03-banner-thumb-2 { width: 100%;   aspect-ratio: 224.225 / 203.014; }

/* --- Meta dùng chung cho cả banner và khối Hiếu Cao --- */
.s03-banner-meta,
.s03-hc-meta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.15vw, 31px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.s03-banner-meta { color: #000000; }
.s03-hc-meta { color: #cccfd4; margin-top: clamp(16px, 2.5vw, 36px); }

.s03-meta-group {
  display: flex;
  gap: 4px;
}

.s03-meta-item { opacity: 0.55; }

/* --- 3 thẻ kế hoạch hành động --- */
.s03-plan {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.s03-plan-label {
  flex: 0 0 12.24%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.55;
}

/* Mép trái phải trùng mép trái cột chữ của .s03-textrow: spacer 31.94% cộng
   thêm gap 2.78% = 34.72%, nên bề rộng còn 100% - 34.72% = 65.28%. */
.s03-plan-cards {
  flex: 0 0 65.28%;
  display: flex;
  align-items: stretch;
  gap: 1.22%;
}

.s03-plan-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
  padding: clamp(14px, 1.61vw, 23px) clamp(12px, 1.42vw, 20px);
  background-color: #d1d1d1;
}

.s03-plan-card-lime { background-color: #dafc69; }

.s03-plan-photo { overflow: hidden; }

.s03-plan-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s03-plan-photo-1 { width: 100%;    aspect-ratio: 185.86 / 123.876; }
.s03-plan-photo-2 { width: 93.53%;  aspect-ratio: 173.793 / 171.195; }
.s03-plan-photo-3 { width: 94.85%;  aspect-ratio: 176.243 / 173.609; }

.s03-plan-body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.71vw, 25px);
  color: #000000;
}

.s03-plan-title {
  font-family: 'SuisseIntl', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.42vw, 20px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.s03-plan-body p {
  font-family: 'SuisseIntl', sans-serif;
  font-size: clamp(13px, 1.04vw, 15px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0;
}

/* --- Khối Hiếu Cao: panel #111 thụt vào bằng cột chữ --- */
.s03-hc-panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4.03%;
  box-sizing: border-box;
  /* Cùng mốc lề trái với .s03-plan-cards và cột chữ (xem ghi chú ở trên) */
  margin-left: 34.72%;
  padding: clamp(24px, 5.56vw, 80px);
  background-color: #111111;
}

/* Lề trên/dưới của dấu góc tính bằng vw: % của top sẽ ăn theo chiều cao panel,
   mà chiều cao ở đây do nội dung quyết định nên dấu góc sẽ trôi. */
.s03-hc-corner {
  position: absolute;
  width: 2.89%;
  height: auto;
  display: block;
}

.s03-hc-corner-tl { left: 4.07%;  top: clamp(12px, 1.4vw, 20px);    transform: scaleX(-1); }
.s03-hc-corner-tr { right: 3.13%; top: clamp(12px, 1.4vw, 20px); }
.s03-hc-corner-bl { left: 4.07%;  bottom: clamp(12px, 1.4vw, 20px); transform: rotate(180deg); }
.s03-hc-corner-br { right: 3.13%; bottom: clamp(12px, 1.4vw, 20px); transform: scaleY(-1); }

.s03-hc-left {
  flex: 0 0 38.1%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 2.78vw, 40px);
}

.s03-hc-top {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.78vw, 40px);
}

.s03-hc-headline {
  font-family: 'Xanh Mono', serif, monospace;
  font-size: clamp(26px, 3.77vw, 54px);
  line-height: 0.936;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  word-spacing: -0.32em;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

.s03-hc-line-name   { color: #dafc69; }
.s03-hc-line-agency { color: #dafc69; margin-left: 1.57em; }

.s03-hc-portrait {
  width: 100%;
  aspect-ratio: 316.917 / 620.967;
  overflow: hidden;
}

.s03-hc-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lockup Workbench - dùng lại .text-workbench + .bracket-suisse của trang */
.s03-hc-lockup {
  font-size: clamp(20px, 4.05vw, 58px);
  color: #ffffff;
}

.s03-hc-title {
  display: flex;
  align-items: center;
  width: max-content;
  line-height: 0.953;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.s03-hc-title .text-workbench,
.s03-hc-title .text-workbench-delicate { opacity: 0.6; }
.s03-hc-title .text-workbench { letter-spacing: 0.06em; }
.s03-hc-title .text-workbench-delicate { letter-spacing: -0.01em; }
.s03-hc-title .bracket-left  { margin-right: 0.433em; }
.s03-hc-title .bracket-right { margin-left: 0.433em; }

.s03-hc-title-1 { margin-left: 0.310em; }
.s03-hc-title-2 { margin-left: 0.448em; }
.s03-hc-title-3 { margin-top: 0.106em; }

.s03-hc-right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.09vw, 30px);
}

.s03-hc-quote p { color: #bed080; }
.s03-hc-quote p + p { margin-top: 1.2em; }

.s03-hc-photos {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.27vw, 47px);
}

.s03-hc-photo-big {
  width: 100%;
  aspect-ratio: 475 / 380;
  overflow: hidden;
}

.s03-hc-photo-row {
  display: flex;
  align-items: flex-start;
  gap: 7.77%;
}

.s03-hc-photo { overflow: hidden; }

.s03-hc-photo-big img,
.s03-hc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s03-hc-photo-1 { flex: 0 0 32.25%; aspect-ratio: 153.176 / 143.92; }
.s03-hc-photo-2 { flex: 1 1 auto; min-width: 0; aspect-ratio: 285 / 191.594; }

/* Floating Nav Bar cố định phía dưới (Glassmorphism Pill) */
.floating-nav-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 22px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 10px 24px;
  border-radius: 40px;
  border: 0.8px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}

.nav-item {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.nav-item:hover {
  color: #ffffff;
  opacity: 1;
}

.nav-item.active {
  color: #dafc69;
  opacity: 1;
}

.nav-item.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   SCROLL REVEAL — fade in nhẹ nhàng theo viewport
   ========================================================================== */
.reveal-enabled [data-scroll-reveal] {
  opacity: 0;
  transition: opacity 720ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-enabled [data-scroll-reveal].is-revealing {
  will-change: opacity;
}

.reveal-enabled [data-scroll-reveal].is-revealed {
  opacity: 1;
}

/* Headline Section 01: từng dòng fade-in và trượt nhẹ từ dưới lên. */
.reveal-enabled .screen-01-section .s01-headline-wrapper > p,
.reveal-enabled .screen-02-section .s01-headline-wrapper > p,
.reveal-enabled .screen-03-section .s01-headline-wrapper > p {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 620ms ease, translate 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate;
}

.reveal-enabled .screen-01-section .s01-headline-wrapper.headline-active > p,
.reveal-enabled .screen-02-section .s01-headline-wrapper.headline-active > p,
.reveal-enabled .screen-03-section .s01-headline-wrapper.headline-active > p {
  opacity: 1;
  translate: 0 0;
}

.reveal-enabled .screen-01-section .s01-headline-wrapper.headline-active > .line-1,
.reveal-enabled .screen-02-section .s01-headline-wrapper.headline-active > .line-1,
.reveal-enabled .screen-03-section .s01-headline-wrapper.headline-active > .line-1 {
  transition-delay: 120ms;
}

.reveal-enabled .screen-01-section .s01-headline-wrapper.headline-active > .line-2,
.reveal-enabled .screen-02-section .s01-headline-wrapper.headline-active > .line-2,
.reveal-enabled .screen-03-section .s01-headline-wrapper.headline-active > .line-2 {
  transition-delay: 320ms;
}

.reveal-enabled .screen-01-section .s01-headline-wrapper.headline-active > .line-3,
.reveal-enabled .screen-02-section .s01-headline-wrapper.headline-active > .line-3,
.reveal-enabled .screen-03-section .s01-headline-wrapper.headline-active > .line-3 {
  transition-delay: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-enabled [data-scroll-reveal] {
    opacity: 1;
    transition: none;
    will-change: auto;
  }

  .reveal-enabled .screen-01-section .s01-headline-wrapper > p,
  .reveal-enabled .screen-02-section .s01-headline-wrapper > p,
  .reveal-enabled .screen-03-section .s01-headline-wrapper > p {
    opacity: 1;
    translate: none;
    transition: none;
    will-change: auto;
  }
}

/* ===========================================================================
   RESPONSIVE LAYOUT
   The desktop compositions above intentionally use a large editorial grid.
   These breakpoints keep that grid at wide sizes, then switch dense collages
   and multi-column prose to readable single-column compositions.
   ========================================================================== */
@media (max-width: 1199px) {
  .screen-f-section,
  .screen-01-section,
  .screen-02-section,
  .screen-03-section {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .screen-f-main-container { gap: 72px; }
  .s01-columns-container,
  .s05-main-flex-grid,
  .s05-text-grid-row,

  .s01-big-number { font-size: clamp(210px, 27vw, 390px); }
  .s01-headline-wrapper,
  .s02-af-line { font-size: clamp(42px, 5.5vw, 76px); }
  .s01-col-text,
  .s03-textrow p,
  .f-paragraph-1,
  .f-paragraph-2 { font-size: 17px; }

  /* Khối này rộng cố định 960px nên ở 1024 gần chạm 2 mép màn hình, giữ
     nguyên 24px của desktop sẽ nhìn quá to so với khoảng lề còn lại. */
  .editorial-lead-paragraph { font-size: clamp(19px, 2.05vw, 24px); }

}

/* Tablet landscape: các collage có text dài cần thêm chiều cao để không đè
   lên block kế tiếp khi viewport chỉ còn khoảng 768–1199px. */
@media (min-width: 900px) and (max-width: 1199px) {
  .screen-f-section,
  .screen-01-section,
  .screen-02-section,
  .screen-03-section {
    padding-left: 3.2vw;
    padding-right: 3.2vw;
  }

  /* Lề ngang đã co theo vw nhưng nhịp dọc vẫn là px cứng của bản 1440:
     90px + 160px = 250px giữa 2 section, chiếm 1/3 màn iPad ngang. Co toàn bộ
     nhịp dọc theo cùng hệ số ~0.7 để trang không bị loãng. */
  .screen-01-section,
  .screen-02-section,
  .screen-03-section {
    padding-top: 64px;
    padding-bottom: 112px;
  }
  .screen-f-section {
    padding-top: 64px;
    padding-bottom: 98px;
    gap: 50px;
  }
  .article-content-section { padding-bottom: 56px; }
  .screen-01-container,
  .screen-02-container,
  .screen-03-container { gap: 36px; }

  /* Các khoảng cách lớn giữa những khối trong cùng một section */
  .s-hieucao-block,
  .s02-alexfox-block { margin-top: 70px; }
  .s01-marquee-wrapper { margin-top: 70px; padding: 60px 0; }
  .s01-columns-container.s01-lower-columns,
  .s01-full-image-block,
  .s05-main-flex-grid { margin-top: 50px; }
  .s05-right-col-content { gap: 56px; }

  .screen-f-main-container { gap: 48px; }
  .f-paragraph-1,
  .f-paragraph-2 { font-size: 16px; line-height: 1.45; }

  .s01-hero-full-block { gap: 18px; }
  .s01-headline-wrapper { font-size: clamp(40px, 5vw, 62px); }
  .s01-big-number { font-size: clamp(190px, 25vw, 300px); }
  .s01-columns-container { gap: 28px; }
  .s01-col-text,
  .s03-textrow p { font-size: 16px; line-height: 1.45; }

  /* clamp toàn cục 1.25vw cho ra ~13px ở 1024 — quá bé. Khung này ở dải tablet
     đã được nới cao nên nâng lại được. */
  .s-ll-eyebrow { font-size: clamp(14px, 1.5vw, 18px); }

  /* Chỗ DUY NHẤT quote La Lune phải lệch khỏi cỡ chung: trong dải này khung
     .s-ll-block đã co nhỏ nhưng chưa rã thành lưới dọc (mốc đó là 899px), nên
     đáy clamp 17px làm chữ tràn khỏi khung ở 900px. Từ 1114px trở lên nó chạy
     lại đúng cỡ chung. */
  .s-ll-quote p { font-size: clamp(15px, 1.7vw, 19px); }

  /* Khung dựng lại cho tablet: cao 92vw, nội dung chạy kín tới ~97.5% chiều cao.
     Bản 115vw trước đây để thừa gần 20% khoảng đen ở đáy. */
  .s02-alexfox-block {
    aspect-ratio: auto;
    min-height: 92vw;
  }
  .s02-af-main-photo {
    height: 68%;
  }
  /* Khung tablet rộng rãi hơn bản 1440 nên trả lại cỡ chữ đọc được;
     clamp toàn cục 1.39vw cho ra ~14px ở 1024, quá bé cho body text. */
  .s02-af-quote-mid { top: 26%; width: 36%; }
  /* Tablet composition: headline rechts, labels links als één compact blok. */
  .s02-af-line {
    font-size: clamp(62px, 7.2vw, 94px);
    line-height: .9;
  }
  .s02-af-line-1 { left: 35%; top: 76.5%; }
  .s02-af-line-2 { left: 43%; top: 83.5%; }
  .s02-af-line-3 { left: 36%; top: 90.5%; }
  /* Nhãn editorial phải nằm đúng baseline của 2 dòng title như bản 1440:
     EMAGAZINE ~ GIÁM ĐỐC (line-2), FASHION / 2026 ~ SÁNG TẠO (line-3).
     Khung cao 115vw, title 7.2vw với line-height .9 => baseline của mỗi dòng
     nằm dưới mép trên dòng đó 5.47% chiều cao khung (92vw); trừ tiếp nửa chiều
     cao nhãn (~0.8%) ra được top của nhãn. */
  .s02-af-tag-emag {
    left: 10%;
    top: 88.17%;
    transform: none;
  }
  .s02-af-tag-fashion {
    left: 10%;
    top: 95.17%;
    transform: none;
  }
  .s02-af-tag-year {
    left: 17%;
    top: 95.17%;
    transform: none;
  }

  /* Khối Hiếu Cao giờ là layout flow theo tỷ lệ nên tự co đúng, không cần
     override toạ độ ở dải này nữa. */
}

@media (max-width: 899px) {
  .screen-f-main-container {
    flex-direction: column;
    gap: 48px;
  }

  .f-column-right { gap: 28px; }

  .s01-hero-full-block { gap: 16px; }
  .s01-top-meta { gap: 20px; }
  .s01-meta-col1 { margin-right: 0; }
  .s01-big-number { font-size: clamp(170px, 26vw, 300px); }
  .s01-columns-container { gap: 28px; }
  .s01-col-text,
  .s03-textrow p { font-size: 16px; }

  .s05-main-flex-grid { gap: 28px; }
  .s05-right-col-content { gap: 48px; }
  /* Tỷ lệ 2 : 8.8 của bản desktop làm cột ảnh trái teo còn ~130px trên iPad dọc.
     Nới lại thành 3 : 8 để 2 bức ảnh vẫn đọc được. */
  .s05-left-col-images { flex: 3; }
  .s05-right-col-content { flex: 8; }

  .s03-plan-cards { gap: 10px; }

  /* ==========================================================================
     RÃ CÁC KHỐI COLLAGE TOẠ ĐỘ TUYỆT ĐỐI THÀNH LƯỚI XẾP DỌC
     Dưới 900px khung quá hẹp để giữ toạ độ % của bản vẽ Figma 1440: các dòng
     title, trích dẫn và ảnh sẽ đè lên nhau, phần thừa bị khung overflow:hidden
     cắt mất. Áp dụng chung cho iPad dọc (768–899px) và điện thoại.
     ========================================================================== */

  /* Founder La Lune (Vicki Virus) */
  .s-ll-block {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    box-shadow: none;
  }
  .s-ll-photo,
  .s-ll-eyebrow,
  .s-ll-title,
  .s-ll-quote {
    position: static;
    width: auto;
    height: auto;
  }
  .s-ll-eyebrow { grid-row: 1; }
  .s-ll-title { grid-row: 2; }
  .s-ll-quote { grid-row: 3; }
  .s-ll-photo { grid-row: 4; }
  .s-ll-photo img { min-height: clamp(310px, 42vw, 420px); object-position: center 30%; }
  .s-ll-eyebrow { padding: 22px 20px 0; font-size: clamp(15px, 2vw, 18px); white-space: normal; }
  .s-ll-title { padding: 10px 8px 20px; font-size: clamp(36px, 7.4vw, 64px); white-space: nowrap; }
  .s-ll-title .text-workbench { font-size: 1em; }
  .s-ll-title .bracket-left { margin-right: 2px; }
  .s-ll-title .bracket-right { margin-left: 2px; }
  .s-ll-quote { padding: 0 20px 26px; }

  /* Diệp Yến: mobile chuyển thành poster dọc, đọc theo thứ tự ảnh → tên → quote → ảnh phụ */
  /* NTK Diệp Yến - Montsand: 2 cột gộp thành 1 luồng dọc, thứ tự đọc giữ theo
     bản vẽ (headline -> trích dẫn -> ảnh -> chân dung -> lockup). */
  .s-ms-banner {
    flex-direction: column;
    gap: 32px;
    padding: 44px 20px 40px;
  }
  .s-ms-left-col,
  .s-ms-right-col {
    flex: 0 0 auto;
    width: 100%;
    display: contents;
  }
  .s-ms-corner { width: clamp(18px, 2.4vw, 26px); }
  .s-ms-corner-tl { left: 12px; top: 12px; }
  .s-ms-corner-tr { right: 12px; top: 12px; }
  .s-ms-corner-bl { left: 12px; bottom: 12px; }
  .s-ms-corner-br { right: 12px; bottom: 12px; }
  .s-ms-headline { order: 1; font-size: clamp(34px, 7vw, 64px); white-space: normal; }
  .s-ms-line-founder,
  .s-ms-line-brandword,
  .s-ms-line-brand { margin-left: 0; }
  .s-ms-line-brand { margin-top: 0; }
  .s-ms-quote { order: 2; }
  .s-ms-photo-stack { order: 3; gap: 24px; }
  /* Tỷ lệ 27.97% của bản vẽ làm bức ảnh nhỏ teo còn ~98px ở màn 390px */
  .s-ms-photo-jacket { flex-basis: 34%; }
  /* Ảnh chân dung tỷ lệ 0.51 khi kéo full width sẽ cao gần 2 màn hình; đổi sang
     3/4 và chặn bề ngang để nó không nuốt trọn luồng đọc trên tablet. */
  .s-ms-portrait { order: 4; aspect-ratio: 3 / 4; max-width: 420px; }
  /* .s-ms-lockup vốn là block; đổi sang flex để 3 dòng Workbench canh so le được
     bằng align-self thay vì thụt lề em theo bản vẽ desktop. */
  .s-ms-lockup {
    order: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: min(7.4vw, 44px);
  }
  .s-ms-title-1,
  .s-ms-title-2 { margin-left: 0; }
  .s-ms-title-3 { align-self: flex-start; }
  .s-ms-title .bracket-left  { margin-right: 0.3em; }
  .s-ms-title .bracket-right { margin-left: 0.3em; }
  .s-ms-meta { gap: 18px; }

  /* Banner Founder La Lune */
  .s-vv-banner {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 44px 20px 40px;
  }
  /* Toạ độ % của 4 dấu góc tính theo khung 1871x856; khi khung rã thành lưới
     chúng rơi đè lên nhãn EMAGAZINE / FASHION. Ghim thẳng vào 4 góc thật. */
  .s-vv-corner { width: clamp(18px, 2.4vw, 26px); }
  .s-vv-corner-tl { left: 12px; top: 12px; }
  .s-vv-corner-tr { left: auto; right: 12px; top: 12px; }
  .s-vv-corner-bl { left: 12px; top: auto; bottom: 12px; }
  .s-vv-corner-br { left: auto; right: 12px; top: auto; bottom: 12px; }
  .s-vv-tag,
  .s-vv-strip,
  .s-vv-line { position: static; transform: none; }
  .s-vv-tag-emag { grid-column: 1 / -1; }
  .s-vv-strip { width: 100%; height: auto; aspect-ratio: 2.5 / 1; }
  .s-vv-strip-eye { aspect-ratio: 1 / 1; }
  .s-vv-line {
    font-size: clamp(32px, 9.5vw, 52px);
    line-height: .88;
    width: max-content;
    max-width: 100%;
    white-space: normal;
    letter-spacing: -.035em;
  }
  .s-vv-line + .s-vv-line { margin-top: -6px; }
  .s-vv-line-name,
  .s-vv-line-role,
  .s-vv-line-brand { grid-column: 1 / -1; }
  .s-vv-line-name { justify-self: start; }
  .s-vv-line-role { justify-self: start; margin-left: 10vw; }
  .s-vv-line-brand { justify-self: end; text-align: right; }
  .s-vv-tag-fashion { grid-column: 1; }
  .s-vv-tag-year { grid-column: 2; text-align: right; }

  /* Banner The Raw & Free DNA: rã khung toạ độ tuyệt đối thành lưới 2 cột.
     minmax(0,…) là bắt buộc: title Workbench để white-space:nowrap, nếu để 1fr
     thì min-content của nó thổi rộng track và kéo cả khối tràn ngang. */
  .s-dna-banner {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 15px;
    padding: 44px 20px 40px;
  }
  .s-dna-corner { width: clamp(18px, 2.4vw, 26px); }
  .s-dna-corner-tl { left: 12px; top: 12px; }
  .s-dna-corner-tr { left: auto; right: 12px; top: 12px; }
  .s-dna-corner-bl { left: 12px; top: auto; bottom: 12px; }
  .s-dna-corner-br { left: auto; right: 12px; top: auto; bottom: 12px; }
  .s-dna-photo,
  .s-dna-quote,
  .s-dna-title,
  .s-dna-meta { position: static; transform: none; }
  .s-dna-photo { width: 100%; height: auto; }
  .s-dna-photo img { height: 100%; }
  .s-dna-photo-main   { grid-column: 1 / -1; aspect-ratio: 872.841 / 668.888; }
  .s-dna-photo-models { aspect-ratio: 406.939 / 283.214; align-self: start; }
  .s-dna-photo-white  { aspect-ratio: 224.251 / 344.11; }
  .s-dna-quote { grid-column: 1 / -1; width: 100%; }
  /* "( FASHION )" là dòng rộng nhất và không xuống dòng được, nên cỡ chữ phải
     tính từ bề ngang khả dụng chứ không lấy chung clamp với các khối khác. */
  .s-dna-title {
    grid-column: 1 / -1;
    font-size: min(7.4vw, 44px);
    line-height: 0.953;
    max-width: 100%;
  }
  .s-dna-title .bracket-left  { margin-right: 0.3em; }
  .s-dna-title .bracket-right { margin-left: 0.3em; }
  /* 3 dòng title là grid item nên dính gap 15px của lưới (gap đó dành cho hàng
     ảnh). Triệt tiêu hẳn để cách dòng bằng đúng lockup của các khối khác:
     line-height 0.953, riêng dòng 3 lùi thêm 0.106em. */
  .s-dna-title + .s-dna-title { margin-top: -15px; }
  .s-dna-title + .s-dna-title.s-dna-title-3 { margin-top: calc(0.106em - 15px); }
  .s-dna-title-2,
  .s-dna-title-3 { justify-self: start; }
  .s-dna-meta { grid-column: 1 / -1; gap: 18px; margin-top: 6px; }

  /* NTK Diệp Yến: 2 cột gộp thành 1 luồng dọc */
  .s-dy-block { flex-direction: column; margin-top: 48px; }
  .s-dy-left { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; padding: 0; }
  .s-dy-panel { flex: 0 0 auto; width: 100%; gap: 26px; padding: 34px 20px 38px; }
  .s-dy-title { font-size: min(11vw, 72px); }
  .s-dy-mid { gap: clamp(14px, 5vw, 40px); }
  .s-dy-photo-side { width: 44%; }

  /* Alex Fox: 2 cột gộp thành 1 luồng dọc */
  .s-af-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin: 0 3% 6%;
    padding: 44px 20px 40px;
  }
  .s-af-corner { width: clamp(18px, 2.4vw, 26px); }
  .s-af-corner-tl { left: 12px; top: 12px; }
  .s-af-corner-tr { right: 12px; top: 12px; }
  .s-af-corner-bl { left: 12px; bottom: 12px; }
  .s-af-corner-br { right: 12px; bottom: 12px; }
  .s-af-left,
  .s-af-right { flex: 0 0 auto; align-self: stretch; gap: 28px; }
  .s-af-headline { font-size: clamp(34px, 9vw, 68px); white-space: normal; }
  .s-af-line-role,
  .s-af-line-craft { margin-left: 0; }
  /* Không còn chiều cao thừa để chia, khoá tỷ lệ đúng ảnh gốc */
  .s-af-portrait { flex: 0 0 auto; aspect-ratio: 683 / 1024; max-width: 420px; }
  .s-af-lockup { font-size: min(7.4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
  .s-af-title-1,
  .s-af-title-2 { margin-left: 0; }
  .s-af-title-3 { align-self: flex-start; }
  .s-af-title .bracket-left  { margin-right: 0.3em; }
  .s-af-title .bracket-right { margin-left: 0.3em; }
  .s-af-meta { gap: 18px; }
  .s-af-photos { gap: 5%; }

  /* Vietnamese Fashion: 2 dải rã thành luồng dọc, ảnh trả về flow */
  .s-vf-top,
  .s-vf-bottom { flex-direction: column; }
  .s-vf-top { padding: 44px 20px 40px; }
  .s-vf-corner { width: clamp(18px, 2.4vw, 26px); }
  .s-vf-corner-tl { left: 12px; top: 12px; }
  .s-vf-corner-tr { left: auto; right: 12px; top: 12px; }
  .s-vf-corner-bl { left: 12px; bottom: 12px; }
  .s-vf-corner-br { left: auto; right: 12px; bottom: 12px; }
  .s-vf-hero,
  .s-vf-store { position: static; flex: 0 0 auto; width: 100%; }
  .s-vf-hero img,
  .s-vf-store img { position: static; }
  .s-vf-hero { aspect-ratio: 4 / 3; }
  .s-vf-store { aspect-ratio: 3 / 2; }
  .s-vf-panel { flex: 0 0 auto; width: 100%; gap: 20px; padding: 26px 20px; }
  .s-vf-headline { font-size: min(9vw, 60px); }
  .s-vf-title-1 { width: 100%; }
  .s-vf-title-2 .bracket-left  { margin-right: 0.18em; }
  .s-vf-title-2 .bracket-right { margin-left: 0.18em; }
  .s-vf-meta { gap: 18px; }
  .s-vf-bottom { padding-left: 0; }
  .s-vf-note { padding: 28px 20px; }

  /* Hiếu Cao - CEO ArtClass: 2 cột gộp thành 1 luồng dọc, ảnh lên trên */
  .s-hieucao-block {
    flex-direction: column;
    margin-top: 48px;
  }
  /* Ảnh gốc 4:5; cắt ngang hơn tỷ lệ này là mất đầu người mẫu */
  .s-hc-photo { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 5; }
  .s-hc-panel { flex: 0 0 auto; width: 100%; gap: 32px; padding: 40px 20px; }
  .s-hc-head { flex-direction: column; align-items: stretch; gap: 24px; }
  .s-hc-headline { font-size: clamp(34px, 8.5vw, 64px); }
  .s-hc-meta { gap: 18px; }

}

@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }

  .magazine-hero,
  .hero-pinned-wrapper { min-height: 100svh; height: 100svh; }

  .editorial-text-section {
    top: auto;
    bottom: 16svh;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .title-workbench {
    font-size: clamp(48px, 15vw, 95px);
    margin-bottom: 2px;
  }

  .bracket-left { margin-right: 14px; }
  .bracket-right { margin-left: 14px; }
  .vertical-divider { height: 60px; margin-top: 14px; }

  .article-content-section {
    width: 100%;
    padding: 16px 18px 64px;
  }

  .globe-emblem-container { margin-bottom: 22px; }
  .globe-emblem-container img { max-width: 155px; }
  .vietnamese-fashion-container { width: 100%; margin-bottom: 36px; }
  .vietnamese-fashion-container img { width: 100%; max-width: 520px; }
  .credit-block { margin-bottom: 30px; }
  .credit-title,
  .credit-details { font-size: 9px; letter-spacing: .7px; }
  .editorial-lead-paragraph { font-size: 17px; line-height: 1.45; }

  .screen-f-section,
  .screen-01-section,
  .screen-02-section,
  .screen-03-section {
    min-height: 0;
    padding: 62px 18px 88px;
  }

  .screen-f-section { gap: 42px; }
  .screen-01-container,
  .screen-02-container,
  .screen-03-container { gap: 36px; }
  .screen-f-main-container { gap: 36px; }
  .f-paragraph-1,
  .f-paragraph-2,
  .s01-col-text,
  .s03-textrow p { font-size: 16px; line-height: 1.55; letter-spacing: -.25px; }
  .f-paragraph-1 p,
  .f-paragraph-2 p,
  .s01-col-text p { margin-bottom: 20px; }
  .f-header-tag { gap: 16px; margin-top: 36px; }
  /* Ẩn hẳn trên mobile: bố cục lưới riêng cho nó ở dải này không còn cần nữa */
  .screen-f-vn-title { display: none; }

  .s-ll-title {
    width: 100%;
    justify-self: stretch;
    box-sizing: border-box;
    padding: 10px 0 20px;
    justify-content: space-between;
    gap: 0;
  }
  .s-ll-title .text-workbench {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: clamp(46px, 14.8vw, 66px);
  }
  .s-ll-title .bracket-left,
  .s-ll-title .bracket-right {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
  }
  .s-ll-title .bracket-left {
    transform: none;
    margin-left: 10px;
  }
  .s-ll-title .bracket-right {
    transform: none;
    margin-right: 10px;
  }

  .screen-f-cards-wrapper { margin-top: 4px; padding: 18px 0; }
  .screen-f-cards-track { gap: 14px; }
  .photo-jk02 { width: 100px; height: 160px; }
  .photo-rose32 { width: 150px; height: 200px; }
  .photo-cortis032 { width: 190px; height: 230px; }
  .photo-jk041 { width: 170px; height: 220px; }
  .feature-card { padding: 12px; }
  .feature-card.card-lime { width: 250px; height: 240px; }
  .feature-card.card-white { width: 250px; height: 310px; }
  .feature-card .card-photo { height: 156px; margin-bottom: 10px; }
  .feature-card.card-white .card-photo { height: 225px; }
  .card-brand-title { font-size: 34px; }
  .card-arrow { width: 21px; }

  .s01-hero-full-block { flex-direction: column; margin-bottom: 8px; }
  .s01-hero-left-col { gap: 34px; }
  .s01-top-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-bottom: 0;
  }
  .s01-meta-col1 { grid-column: 1; max-width: none; }
  .s01-meta-col3 { grid-column: 2; }
  .s01-headline-wrapper { font-size: clamp(38px, 11.4vw, 68px); line-height: 1.02; letter-spacing: -.6px; }
  .s01-headline-wrapper p { white-space: normal; }
  .s01-headline-wrapper .line-2 { margin-left: 7vw; }
  .s01-big-number-wrapper { justify-content: flex-start; order: -1; }
  .s01-meta-col3 { display: none; }
  .s01-big-number .num-digits { font-size: clamp(54px, 16vw, 100px); }
  .s01-big-number .bracket-suisse { font-size: clamp(66px, 19vw, 120px); }

  .s01-columns-container,
  .s05-main-flex-grid,
  .s05-text-grid-row,
  .s03-plan-cards {
    flex-direction: column;
    gap: 28px;
  }

  /* Desktop forces the two-column text row to 50% widths with !important.
     Release that constraint after the row becomes a vertical mobile stack. */
  .s05-text-grid-row > div {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .s01-col-spacer{ display: none; }
  .s02-full2col-photo { height: clamp(200px, 45vw, 300px); }
  .s01-columns-container.s01-lower-columns { margin-top: 36px; }
  .s05-main-flex-grid { margin-top: 48px; }
  .s05-left-col-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .s05-right-col-content { gap: 36px; }
  .s05-bottom-row { margin-top: 28px; }

  /* Cấu trúc lưới của các khối collage đã khai báo ở breakpoint 899px.
     Dưới đây chỉ chỉnh riêng cỡ chữ cho màn hình điện thoại. */
  .s-ll-title { font-size: clamp(36px, 12vw, 58px); }

  .s01-marquee-wrapper { margin-top: 50px; padding: 50px 0; }
  .s01-marquee-item.item-1  { width: 90px; height: 126px; margin-right: -52px; }
  .s01-marquee-item.item-2  { width: 215px; height: 300px; margin-right: -82px; }
  .s01-marquee-item.item-3  { width: 102px; height: 132px; margin-right: -57px; }
  .s01-marquee-item.item-4  { width: 174px; height: 228px; margin-right: -75px; }
  .s01-marquee-item.item-5  { width: 72px; height: 84px; margin-right: -45px; }
  .s01-marquee-item.item-6  { width: 240px; height: 168px; margin-right: -102px; }
  .s01-marquee-item.item-7  { width: 150px; height: 240px; margin-right: -69px; }
  .s01-marquee-item.item-8  { width: 66px; height: 66px; margin-right: -36px; }
  .s01-marquee-item.item-9  { width: 204px; height: 264px; margin-right: -93px; }
  .s01-marquee-item.item-10 { width: 162px; height: 282px; margin-right: -75px; }
  .s01-marquee-item.item-11 { width: 84px; height: 84px; margin-right: -45px; }
  .s01-marquee-item.item-12 { width: 228px; height: 312px; margin-right: -108px; }
  .s01-marquee-item.item-13 { width: 138px; height: 174px; margin-right: -69px; }
  .s01-marquee-item.item-14 { width: 186px; height: 126px; margin-right: -87px; }
  .s01-marquee-item.item-15 { width: 174px; height: 288px; margin-right: -78px; }
  .s01-marquee-item.item-16 { width: 126px; height: 162px; margin-right: -48px; }

  .s-ms-headline { font-size: clamp(34px, 10vw, 58px); }
  .s-vv-line { font-size: clamp(32px, 9.5vw, 52px); }
  .s-hc-headline { font-size: clamp(38px, 10vw, 70px); }

  .s02-marquee-wrapper { padding: 24px 0; }
  .s02-marquee-track { gap: 10px; }
  .s02-marquee-item.item-a { width: 137px; height: 190px; }
  .s02-marquee-item.item-b { width: 177px; height: 245px; }
  .s02-marquee-item.item-c { width: 252px; height: 190px; }
  .s02-marquee-item.item-d { width: 245px; height: 245px; }
  .s02-marquee-item.item-e,
  .s02-marquee-item.item-f { width: 186px; height: 190px; }
  .s02-marquee-item.item-g { width: 245px; height: 245px; }

  /* Section 03: mọi dải rã thành luồng dọc */
  .s03-textrow,
  .s03-banner,
  .s03-plan,
  .s03-hc-panel { flex-direction: column; }
  .s03-spacer { display: none; }
  .s03-textrow { gap: 22px; }
  .s03-banner-photo { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; }
  .s03-banner-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    padding: 26px 20px 30px;
    box-shadow: none;
  }
  .s03-banner-headline { font-size: min(9vw, 56px); }
  .s03-banner-side { flex: 0 0 auto; align-self: stretch; }
  .s03-banner-thumbs { flex-direction: row; gap: 12px; }
  .s03-banner-thumb-1,
  .s03-banner-thumb-2 { flex: 1 1 0; width: auto; }
  .s03-banner-meta { margin-top: 22px; }
  .s03-plan { gap: 20px; }
  .s03-plan-label { flex: 0 0 auto; }
  .s03-plan-cards { flex: 0 0 auto; flex-direction: column; width: 100%; gap: 12px; }
  .s03-plan-card { padding: 22px 18px; }
  .s03-plan-photo-1,
  .s03-plan-photo-2,
  .s03-plan-photo-3 { width: min(66%, 240px); }
  .s03-hc-panel { align-items: stretch; margin-left: 0; gap: 28px; padding: 44px 20px 40px; }
  .s03-hc-corner { width: clamp(18px, 2.4vw, 26px); }
  .s03-hc-corner-tl { left: 12px; top: 12px; }
  .s03-hc-corner-tr { right: 12px; top: 12px; }
  .s03-hc-corner-bl { left: 12px; bottom: 12px; }
  .s03-hc-corner-br { right: 12px; bottom: 12px; }
  .s03-hc-left,
  .s03-hc-right { flex: 0 0 auto; align-self: stretch; gap: 26px; }
  .s03-hc-headline { font-size: clamp(30px, 8vw, 60px); white-space: normal; }
  .s03-hc-line-agency { margin-left: 0; }
  .s03-hc-portrait { aspect-ratio: 3 / 4; max-width: 420px; }
  .s03-hc-lockup { font-size: min(7.4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; }
  .s03-hc-title-1,
  .s03-hc-title-2 { margin-left: 0; }
  .s03-hc-title-3 { align-self: flex-start; }
  .s03-hc-title .bracket-left  { margin-right: 0.3em; }
  .s03-hc-title .bracket-right { margin-left: 0.3em; }

  .floating-nav-bar {
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 11px;
    max-width: calc(100% - 24px);
    padding: 9px 14px;
    white-space: nowrap;
  }
  .nav-item { font-size: 11px; }
}

@media (max-width: 389px) {
  .editorial-lead-paragraph { font-size: 16px; }
  .s01-headline-wrapper,
  .s-ms-headline{ font-size: 36px; }
  .s01-big-number { font-size: 132px; }
  .s05-left-col-images { grid-template-columns: 1fr; }
  .s-vv-banner { padding-left: 14px; padding-right: 14px; }
  .floating-nav-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .nav-item { font-size: 10px; }
}

@media (hover: none), (pointer: coarse) {
  .s01-marquee-item { transition: none; }
  .feature-card { cursor: default; }
}