/* ============================================================================
   Silver House — các trang con, giỏ hàng và form.
   Dùng lại font (Playfair Display + Inter), container 1340px và bảng màu của
   run-test-3.css. File này chỉ bổ sung, không ghi đè trang chủ.
   ========================================================================= */

.rt3-sub-page,
.rt3-cart-page {
  background: #f4eee5;
}

.rt3-shop .rt3-shell,
.rt3-sub-page .rt3-shell {
  width: min(1420px, 100%);
  margin-inline: auto;
  padding-inline: 40px;
}

/* --- Hiện dần khi cuộn --------------------------------------------------
   Trạng thái cuối là khai báo tĩnh, không phải điểm kết của animation. Nếu
   trình duyệt bóp animation hoặc JS lỗi, nội dung vẫn hiển thị đầy đủ.
   Class .is-armed chỉ do JS gắn, nên khi tắt JS thì không có gì bị ẩn.     */
.rt3-fade > * {
  opacity: 1;
  transform: none;
}

.rt3-fade.is-armed > * {
  opacity: 0;
  transform: translateY(16px);
}

.rt3-fade.is-armed.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

/* =========================================================================
   Dòng chữ nhỏ trên banner — khớp /demo3
   ---------------------------------------------------------------------------
   run-test-3.css có luật `.rt3-hero-copy .rt3-lead, .rt3-hero-copy p` đặt
   font-size 14px / line-height 28px cho đoạn mô tả. Vì eyebrow cũng là thẻ <p>
   nằm trong .rt3-hero-copy nên bị luật đó bắt luôn, mà `.rt3-hero-copy p`
   (0,1,1) lại thắng `.rt3-eyebrow` (0,1,0).
   Selector dưới đây có độ ưu tiên 0,2,0 nên giành lại đúng thông số của demo3:
   Inter 10px / 500 / 0.26em / line-height 15px.
   ========================================================================= */

.rt3-hero-copy .rt3-eyebrow {
  max-width: none;
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.26em;
}

/* =========================================================================
   Nhóm tiện ích góc phải header — tìm kiếm, giỏ hàng, VI | EN
   ---------------------------------------------------------------------------
   Cột phải của header chia hai đầu: menu bám sát logo ở giữa, nhóm tiện ích
   đẩy ra sát mép phải. Dùng space-between thay vì position:absolute nên logo
   vẫn cân giữa tuyệt đối và menu không bao giờ chồng lên nhóm icon.
   ========================================================================= */

.rt3-header-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}

.rt3-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* Icon tròn 42px, không viền — giống nhóm tiện ích của /demo1 */
.rt3-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 260ms ease, color 260ms ease;
}

.rt3-ic:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.rt3-ic svg {
  width: 19px;
  height: 19px;
}

/* Cụm VI | EN — nhìn vẫn như .hs-lang của /demo1 (13px, dấu | mờ), nhưng vùng
   bấm được nới rộng hẳn. Trước đây chữ "VI" chỉ rộng 14px nên rất dễ bấm trượt;
   giờ mỗi mã ngôn ngữ là một ô 36×38px có nền sáng lên khi rê chuột, cùng kiểu
   với hai icon bên cạnh nên nhìn ra ngay là bấm được. */
.rt3-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.rt3-lang .sep {
  opacity: 0.45;
  pointer-events: none;
}

.rt3-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 38px;
  padding: 0 7px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.7;
  transition: opacity 260ms ease, color 260ms ease, background-color 260ms ease;
}

.rt3-lang a:hover {
  opacity: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.rt3-lang a.is-on {
  opacity: 1;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .rt3-header-right { gap: 12px; }
  .rt3-ic { width: 36px; height: 36px; }
  .rt3-lang { margin-left: 4px; font-size: 12px; }
}

/* =========================================================================
   Thẻ bấm được — link thật phủ kín thẻ
   ---------------------------------------------------------------------------
   Trước đây các thẻ sản phẩm, gói workshop và bài viết chỉ có data-href rồi
   nhờ JS chuyển trang. Cách đó không mở được tab mới, không bấm chuột giữa,
   không dùng bàn phím và công cụ tìm kiếm cũng không thấy đường dẫn.
   Nay mỗi thẻ chứa một thẻ <a> thật trải kín diện tích:
     .rt3-cover      — link trong suốt, chữ chỉ dành cho trình đọc màn hình
     .rt3-cover-text — link đã có sẵn chữ (vd "Đọc tiếp →"), cho nó nở ra
                       phủ kín thẻ bằng ::after nên chữ vẫn hiển thị như cũ
   ========================================================================= */

.rt3-linked { position: relative; }

.rt3-cover {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
}

.rt3-cover-text::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
}

.rt3-cover:focus-visible,
.rt3-cover-text:focus-visible {
  outline: 2px solid #d78938;
  outline-offset: 3px;
}

/* Chữ chỉ dành cho trình đọc màn hình, không chiếm chỗ trên giao diện. */
.rt3-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cột trái: trên máy tính chỉ có menu, canh phải như cũ. */
.rt3-header-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}

/* =========================================================================
   Menu điện thoại — nút hamburger góc trái + ngăn kéo xổ ra
   ---------------------------------------------------------------------------
   Từ 980px trở xuống header rút về một hàng: hamburger trái, logo giữa,
   giỏ hàng phải. Toàn bộ link menu, đổi ngôn ngữ và tìm kiếm dồn vào ngăn kéo.
   ========================================================================= */

.rt3-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.rt3-burger span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  /* Trạng thái tĩnh là ba vạch; transform chỉ thêm vào khi mở. */
  transition: transform 260ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 180ms ease;
}

.rt3-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.rt3-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rt3-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Ngăn kéo -----------------------------------------------------------
   Trạng thái tĩnh của ngăn kéo là ĐÃ nằm đúng chỗ (transform: none) và bị ẩn
   bằng thuộc tính hidden. Hiệu ứng trượt là animation không giữ giá trị cuối,
   nên nếu trình duyệt bóp animation thì menu vẫn hiện đầy đủ, không kẹt ngoài
   màn hình. Cần khai báo [hidden] rõ ràng vì display:flex của luật này sẽ
   thắng [hidden] mặc định của trình duyệt.                                  */
.rt3-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  width: min(340px, 86vw);
  height: 100dvh;
  padding: 0;
  background: #241a12;
  color: #f4ece0;
  box-shadow: 20px 0 60px rgba(20, 12, 6, 0.4);
  transform: none;
}

.rt3-menu[hidden] { display: none; }

.rt3-menu.is-in { animation: rt3-menu-in 320ms cubic-bezier(0.2, 0.72, 0.2, 1); }
.rt3-menu.is-closing { animation: rt3-menu-out 300ms cubic-bezier(0.4, 0, 1, 1) forwards; }

@keyframes rt3-menu-in { from { transform: translateX(-100%); } }
@keyframes rt3-menu-out { to { transform: translateX(-100%); } }

.rt3-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rt3-menu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.16em;
  color: #fff8ef;
}

.rt3-menu-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.rt3-menu-head button {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.rt3-menu-head button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.rt3-menu-list {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 12px 0;
  list-style: none;
}

.rt3-menu-list a {
  display: block;
  padding: 15px 22px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  border-left: 2px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.rt3-menu-list a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

.rt3-menu-list a.is-current {
  color: #e2c9a4;
  border-left-color: #e2c9a4;
  background: rgba(226, 201, 164, 0.07);
}

.rt3-menu-foot {
  padding: 20px 22px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rt3-menu-foot .rt3-btn { display: inline-flex; width: 100%; justify-content: center; }

.rt3-menu-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
  margin-left: -12px; /* bù padding của link để chữ vẫn thẳng lề với nút phía trên */
  font-size: 14px;
  letter-spacing: 0.06em;
}

.rt3-menu-lang .sep { opacity: 0.4; pointer-events: none; }

.rt3-menu-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
}

.rt3-menu-lang a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.rt3-menu-lang a.is-on { color: #fff; font-weight: 700; }

.rt3 .rt3-menu-foot p {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 20px;
  color: rgba(244, 236, 224, 0.45);
}

/* Lớp phủ cũng theo nguyên tắc trên: mặc định là mờ đủ, ẩn bằng hidden. */
.rt3-menu-veil {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: block;
  background: rgba(20, 12, 6, 0.5);
  opacity: 1;
}

.rt3-menu-veil[hidden] { display: none; }
.rt3-menu-veil.is-in { animation: rt3-veil-in 320ms ease; }
.rt3-menu-veil.is-closing { animation: rt3-veil-out 300ms ease forwards; }

@keyframes rt3-veil-in { from { opacity: 0; } }
@keyframes rt3-veil-out { to { opacity: 0; } }

/* --- Header rút gọn một hàng --- */
@media (max-width: 980px) {
  /* Trả lại lưới ba cột (run-test-3.css ép về một cột) để logo cân giữa
     tuyệt đối: hai cột 1fr hai bên luôn bằng nhau. */
  .rt3-header-inner {
    grid-template-columns: 1fr auto 1fr;
    justify-items: stretch;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
  }

  /* run-test-3-shop.css đặt luật này với độ ưu tiên 0,2,0 nên phải bám theo. */
  .rt3-shop-header .rt3-header-inner { height: auto; padding: 12px 14px; }

  .rt3-burger { display: flex; }

  .rt3-header-left { justify-content: flex-start; }

  .rt3-nav-left,
  .rt3-nav-right { display: none; }

  /* Ô tìm kiếm và VI | EN đã nằm trong ngăn kéo, header chỉ giữ giỏ hàng. */
  .rt3-header-right { justify-content: flex-end; gap: 0; }
  .rt3-tools .rt3-ic:not(.rt3-cart-btn) { display: none; }
  .rt3-tools .rt3-lang { display: none; }

  .rt3-brand {
    grid-row: auto;
    flex-direction: row;
    gap: 9px;
    padding: 0;
    font-size: 15px;
    letter-spacing: 0.12em;
  }

  .rt3-brand img { width: 36px; height: 36px; }

  .rt3-ic { width: 40px; height: 40px; }
}

@media (max-width: 380px) {
  .rt3-brand { font-size: 13px; letter-spacing: 0.08em; }
  .rt3-brand img { width: 30px; height: 30px; }
}

/* Máy tính: ngăn kéo không bao giờ hiện, kể cả khi còn sót class is-open. */
@media (min-width: 981px) {
  .rt3-menu,
  .rt3-menu-veil { display: none !important; }
}

/* =========================================================================
   Khối chung cho trang con
   ========================================================================= */

.rt3-block {
  padding: 96px 0;
  background: #f4eee5;
  color: #3d2b20;
}

.rt3-block-tint {
  background: #ece2d4;
}

.rt3-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(120, 92, 62, 0.18);
}

.rt3-block-head h2 {
  margin: 12px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  color: #3d2b20;
}

.rt3 .rt3-block-head p {
  margin: 0;
  max-width: 34em;
  font-size: 13px;
  line-height: 26px;
  color: #7d6b5d;
}

.rt3-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* --- Nút bổ sung -------------------------------------------------------- */
.rt3-btn-outline {
  border: 1px solid #8e6444;
  background: transparent;
  color: #3d2b20;
}

.rt3-btn-outline:hover {
  background: #8e6444;
  color: #fff8ef;
}

.rt3-shop-all-light {
  color: #e2c9a4;
  border-bottom-color: #e2c9a4;
}

/* =========================================================================
   Dải "Phòng trưng bày & Showroom" — trang chủ, đặt giữa 3D Showroom và Sản phẩm.
   Ảnh tràn viền bên trái, tan dần vào nền tối bên phải như trong mockup.
   ========================================================================= */

.rt3-hall {
  position: relative;
  display: grid;
  /* minmax(0,1fr) chứ không phải 1fr: nếu không, cột chữ sẽ nở theo nội dung
     và bóp hẹp cột ảnh. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: #241a12;
  color: #f4ece0;
}

.rt3-hall-photo {
  position: relative;
  margin: 0;
  min-height: 520px;
}

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

/* Ảnh tan vào nền tối ở mép phải và mép dưới, không có đường cắt cứng. */
.rt3-hall-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(36, 26, 18, 0) 55%, rgba(36, 26, 18, 0.75) 85%, #241a12 100%),
    linear-gradient(180deg, rgba(36, 26, 18, 0.35) 0%, rgba(36, 26, 18, 0) 22%);
}

.rt3-hall-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 84px 64px 84px 24px;
  max-width: 640px;
}

.rt3 .rt3-hall-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9a877;
}

.rt3-hall h2 {
  margin: 22px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.16;
  color: #f7f0e4;
}

.rt3 .rt3-hall-lead {
  margin: 20px 0 0;
  max-width: 38em;
  font-size: 13.5px;
  line-height: 26px;
  color: rgba(244, 236, 224, 0.62);
}

/* --- Bốn điểm nhấn --- */
.rt3-hall-feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.rt3-hall-feats li {
  text-align: center;
}

.rt3-hall-feats span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201, 168, 119, 0.4);
  border-radius: 50%;
  color: #c9a877;
  transition: border-color 320ms ease, background-color 320ms ease;
}

.rt3-hall-feats li:hover span {
  border-color: #c9a877;
  background: rgba(201, 168, 119, 0.12);
}

.rt3-hall-feats svg {
  width: 21px;
  height: 21px;
}

.rt3-hall-feats b {
  display: block;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* Ngắt dòng đã chỉ định bằng <br>; cấm tự xuống dòng thêm cho đều hàng. */
  white-space: nowrap;
  color: rgba(244, 236, 224, 0.72);
}

/* --- Nút --- */
.rt3-hall-btn {
  margin-top: 42px;
  border: 1px solid rgba(201, 168, 119, 0.42);
  border-radius: 4px;
  background: rgba(201, 168, 119, 0.14);
  color: #e6d3b2;
}

.rt3-hall-btn:hover {
  border-color: #c9a877;
  background: #c9a877;
  color: #241a12;
}

/* --- Hoa văn mờ ở mép phải --- */
.rt3-hall-ornament {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 220px;
  color: #c9a877;
  opacity: 0.16;
  pointer-events: none;
}

.rt3-hall-ornament svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 1180px) {
  .rt3-hall-copy { padding: 64px 40px 64px 20px; }
  .rt3-hall-feats { gap: 14px; }
}

@media (max-width: 900px) {
  .rt3-hall { grid-template-columns: 1fr; }
  .rt3-hall-photo { min-height: 300px; }
  .rt3-hall-photo::after {
    background: linear-gradient(180deg, rgba(36, 26, 18, 0) 45%, rgba(36, 26, 18, 0.8) 82%, #241a12 100%);
  }
  .rt3-hall-copy { padding: 44px 20px 64px; max-width: none; }
  .rt3-hall-ornament { display: none; }
}

@media (max-width: 560px) {
  .rt3-hall-feats { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
}

/* =========================================================================
   Khu trưng bày đặc biệt — không gian sơn đỏ.
   Trang chủ, đặt ngay sau dải "Phòng trưng bày & Showroom": người xem đi từ
   gian trưng bày nâu trầm sang gian sơn đỏ, như bước qua một phòng khác.
   ========================================================================= */

.rt3-red {
  position: relative;
  overflow: hidden;
  padding: 76px 0 68px;
  border-top: 1px solid rgba(199, 151, 91, 0.5);
  border-bottom: 1px solid rgba(199, 151, 91, 0.42);
  background: #3f1512 var(--rt3-red-bg) center / cover no-repeat;
  color: #f7ead9;
  box-shadow: inset 0 28px 54px rgba(21, 12, 8, 0.18), inset 0 -28px 54px rgba(21, 12, 8, 0.2);
}

/* Phủ thêm một lớp tối ở hai mép để chữ luôn đọc được trên mọi cỡ màn. */
.rt3-red::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 235, 218, 0.08) 0%, transparent 16%, transparent 82%, rgba(28, 16, 11, 0.24) 100%),
    linear-gradient(90deg, rgba(35, 15, 12, 0.9) 0%, rgba(66, 20, 16, 0.45) 35%, rgba(66, 20, 16, 0.42) 62%, rgba(29, 13, 11, 0.92) 100%),
    radial-gradient(68% 58% at 50% 42%, rgba(129, 48, 34, 0.3), transparent 72%);
  pointer-events: none;
}

.rt3-red-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.3fr) minmax(0, 0.82fr);
  gap: 32px;
  align-items: center;
  width: min(1500px, 100%);
  margin-inline: auto;
  padding-inline: 56px;
}

/* --- Con dấu tròn mờ ở mép trái --- */
.rt3-red-seal {
  position: absolute;
  left: -58px;
  top: 50%;
  z-index: 1;
  width: 200px;
  height: 200px;
  transform: translateY(-50%);
  color: #d8ad76;
  opacity: 0.18;
  pointer-events: none;
}

.rt3-red-seal svg { width: 100%; height: 100%; }

/* --- Cột chữ --- */
.rt3 .rt3-red-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #dcb47e;
}

.rt3-red-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: #dcb47e;
  opacity: 0.7;
}

.rt3-red h2 {
  margin: 22px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff7eb;
}

.rt3 .rt3-red-lead {
  margin: 22px 0 0;
  max-width: 30em;
  font-size: 14px;
  line-height: 27px;
  color: #edd3b7;
}

.rt3 .rt3-red-body {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: 12.5px;
  line-height: 24px;
  color: rgba(237, 211, 183, 0.72);
}

.rt3-red-btn {
  margin-top: 32px;
  border: 1px solid rgba(220, 180, 126, 0.56);
  border-radius: 3px;
  background: rgba(93, 38, 27, 0.58);
  color: #f5dfc3;
}

.rt3-red-btn:hover {
  border-color: #e4c18d;
  background: #8c4a32;
  color: #fff6ec;
}

/* --- Sân khấu hiện vật: các ảnh xếp chồng, chỉ một ảnh hiện --- */
.rt3-red-stage {
  position: relative;
  display: grid;
  align-self: start;
  height: 460px;
  min-height: 460px;
  min-width: 0;
  overflow: hidden;
}

.rt3-red-shot {
  position: relative;
  grid-area: 1 / 1;
  margin: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.72, 0.2, 1), visibility 0s linear 620ms;
}

/* Trạng thái hiện là khai báo tĩnh, không phải điểm kết của transition:
   ảnh vào hiện ngay, chỉ ảnh ra mới mờ dần. */
.rt3-red-shot.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}

.rt3-red-shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(220, 180, 126, 0.2);
  border-radius: 2px;
  filter: saturate(0.82) sepia(0.08) brightness(0.88);
  box-shadow: 0 22px 48px rgba(17, 8, 6, 0.34);
}

/* --- Cột phải: thẻ mô tả, thumbnail, điều hướng --- */
.rt3-red-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rt3-red-cards {
  display: grid;
}

.rt3-red-card {
  grid-area: 1 / 1;
  padding: 26px 26px 24px;
  border: 1px solid rgba(220, 180, 126, 0.3);
  border-radius: 3px;
  background: rgba(33, 18, 14, 0.76);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 480ms ease, visibility 0s linear 480ms;
}

.rt3-red-card.is-active {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.rt3 .rt3-red-tag {
  margin: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #dcb47e;
}

.rt3-red-card h3 {
  margin: 16px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff7eb;
}

.rt3 .rt3-red-era {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: rgba(237, 211, 183, 0.72);
}

.rt3 .rt3-red-desc {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(220, 180, 126, 0.2);
  font-size: 12px;
  line-height: 22px;
  color: rgba(240, 221, 199, 0.82);
}

.rt3-red-more {
  display: inline-block;
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #dcb47e;
  border-bottom: 1px solid rgba(220, 180, 126, 0.5);
  padding-bottom: 3px;
  transition: color 280ms ease, border-color 280ms ease;
}

.rt3-red-more:hover { color: #fff2e4; border-color: #fff2e4; }

/* --- Thumbnail --- */
.rt3-red-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.rt3-red-thumbs button {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(220, 180, 126, 0.24);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 320ms ease, border-color 320ms ease;
}

.rt3-red-thumbs button:hover { opacity: 0.85; }

.rt3-red-thumbs button.is-active {
  opacity: 1;
  border-color: #dcb47e;
}

.rt3-red-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- Chấm tròn (chỉ dùng ở khổ điện thoại) --- */
.rt3-red-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.rt3-red-dots button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.rt3-red-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(237, 211, 183, 0.34);
  transition: background-color 280ms ease, width 280ms ease;
}

.rt3-red-dots button.is-active span {
  width: 20px;
  background: #dcb47e;
}

/* --- Điều hướng --- */
.rt3-red-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.rt3-red-nav button {
  width: 34px;
  height: 30px;
  border: 1px solid rgba(220, 180, 126, 0.34);
  border-radius: 2px;
  background: transparent;
  color: #dcb47e;
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease;
}

.rt3-red-nav button:hover {
  border-color: #dcb47e;
  background: #dcb47e;
  color: #3a0a0a;
}

@media (max-width: 1280px) {
  .rt3-red-inner { padding-inline: 32px; gap: 28px; }
  .rt3-red h2 { font-size: clamp(24px, 2.6vw, 34px); }
  .rt3 .rt3-red-body { display: none; }
}

/* =========================================================================
   Khổ điện thoại/máy tính bảng: đổi chồng ảnh thành băng vuốt ngang
   ---------------------------------------------------------------------------
   Bỏ dãy thumbnail, thay bằng chấm tròn. Ảnh xếp cạnh nhau trong một khung
   cuộn ngang có scroll-snap, nên ngón tay kéo tới đâu ảnh chạy tới đó bằng
   cuộn thật của trình duyệt — mượt hơn và không phụ thuộc JS để hiển thị.
   Trạng thái tĩnh của mọi ảnh là HIỆN, không còn opacity 0, nên dù animation
   bị bóp thì băng ảnh vẫn đầy đủ.
   ========================================================================= */

@media (max-width: 1024px) {
  .rt3-red { padding: 56px 0; }
  .rt3-red-inner { grid-template-columns: 1fr; gap: 32px; }
  .rt3-red-seal { display: none; }
  .rt3 .rt3-red-body { display: block; }
  .rt3-red::before {
    background: linear-gradient(180deg, rgba(43, 19, 15, 0.76), rgba(27, 14, 11, 0.9));
  }

  .rt3-red-stage {
    display: flex;
    width: min(520px, 100%);
    height: min(390px, calc((100vw - 40px) * 0.75));
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .rt3-red-stage::-webkit-scrollbar { display: none; }

  .rt3-red-shot {
    flex: 0 0 100%;
    grid-area: auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Ghi đè hẳn kiểu chồng-mờ của bản máy tính. */
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .rt3-red-thumbs { display: none; }
  .rt3-red-dots { display: flex; }

  /* Đã vuốt được bằng tay thì cụm ‹ › và số đếm chỉ làm rối; chấm tròn
     đã cho biết đang ở ảnh thứ mấy rồi. */
  .rt3-red-nav { display: none; }
}

@media (max-width: 560px) {
  .rt3-red-inner { padding-inline: 20px; }
  .rt3-red-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rt3-red-shot, .rt3-red-card { transition: none; }
}

/* =========================================================================
   Dải "Ghé thăm Silver House" — trang chủ, đặt giữa Sản phẩm và Blog.
   Dải tối này cắt vệt sáng dài 3D Showroom → Sản phẩm → Blog cho trang có nhịp.
   ========================================================================= */

.rt3-visit {
  padding: 104px 0;
  background: #2c1d14;
  color: #fff8ef;
  text-align: center;
}

.rt3 .rt3-visit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c9a877;
}

.rt3-visit-eyebrow::before,
.rt3-visit-eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: #c9a877;
  opacity: 0.6;
}

.rt3-visit h2 {
  margin: 26px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff8ef;
}

.rt3-visit h2 em {
  font-style: italic;
  color: #c9a877;
}

.rt3 .rt3-visit-lead {
  margin: 20px auto 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 28px;
  color: rgba(255, 248, 239, 0.7);
}

.rt3-visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

.rt3-btn-copper {
  border: 1px solid transparent;
  background: #a5713f;
  color: #fff8ef;
}

.rt3-btn-copper:hover {
  background: #c8925a;
  color: #fff8ef;
}

.rt3-btn-gold {
  border: 1px solid rgba(201, 168, 119, 0.5);
  background: transparent;
  color: #c9a877;
}

.rt3-btn-gold:hover {
  background: #c9a877;
  color: #2c1d14;
}

@media (max-width: 720px) {
  .rt3-visit { padding: 72px 0; }
}

/* =========================================================================
   Về chúng tôi
   ========================================================================= */

.rt3-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.rt3-split-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #d7c5af;
}

.rt3-split-media video,
.rt3-split-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.rt3-split-media figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
}

.rt3-split-copy h2 {
  margin: 14px 0 24px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.12;
}

.rt3 .rt3-split-copy p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 30px;
  color: #6d5b4c;
}

.rt3-quote {
  margin-top: 32px;
  padding: 24px 28px;
  border-left: 2px solid #8e6444;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 0 1rem 1rem 0;
}

.rt3-quote q {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  line-height: 1.5;
  color: #3d2b20;
}

.rt3-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #96806a;
}

/* --- Dòng thời gian ----------------------------------------------------- */
.rt3-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.rt3-timeline li {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid rgba(120, 92, 62, 0.28);
}

.rt3-timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #8e6444;
}

.rt3-timeline b {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  color: #8e6444;
  line-height: 1;
}

.rt3-timeline h3 {
  margin: 14px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #3d2b20;
}

.rt3 .rt3-timeline p {
  margin: 0;
  font-size: 12px;
  line-height: 23px;
  color: #7d6b5d;
}

/* --- Ba giá trị --------------------------------------------------------- */
.rt3-value-grid,
.rt3-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.rt3-value-grid article,
.rt3-people article {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  background: #fffaf3;
  box-shadow: 0 14px 34px rgba(67, 42, 25, 0.07);
}

.rt3-value-grid img,
.rt3-people img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rt3-people img {
  aspect-ratio: 4 / 5;
}

.rt3-value-grid span {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(28, 18, 12, 0.5);
  backdrop-filter: blur(6px);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #fff8ef;
}

.rt3-value-grid h3,
.rt3-people h3 {
  margin: 22px 24px 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3-people small {
  display: block;
  margin: 0 24px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e6444;
}

.rt3 .rt3-value-grid p,
.rt3 .rt3-people p {
  margin: 8px 24px 26px;
  font-size: 12px;
  line-height: 23px;
  color: #7d6b5d;
}

.rt3 .rt3-people p {
  margin-top: 12px;
}

/* =========================================================================
   Workshop
   ========================================================================= */

.rt3-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.rt3-gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.35rem;
  background: #d7c5af;
}

.rt3-gallery figure.is-wide {
  grid-column: span 2;
  grid-row: span 2;
}

.rt3-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.rt3-gallery figure:hover img {
  transform: scale(1.04);
}

.rt3-gallery figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(28, 18, 12, 0.42);
  backdrop-filter: blur(6px);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8ef;
}

.rt3-steps-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt3-steps-list li {
  position: relative;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #fffaf3;
}

.rt3-steps-list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rt3-steps-list span {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  color: #fff8ef;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.rt3-steps-list h3 {
  margin: 20px 22px 6px;
  font-size: 15px;
  font-weight: 600;
  color: #3d2b20;
}

.rt3 .rt3-steps-list p {
  margin: 0 22px 24px;
  font-size: 12px;
  line-height: 23px;
  color: #7d6b5d;
}

/* --- Bảng gói ----------------------------------------------------------- */
.rt3-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

.rt3-package-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border: 1px solid rgba(120, 92, 62, 0.22);
  border-radius: 1.2rem;
  background: #fffaf3;
}

.rt3-package-grid article.is-featured {
  border-color: #8e6444;
  background: #fff;
  box-shadow: 0 18px 40px rgba(67, 42, 25, 0.1);
}

.rt3-package-grid em {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #8e6444;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff8ef;
}

.rt3-package-grid h3 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3-package-grid b {
  display: block;
  margin: 10px 0 18px;
  font-size: 20px;
  font-weight: 600;
  color: #9b704d;
}

.rt3-package-grid ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(120, 92, 62, 0.16);
  padding-top: 16px;
}

.rt3-package-grid li {
  margin-bottom: 8px;
  font-size: 12px;
  color: #6d5b4c;
}

.rt3 .rt3-package-grid p {
  flex: 1;
  margin: 0 0 22px;
  font-size: 12px;
  line-height: 23px;
  color: #7d6b5d;
}

.rt3-package-grid .rt3-btn {
  align-self: flex-start;
}

/* =========================================================================
   3D Showroom
   ========================================================================= */

.rt3-matterport-tall iframe {
  aspect-ratio: 16 / 9;
  min-height: 520px;
}

.rt3 .rt3-note {
  margin: 18px 0 0;
  font-size: 12px;
  color: #96806a;
}

.rt3-note a {
  color: #8e6444;
  border-bottom: 1px solid currentColor;
}

.rt3-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.rt3-highlight-grid article {
  padding: 30px 26px;
  border-radius: 1.2rem;
  background: #fffaf3;
}

.rt3-highlight-grid span {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  color: #cbb193;
}

.rt3-highlight-grid h3 {
  margin: 14px 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: #3d2b20;
}

.rt3 .rt3-highlight-grid p {
  margin: 0;
  font-size: 12px;
  line-height: 23px;
  color: #7d6b5d;
}

/* =========================================================================
   Blog
   ========================================================================= */

.rt3-feature-post {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  overflow: hidden;
  border-radius: 1.75rem;
  background: #fffaf3;
  box-shadow: 0 20px 46px rgba(67, 42, 25, 0.08);
}

.rt3-feature-post-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

.rt3-feature-post-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
}

.rt3-feature-post-copy h2 {
  margin: 14px 0 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.18;
  color: #3d2b20;
}

.rt3 .rt3-feature-post-copy p {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 27px;
  color: #7d6b5d;
}

.rt3-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}

.rt3-post-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rt3-post-grid article > div {
  overflow: hidden;
  border-radius: 1.2rem;
  background: #d7c5af;
}

.rt3-post-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.rt3-post-grid article:hover img {
  transform: scale(1.05);
}

.rt3-post-grid small {
  display: block;
  margin: 18px 0 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #96806a;
}

.rt3-post-grid h3 {
  margin: 0 0 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: #3d2b20;
}

.rt3 .rt3-post-grid p {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 23px;
  color: #7d6b5d;
}

.rt3-post-grid a {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8e6444;
}

/* --- Trang bài viết ----------------------------------------------------- */
.rt3-article-head {
  padding: 88px 0 48px;
  background: linear-gradient(180deg, #efe6d9, #f4eee5);
}

.rt3-article-head h1 {
  margin: 14px 0 0;
  max-width: 18em;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  line-height: 1.12;
  color: #3d2b20;
}

.rt3-article-cover {
  margin: 0 0 56px;
}

.rt3-article-cover img {
  display: block;
  width: min(1340px, calc(100% - 80px));
  height: auto;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  object-fit: cover;
  border-radius: 1.75rem;
}

.rt3-article-body {
  max-width: 44em;
  margin: 0 auto;
  padding-bottom: 24px;
}

.rt3 .rt3-article-body p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 32px;
  color: #4d3c2f;
}

.rt3-article-body h3 {
  margin: 38px 0 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3-article-foot {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 44em;
  margin: 0 auto;
  padding: 28px 0 96px;
  border-top: 1px solid rgba(120, 92, 62, 0.2);
}

/* =========================================================================
   Chi tiết sản phẩm
   ========================================================================= */

.rt3-detail {
  padding: 56px 0 96px;
  background: #f4eee5;
}

.rt3-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 40px;
}

.rt3-detail-main {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #d7c5af;
}

.rt3-detail-main img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.rt3-detail-main figcaption {
  position: absolute;
  left: 16px;
  top: 16px;
}

.rt3-detail-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.rt3-detail-thumbs button {
  width: 88px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: none;
  cursor: pointer;
  transition: border-color 260ms ease, opacity 260ms ease;
  opacity: 0.68;
}

.rt3-detail-thumbs button.is-active,
.rt3-detail-thumbs button:hover {
  border-color: #8e6444;
  opacity: 1;
}

.rt3-detail-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.rt3-detail-info h1 {
  margin: 12px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.1;
  color: #3d2b20;
}

.rt3 .rt3-detail-price {
  margin: 16px 0 0;
  font-size: 24px;
  font-weight: 600;
  color: #9b704d;
}

.rt3 .rt3-detail-desc {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: 14px;
  line-height: 28px;
  color: #6d5b4c;
}

.rt3-detail-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 34px 0 0;
  padding: 0;
  background: rgba(120, 92, 62, 0.18);
  border: 1px solid rgba(120, 92, 62, 0.18);
  border-radius: 1rem;
  overflow: hidden;
}

.rt3-detail-specs > div {
  padding: 18px 20px;
  background: #fffaf3;
}

.rt3-detail-specs dt {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #96806a;
}

.rt3-detail-specs dd {
  margin: 8px 0 0;
  font-size: 13px;
  color: #3d2b20;
}

.rt3-detail-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.rt3 .rt3-detail-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: #96806a;
}

.rt3-detail-body {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(120, 92, 62, 0.18);
}

.rt3 .rt3-detail-body p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 27px;
  color: #6d5b4c;
}

/* --- Bộ đếm số lượng ---------------------------------------------------- */
.rt3-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #bda68d;
  border-radius: 999px;
  overflow: hidden;
  background: #fffaf3;
}

.rt3-qty button {
  width: 40px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #6d5947;
  font-size: 17px;
  cursor: pointer;
  transition: background-color 220ms ease;
}

.rt3-qty button:hover {
  background: rgba(142, 100, 68, 0.12);
}

.rt3-qty input {
  width: 48px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #3d2b20;
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.rt3-qty input::-webkit-outer-spin-button,
.rt3-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rt3-related {
  padding: 0 0 104px;
  background: #f4eee5;
}

.rt3-related-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(120, 92, 62, 0.18);
}

.rt3-related-head h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  color: #3d2b20;
}

/* =========================================================================
   Giỏ hàng — nút header, drawer, trang đầy đủ
   ========================================================================= */

/* Nút giỏ hàng dùng chung kiểu .rt3-ic; ở đây chỉ còn phần con số đếm. */

.rt3-cart-btn i {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #8e6444;
  color: #fff8ef;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.rt3-cart-btn i.is-on {
  opacity: 1;
  transform: none;
}

.rt3-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  height: 100dvh;
  background: #fffaf3;
  box-shadow: -20px 0 60px rgba(40, 25, 14, 0.22);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.rt3-cart-drawer.is-open {
  transform: none;
}

.rt3-cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 28px 18px;
  border-bottom: 1px solid rgba(120, 92, 62, 0.16);
}

.rt3-cart-drawer-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6d5947;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.rt3-cart-drawer-head button:hover {
  background: rgba(142, 100, 68, 0.12);
}

.rt3-cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 28px;
}

.rt3-mini-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt3-mini-list li {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr 28px;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(120, 92, 62, 0.12);
}

.rt3-mini-list img {
  display: block;
  width: 62px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.6rem;
}

.rt3-mini-list b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #3d2b20;
}

.rt3-mini-list small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #96806a;
}

.rt3-mini-remove {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #96806a;
  font-size: 17px;
  cursor: pointer;
}

.rt3-mini-remove:hover {
  background: rgba(142, 100, 68, 0.14);
  color: #3d2b20;
}

.rt3-mini-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #96806a;
}

.rt3-mini-foot b {
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: #9b704d;
}

.rt3-mini-cta {
  display: block;
  text-align: center;
}

.rt3 .rt3-cart-empty {
  margin: 40px 0;
  text-align: center;
  font-size: 13px;
  color: #96806a;
}

.rt3-cart-veil {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(40, 25, 14, 0.42);
  opacity: 0;
  transition: opacity 320ms ease;
}

.rt3-cart-veil.is-open {
  opacity: 1;
}

.rt3-mini-add {
  padding: 0;
  border: 0;
  background: transparent;
  color: #8e6444;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 260ms ease;
}

.rt3-mini-add:hover {
  color: #3d2b20;
}

.rt3-mini-add.is-busy {
  opacity: 0.5;
  cursor: wait;
}

/* --- Trang giỏ hàng ----------------------------------------------------- */
.rt3-cart-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: 48px;
  align-items: start;
}

.rt3-cart-head,
.rt3-cart-line {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 40px;
  gap: 16px;
  align-items: center;
}

.rt3-cart-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(120, 92, 62, 0.24);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #96806a;
}

.rt3-cart-line {
  padding: 22px 0;
  border-bottom: 1px solid rgba(120, 92, 62, 0.14);
}

.rt3-cart-product {
  display: flex;
  align-items: center;
  gap: 18px;
}

.rt3-cart-product img {
  display: block;
  width: 76px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.7rem;
}

.rt3-cart-product b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3-cart-cell {
  font-size: 13px;
  color: #6d5b4c;
}

.rt3-cart-sub {
  font-weight: 600;
  color: #9b704d;
}

.rt3-cart-cell input[type="number"] {
  width: 66px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #bda68d;
  border-radius: 0.6rem;
  background: #fffaf3;
  color: #3d2b20;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}

.rt3-cart-x {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #96806a;
  font-size: 19px;
  cursor: pointer;
}

.rt3-cart-x:hover {
  background: rgba(142, 100, 68, 0.14);
  color: #3d2b20;
}

.rt3-checkout-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 20px 0 6px;
  padding: 16px 0;
  border-top: 1px solid rgba(120, 92, 62, 0.18);
  border-bottom: 1px solid rgba(120, 92, 62, 0.18);
  font-size: 12px;
  color: #7d6b5d;
}

.rt3-checkout-total b {
  font-size: 22px;
  font-weight: 600;
  color: #9b704d;
}

.rt3-empty-state {
  padding: 72px 0 88px;
  text-align: center;
}

.rt3-empty-state h2 {
  margin: 14px 0 12px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3 .rt3-empty-state p {
  margin: 0 auto 28px;
  max-width: 34em;
  font-size: 13px;
  line-height: 26px;
  color: #7d6b5d;
}

.rt3-empty-state .rt3-shop-cta-actions {
  justify-content: center;
}

/* =========================================================================
   Form dùng chung
   ========================================================================= */

.rt3-form-card {
  padding: 40px;
  border: 1px solid rgba(120, 92, 62, 0.18);
  border-radius: 1.5rem;
  background: #fffaf3;
  box-shadow: 0 18px 42px rgba(67, 42, 25, 0.07);
}

.rt3-form-card h2 {
  margin: 12px 0 26px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3-form label {
  display: block;
  margin-bottom: 18px;
}

.rt3-form label > span {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b7358;
}

.rt3-form input[type="text"],
.rt3-form input[type="email"],
.rt3-form input[type="tel"],
.rt3-form input[type="date"],
.rt3-form input[type="number"],
.rt3-form select,
.rt3-form textarea {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border: 1px solid #c9b195 !important;
  border-radius: 0.7rem !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #3d2b20 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

.rt3-form textarea {
  min-height: 96px !important;
  resize: vertical;
}

.rt3-form input:focus,
.rt3-form select:focus,
.rt3-form textarea:focus {
  outline: none;
  border-color: #8e6444 !important;
  box-shadow: 0 0 0 3px rgba(142, 100, 68, 0.14) !important;
}

.rt3-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rt3-form .rt3-btn {
  margin-top: 8px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.rt3 .rt3-form-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 20px;
  color: #96806a;
}

.rt3-alert {
  margin: 0 0 22px !important;
  padding: 14px 18px;
  border-radius: 0.7rem;
  font-size: 13px;
  line-height: 22px;
}

.rt3-alert.is-error {
  border: 1px solid #d8a99a;
  background: #fbeeea;
  color: #8f3f28;
}

.rt3-alert.is-success {
  border: 1px solid #a9c5a0;
  background: #eef5ea;
  color: #3d6b33;
}

/* Bẫy bot — ẩn khỏi mắt người và khỏi trình đọc màn hình. */
.rt3-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   Liên hệ
   ========================================================================= */

.rt3-contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.rt3-contact-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(120, 92, 62, 0.16);
}

.rt3 .rt3-contact-item p:not(.rt3-eyebrow) {
  margin: 8px 0 0;
  font-size: 15px;
  color: #3d2b20;
}

.rt3-contact-item a {
  color: #8e6444;
  border-bottom: 1px solid currentColor;
}

.rt3-contact-map {
  margin-top: 28px;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #ded0bd;
}

.rt3-contact-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

.rt3 .rt3-contact-chidan { margin: 14px 0 0; font-size: 12.5px; }

.rt3-contact-chidan a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8e6444;
  border-bottom: 1px solid rgba(142, 100, 68, .4);
  padding-bottom: 2px;
}

.rt3-contact-chidan a:hover { border-bottom-color: #8e6444; }

/* =========================================================================
   Đăng ký workshop
   ========================================================================= */

.rt3-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.rt3-pick {
  position: relative;
  padding: 26px 22px;
  border: 1px solid rgba(120, 92, 62, 0.24);
  border-radius: 1.1rem;
  background: #fffaf3;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.rt3-pick:hover {
  border-color: #8e6444;
  transform: translateY(-2px);
}

.rt3-pick.is-picked {
  border-color: #8e6444;
  box-shadow: 0 0 0 2px rgba(142, 100, 68, 0.24), 0 16px 34px rgba(67, 42, 25, 0.1);
  background: #fff;
}

.rt3-pick em {
  position: absolute;
  top: -10px;
  left: 22px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #8e6444;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff8ef;
}

.rt3-pick h3 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3-pick b {
  display: block;
  margin: 8px 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: #9b704d;
}

.rt3-pick small {
  display: block;
  font-size: 11px;
  color: #7d6b5d;
}

.rt3-booking-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 40px;
  align-items: start;
}

.rt3-summary-card,
.rt3-info-card {
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid rgba(120, 92, 62, 0.18);
  border-radius: 1.2rem;
  background: #fffaf3;
}

.rt3-summary {
  margin-top: 16px;
}

.rt3-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(120, 92, 62, 0.12);
  font-size: 12px;
  color: #7d6b5d;
}

.rt3-summary > div:last-child {
  border-bottom: 0;
}

.rt3-summary b {
  font-size: 14px;
  color: #3d2b20;
}

.rt3-summary > div:last-child b {
  font-size: 19px;
  font-weight: 600;
  color: #9b704d;
}

.rt3-info-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.rt3-info-card li {
  margin-bottom: 9px;
  font-size: 12px;
  line-height: 22px;
  color: #7d6b5d;
}

.rt3 .rt3-info-card p:not(.rt3-eyebrow) {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 25px;
  color: #6d5b4c;
}

/* =========================================================================
   FAQ trang riêng
   ========================================================================= */

.rt3-faq-page {
  display: grid;
  gap: 56px;
}

.rt3-faq-group h2 {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(120, 92, 62, 0.2);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: #3d2b20;
}

/* FAQ nền sáng — trang chủ dùng nền tối nên cần bản riêng. */
.rt3-faq-light details {
  border-bottom: 1px solid rgba(120, 92, 62, 0.18);
}

.rt3-faq-light summary {
  color: #3d2b20;
}

.rt3-faq-light summary span {
  color: #8e6444;
}

.rt3 .rt3-faq-light p {
  color: #7d6b5d;
}

.rt3-faq-narrow {
  max-width: 900px;
}

/* =========================================================================
   Cảm ơn & 404
   ========================================================================= */

.rt3-thanks,
.rt3-missing {
  padding: 120px 0 128px;
  text-align: center;
  background: linear-gradient(180deg, #efe6d9, #f4eee5);
}

.rt3-thanks-mark {
  font-size: 44px;
  color: #8e6444;
}

.rt3-thanks h1,
.rt3-missing h1 {
  margin: 14px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: #3d2b20;
}

.rt3-thanks .rt3-shop-lead,
.rt3 .rt3-missing p {
  margin: 22px auto 0;
  max-width: 40em;
  font-size: 14px;
  line-height: 28px;
  color: #766253;
}

.rt3 .rt3-thanks-code {
  margin: 22px 0 0;
  font-size: 13px;
  color: #96806a;
}

.rt3-thanks-code b {
  color: #8e6444;
}

.rt3-thanks .rt3-shop-cta-actions,
.rt3-missing .rt3-btn {
  justify-content: center;
  margin-top: 34px;
}

.rt3-missing .rt3-btn {
  display: inline-flex;
}

/* =========================================================================
   Toast
   ========================================================================= */

.rt3-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 200;
  margin: 0;
  padding: 13px 24px;
  border-radius: 999px;
  background: #2c1d14;
  color: #fff8ef;
  font-size: 13px;
  box-shadow: 0 16px 40px rgba(40, 25, 14, 0.32);
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.2, 0.72, 0.2, 1);
  pointer-events: none;
}

.rt3-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.rt3-toast.is-error {
  background: #7d3624;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1180px) {
  .rt3-timeline,
  .rt3-steps-list,
  .rt3-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rt3-value-grid,
  .rt3-people,
  .rt3-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .rt3-block { padding: 64px 0; }

  .rt3-split,
  .rt3-detail-grid,
  .rt3-contact-grid,
  .rt3-cart-layout,
  .rt3-booking-layout,
  .rt3-feature-post {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .rt3-feature-post-copy { padding: 32px; }
  .rt3-feature-post-media img { min-height: 260px; }
  .rt3-matterport-tall iframe { min-height: 360px; }
  .rt3-form-card { padding: 28px; }

  .rt3-cart-head { display: none; }

  .rt3-cart-line {
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
  }

  .rt3-cart-product { grid-column: 1 / -1; }

  .rt3-cart-cell[data-label]::before {
    content: attr(data-label) " · ";
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #96806a;
  }
}

@media (max-width: 720px) {
  .rt3-shop .rt3-shell,
  .rt3-sub-page .rt3-shell { padding-inline: 20px; }

  .rt3-block { padding: 48px 0; }

  .rt3-timeline,
  .rt3-steps-list,
  .rt3-highlight-grid,
  .rt3-value-grid,
  .rt3-people,
  .rt3-post-grid,
  .rt3-post-grid-2,
  .rt3-form-row {
    grid-template-columns: 1fr;
  }

  .rt3-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt3-gallery figure.is-wide { grid-column: span 2; grid-row: auto; }

  .rt3-detail-specs { grid-template-columns: 1fr; }
  .rt3-article-cover img { width: calc(100% - 40px); border-radius: 1rem; }
  .rt3-thanks, .rt3-missing { padding: 80px 0 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .rt3-fade.is-armed > * { opacity: 1; transform: none; }

  .rt3-fade.is-armed.is-in > *,
  .rt3-cart-drawer,
  .rt3-toast,
  .rt3-gallery img,
  .rt3-post-grid img {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Workshop chế tác bạc — /silver-house/workshop/che-tac-bac/
   ---------------------------------------------------------------------------
   Dùng lại biến màu, font và container 1340px của các trang con khác. Riêng
   hero ở đây tràn viền và có khung đặt lịch nổi đè lên, nên không dùng chung
   page-hero.php mà dựng riêng.
   ========================================================================= */


.rt3-wsb-icon { flex: none; width: 24px; height: 24px; }

/* Trang này dùng breadcrumb chữ thường như mẫu, không phải chữ hoa giãn. */
.rt3-wsb .rt3-crumb { font-size: 11.5px; letter-spacing: 0.01em; text-transform: none; }

/* ------------------------------------------------------------------ Hero */
/* Không dùng isolation ở đây: khung đặt lịch phải nổi đè lên dải kế tiếp,
   mà isolation sẽ nhốt nó lại trong hero. Thay vào đó xếp lớp bằng z-index
   dương cho cả hero, và ảnh nền để z-index 0 chứ không âm. */
.rt3-wsb-hero {
  position: relative;
  z-index: 2;
  padding: 106px 0 0;
  background: #efe4d5;
}

/* Banner đổi ảnh: các ảnh chồng lên nhau, ảnh đang hiện có opacity 1 và một
   nhịp phóng nhẹ để khung hình không đứng chết. JS chỉ đổi lớp .is-active. */
.rt3-wsb-hero-anh {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #efe4d5;
}

.rt3-wsb-hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1100ms ease;
}

.rt3-wsb-hero-slide.is-active { opacity: 1; }

.rt3-wsb-hero-slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 60% 40%;
}

.rt3-wsb-hero-slide.is-active img { animation: rt3WsbZoom 7s ease-out both; }

@keyframes rt3WsbZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rt3-wsb-hero-slide { transition: none; }
  .rt3-wsb-hero-slide.is-active img { animation: none; }
}

.rt3-wsb-hero-wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  /* Khung đặt lịch chiếm từ 66% chiều ngang trở đi, nên lớp phủ phải tan hết
     trước mốc đó thì mới còn chỗ cho ảnh lộ ra. */
  background:
    linear-gradient(90deg, rgba(247, 240, 230, .93) 0%, rgba(247, 240, 230, .85) 25%, rgba(247, 240, 230, .52) 40%, rgba(247, 240, 230, .16) 53%, rgba(247, 240, 230, 0) 66%),
    linear-gradient(180deg, rgba(247, 240, 230, .55) 0%, rgba(247, 240, 230, 0) 24%);
}

.rt3-wsb-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding-bottom: 0;
}

.rt3-wsb-hero-copy { padding: 8px 0 46px; }

.rt3-wsb-hero-copy h1 {
  margin: 18px 0 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 4.1vw, 58px);
  font-weight: 400;
  line-height: 1.08;
  color: #2c1d13;
}

.rt3 .rt3-wsb-hero-copy > p {
  max-width: 34em;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 25px;
  color: #5a4739;
}

.rt3-wsb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt3-wsb-chips li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #5a4739;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.rt3-wsb-chips .rt3-wsb-icon { width: 20px; height: 20px; color: #a97c4e; }

/* --- Khung đặt lịch, nay nằm cạnh bảng gói ở cuối trang --- */
.rt3-wsb-book {
  position: relative;
  z-index: 3;
  align-self: start;
  padding: 26px 26px 22px;
  background: #fffaf3;
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(58, 34, 16, .17);
}

.rt3-wsb-book h2 {
  margin: 0 0 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  color: #2c1d13;
}

.rt3-wsb-book label { display: block; margin-bottom: 12px; }

/* Mẫu để nhãn chữ thường cỡ vừa, không phải chữ hoa giãn — nhìn mềm hơn hẳn. */
.rt3-wsb-book label > span,
.rt3-wsb-book-people > span {
  display: block;
  margin-bottom: 6px;
  color: #7a6757;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.rt3-wsb-book select,
.rt3-wsb-book input[type="date"],
.rt3-wsb-book input[type="number"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ddcab3;
  border-radius: 6px;
  background: #fff;
  color: #3d2b20;
  font-family: inherit;
  font-size: 12.5px;
}

.rt3-wsb-book select:focus-visible,
.rt3-wsb-book input:focus-visible { outline: 2px solid #a97c4e; outline-offset: 1px; }

.rt3-wsb-book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.rt3-wsb-book-people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.rt3-wsb-stepper {
  display: grid;
  grid-template-columns: 38px 62px 38px;
  align-items: center;
  border: 1px solid #ddcab3;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.rt3-wsb-stepper button {
  height: 38px;
  border: 0;
  background: transparent;
  color: #6b584a;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.rt3-wsb-stepper button:hover { color: #8e6444; }

.rt3-wsb-stepper input {
  height: 38px !important;
  border: 0 !important;
  border-left: 1px solid #eaddc9 !important;
  border-right: 1px solid #eaddc9 !important;
  border-radius: 0 !important;
  text-align: center;
  -moz-appearance: textfield;
}

.rt3-wsb-stepper input::-webkit-outer-spin-button,
.rt3-wsb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Nút chính trong mẫu là nâu ấm chứ không phải nâu gần đen của .rt3-btn-dark. */
.rt3-wsb-book-go {
  width: 100%;
  height: 46px;
  border-radius: 6px;
  background: #5a3f2a;
  border-color: #5a3f2a;
}
.rt3-wsb-book-go:hover { background: #48311f; border-color: #48311f; }

.rt3-wsb-assure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #eaddc9;
  list-style: none;
}

.rt3-wsb-assure li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #7d6b5d;
  font-size: 10px;
  line-height: 15px;
}

.rt3-wsb-assure .rt3-wsb-icon { width: 17px; height: 17px; color: #a97c4e; }

/* ------------------------------------------- Chọn gói trải nghiệm + đặt lịch */
/* Khối này nằm sau "Khoảnh khắc workshop": bảng gói bên trái, khung đặt lịch
   bên phải. Trước đây khung đặt lịch nổi trên hero nên bảng gói phải chừa chỗ
   bên phải; nay hai khối là hai cột thật nên không cần mẹo đó nữa. */
.rt3-wsb-packages { position: relative; z-index: 1; }

.rt3-wsb-dat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  align-items: start;
  gap: 34px;
}

.rt3-wsb-panel {
  padding: 30px 34px 26px;
  background: #fbf7f1;
  border: 1px solid rgba(120, 92, 62, .12);
  border-radius: 10px;
  box-shadow: 0 16px 46px rgba(58, 34, 16, .07);
}

.rt3-wsb-panel h2 {
  margin: 0 0 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 400;
  color: #3d2b20;
}

.rt3 .rt3-wsb-panel-lead { margin: 0 0 22px; font-size: 12px; color: #8b7666; }

/* Khung đặt lịch che mất phần phải của tấm bảng, nên hàng gói phải lùi vào
   đúng bằng bề rộng khung (372px) trừ đi padding của bảng, cộng một chút hở.
   Nhờ vậy cả năm gói vẫn hiện đủ như mẫu. */
.rt3-wsb-goi {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt3-wsb-goi a {
  position: relative;
  display: block;
  height: 100%;
  padding: 18px 16px 16px;
  border: 1px solid rgba(120, 92, 62, .18);
  border-radius: 5px;
  background: #fffdfa;
  transition: border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.rt3-wsb-goi a:hover {
  border-color: #c99a63;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(58, 34, 16, .1);
}

/* Nhãn nằm vắt ngang cạnh trên và canh giữa thẻ, nền vàng nhạt chữ nâu. */
.rt3-wsb-goi em {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f2ddbb;
  color: #96632c;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.rt3-wsb-goi .rt3-wsb-icon { width: 26px; height: 26px; color: #b98a56; }

.rt3-wsb-goi b {
  display: block;
  margin: 12px 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3d2b20;
}

.rt3-wsb-goi small {
  display: block;
  min-height: 32px;
  margin-bottom: 14px;
  font-size: 10.5px;
  line-height: 16px;
  color: #8b7666;
}

/* Trong mẫu giá nằm dưới một đường kẻ mảnh và có màu nâu đậm như tên gói. */
.rt3-wsb-goi strong {
  display: block;
  padding-top: 12px;
  border-top: 1px solid rgba(120, 92, 62, .16);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #3d2b20;
}

.rt3-wsb-panel-foot .rt3-btn { border-radius: 999px; height: 38px; padding: 0 22px; font-size: 11px; }

.rt3 .rt3-wsb-panel-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding-top: 0;
  border-top: 0;
  font-size: 12px;
  color: #8b7666;
}

/* ------------------------------------------------------------ Quy trình 6 bước */
.rt3-wsb-flow { padding-top: 54px; padding-bottom: 52px; }

.rt3-wsb-flow h2 {
  margin: 0 0 26px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 400;
  color: #3d2b20;
}

/* Mẫu chèn một gạch dọc mảnh rồi tới mũi tên giữa hai bước. Cả hai vẽ bằng
   pseudo-element nên phần đánh dấu vẫn là một danh sách có thứ tự sạch sẽ. */
.rt3-wsb-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 52px;
  row-gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt3-wsb-steps li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.rt3-wsb-steps li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -46px;
  top: 1px;
  bottom: 1px;
  width: 1px;
  background: rgba(120, 92, 62, .22);
}

.rt3-wsb-steps li:not(:first-child)::after {
  content: "\2192";
  position: absolute;
  left: -33px;
  top: 50%;
  transform: translateY(-50%);
  color: #bb9c74;
  font-size: 14px;
  line-height: 1;
}

.rt3-wsb-steps b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: #c9ae8b;
}

.rt3-wsb-steps span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3d2b20;
}

.rt3-wsb-steps small { display: block; margin-top: 3px; font-size: 10.5px; color: #8b7666; }

/* ---------------------------------------------------------- Không gian xưởng */
/* Mẫu gói cả dải này vào một tấm thẻ bo góc nằm trong container, chữ đặt đè
   lên ảnh lớn bên trái qua một lớp phủ kem loang dần. */
.rt3-wsb-space-block { padding-top: 0; padding-bottom: 56px; }

.rt3-wsb-space {
  position: relative;
  display: grid;
  grid-template-columns: 1.95fr .62fr .62fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  height: 342px;
  border-radius: 10px;
  overflow: hidden;
  background: #f4ece1;
}

.rt3-wsb-space figure { margin: 0; overflow: hidden; }

.rt3-wsb-space img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms ease;
}

.rt3-wsb-space figure:hover img { transform: scale(1.04); }

.rt3-wsb-space-big { grid-column: 1; grid-row: 1 / 3; }
.rt3-wsb-space figure:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; }
.rt3-wsb-space figure:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.rt3-wsb-space figure:nth-of-type(4) { grid-column: 3; grid-row: 2; }

.rt3-wsb-space-copy {
  grid-column: 1;
  grid-row: 1 / 3;
  z-index: 2;
  align-self: center;
  padding: 0 60px 0 40px;
  background: linear-gradient(90deg, #f7f0e6 0%, #f7f0e6 46%, rgba(247, 240, 230, .9) 64%, rgba(247, 240, 230, 0) 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rt3-wsb-space-copy h2 {
  margin: 14px 0 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 2.1vw, 29px);
  font-weight: 400;
  line-height: 1.24;
  color: #3d2b20;
}

.rt3 .rt3-wsb-space-copy > p {
  margin: 0 0 22px;
  max-width: 25em;
  font-size: 12px;
  line-height: 22px;
  color: #7d6b5d;
}

.rt3-wsb-space-copy .rt3-btn {
  align-self: flex-start;
  gap: 12px;
  border-radius: 999px;
  height: 42px;
  padding: 0 10px 0 22px;
}

/* Nút trong mẫu có hình tam giác phát nằm trong một vòng tròn viền mảnh. */
.rt3-wsb-space-copy .rt3-btn i {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-style: normal;
  font-size: 9px;
  line-height: 1;
}

/* ------------------------------------------------------------ Vì sao tham gia */
.rt3-wsb-why { padding-top: 0; padding-bottom: 54px; }

.rt3-wsb-why h2 {
  margin: 0 0 30px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 400;
  color: #3d2b20;
}

.rt3-wsb-why-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt3-wsb-why-list li { display: flex; align-items: flex-start; gap: 13px; }
.rt3-wsb-why-list .rt3-wsb-icon { width: 30px; height: 30px; color: #b98a56; }
.rt3-wsb-why-list b { display: block; font-size: 12px; font-weight: 600; color: #3d2b20; }
.rt3-wsb-why-list small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 18px; color: #8b7666; }

/* ---------------------------------------------------------------- Nghệ nhân */
.rt3-wsb-master {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
  align-items: stretch;
  background: #f7f0e6;
  border-top: 1px solid rgba(120, 92, 62, .14);
}

/* Ảnh phải bám chiều cao của cột chữ. Nếu để img cao 100% trong figure cao
   auto thì trình duyệt quay về tỉ lệ gốc 4:3 và dải này phình lên gần 700px. */
.rt3-wsb-master figure { position: relative; margin: 0; min-height: 340px; }
.rt3-wsb-master img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mẫu không cắt ảnh bằng một đường thẳng đứng mà để nó tan dần vào nền kem. */
.rt3-wsb-master figure::after {
  content: "";
  position: absolute;
  inset: 0 0 0 55%;
  background: linear-gradient(90deg, rgba(247, 240, 230, 0) 0%, rgba(247, 240, 230, .55) 62%, #f7f0e6 100%);
}

.rt3-wsb-master-copy { align-self: center; padding: 46px 6.5% 46px 56px; max-width: 620px; }

.rt3-wsb-master-copy h2 {
  margin: 12px 0 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 2.1vw, 29px);
  font-weight: 400;
  color: #3d2b20;
}

.rt3 .rt3-wsb-master-copy > p { margin: 0 0 20px; font-size: 12px; line-height: 22px; color: #7d6b5d; }

.rt3 .rt3-wsb-sign {
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: #4a3728;
}

.rt3-wsb-master-copy small { display: block; margin-bottom: 18px; font-size: 11px; color: #8b7666; }

/* ----------------------------------------------------- FAQ + cảm nhận khách */
.rt3-wsb-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: start;
}

.rt3-wsb-bottom h2 {
  margin: 0 0 20px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 400;
  color: #3d2b20;
}

/* Mẫu đóng khung từng câu hỏi thành một hộp bo góc riêng chứ không phải các
   dòng nối nhau bằng gạch ngang như các trang khác. */
.rt3-wsb-bottom .rt3-faq-list { display: grid; gap: 7px; border: 0; }

.rt3-wsb-bottom .rt3-faq-list details {
  padding: 11px 16px;
  border: 1px solid rgba(120, 92, 62, .18);
  border-radius: 5px;
  background: #fbf7f1;
}

.rt3-wsb-bottom .rt3-faq-list details[open] { background: #f7f0e6; }
.rt3-wsb-bottom .rt3-faq-list summary { padding: 0; font-size: 12px; line-height: 20px; }
.rt3-wsb-bottom .rt3-faq-list details p { padding-top: 8px; margin: 0; font-size: 11.5px; line-height: 20px; }

.rt3-wsb-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.rt3-wsb-reviews article {
  padding: 18px 18px 20px;
  background: #fbf7f1;
  border: 1px solid rgba(120, 92, 62, .16);
  border-radius: 5px;
}

.rt3-wsb-reviews header { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }

.rt3-wsb-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e7d6bd;
  color: #7a5533;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
}

.rt3-wsb-reviews header b { display: block; font-size: 12px; font-weight: 600; color: #3d2b20; }
.rt3-wsb-stars { font-size: 10px; letter-spacing: 0.12em; color: #c98a3c; }
.rt3 .rt3-wsb-reviews p { margin: 0; font-size: 11.5px; line-height: 20px; color: #7d6b5d; }

/* Ba chấm dưới nhóm cảm nhận — thuần trang trí, đúng như mẫu. */
.rt3-wsb-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.rt3-wsb-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #c9a97e; }
.rt3-wsb-dots i:first-child { background: #b8792c; border-color: #b8792c; }

/* --------------------------------------------------------- Khoảnh khắc workshop */
.rt3-wsb-moments { padding-bottom: 84px; }

.rt3-wsb-moments .rt3-block-head { margin-bottom: 24px; }

.rt3-wsb-rail-wrap { position: relative; }

.rt3-wsb-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 10px;
  padding: 0 max(40px, calc((100% - 1340px) / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.rt3-wsb-rail::-webkit-scrollbar { display: none; }

.rt3-wsb-rail figure { margin: 0; overflow: hidden; border-radius: 4px; scroll-snap-align: start; }

.rt3-wsb-rail img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform 700ms ease;
}

.rt3-wsb-rail figure:hover img { transform: scale(1.05); }

/* Nút tròn cuộn dải ảnh, nằm đè lên mép phải như mẫu. */
.rt3-wsb-rail-next {
  position: absolute;
  z-index: 2;
  right: max(28px, calc((100% - 1340px) / 2 - 12px));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fffaf3;
  box-shadow: 0 6px 18px rgba(58, 34, 16, .18);
  color: #5a4739;
  font-size: 13px;
  cursor: pointer;
}

.rt3-wsb-rail-next:hover { background: #fff; color: #8e6444; }

/* ================================ khổ nhỏ ================================ */
@media (max-width: 1180px) {
  /* Hẹp hơn thì năm gói không đủ chỗ trên một hàng nữa. */
  .rt3-wsb-dat { grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; }
  .rt3-wsb-goi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt3-wsb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt3-wsb-steps li:nth-child(3n+1)::before,
  .rt3-wsb-steps li:nth-child(3n+1)::after { content: none; }
  .rt3-wsb-why-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt3-wsb-space { grid-template-columns: 1.6fr .7fr .7fr; height: 320px; }
  .rt3-wsb-space-copy { padding: 0 40px 0 28px; }
}

@media (max-width: 1024px) {
  .rt3-wsb-hero { padding-top: 100px; }
  .rt3-wsb-hero-copy { padding-bottom: 30px; }
  .rt3-wsb-hero-wash {
    /* Giữ ảnh workshop đủ rõ trên màn hình hẹp, rồi tăng dần nền sáng về
       phía dưới để phần mô tả và các thông tin ngắn vẫn dễ đọc. */
    background: linear-gradient(180deg,
      rgba(247, 240, 230, .18) 0%,
      rgba(247, 240, 230, .38) 34%,
      rgba(247, 240, 230, .78) 70%,
      #f4eee5 100%);
  }
  /* Xếp dọc: bảng gói trước, khung đặt lịch ngay dưới. */
  .rt3-wsb-dat { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rt3-wsb-panel { padding: 26px 22px 24px; }
  .rt3-wsb-space { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; height: auto; }
  .rt3-wsb-space-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 30px 26px;
    background: #f7f0e6;
  }
  .rt3-wsb-space-big { grid-column: 1 / -1; grid-row: 2; }
  .rt3-wsb-space figure:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  .rt3-wsb-space figure:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  .rt3-wsb-space figure:nth-of-type(4) { display: none; }
  .rt3-wsb-space img { height: 220px; }
  .rt3-wsb-master { grid-template-columns: 1fr; }
  .rt3-wsb-master figure { min-height: 240px; }
  .rt3-wsb-master figure::after { inset: 55% 0 0 0; background: linear-gradient(180deg, rgba(247, 240, 230, 0) 0%, #f7f0e6 100%); }
  .rt3-wsb-master-copy { padding: 34px 30px; max-width: none; }
  .rt3-wsb-bottom-grid { grid-template-columns: 1fr; gap: 42px; }
  .rt3-wsb-rail { padding-inline: 30px; }
  .rt3-wsb-rail-next { display: none; }
}

@media (max-width: 720px) {
  .rt3-wsb-hero { padding-top: 92px; }
  .rt3-wsb-goi { grid-template-columns: 1fr 1fr; }
  .rt3-wsb-goi li:nth-child(5) { grid-column: 1 / -1; }
  .rt3-wsb-goi small { min-height: 0; }
  .rt3-wsb-steps { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .rt3-wsb-steps li::before, .rt3-wsb-steps li::after { content: none !important; }
  .rt3-wsb-why-list { grid-template-columns: 1fr 1fr; gap: 20px; }
  .rt3-wsb-reviews { grid-template-columns: 1fr; }
  .rt3-wsb-rail { grid-auto-columns: 74%; padding-inline: 20px; scroll-snap-type: x mandatory; }
  .rt3-wsb-book-row { grid-template-columns: 1fr; }
  .rt3-wsb-assure { grid-template-columns: 1fr; gap: 8px; }
  .rt3-wsb-assure li { align-items: center; }
}

/* =========================================================================
   Hàng link con trong trang cha
   Quy ước dự án: menu chính KHÔNG có mục sổ xuống. Các đường dẫn cấp con nằm
   ngay trong trang cha, dưới hero, dưới dạng hàng chip bấm được.
   ========================================================================= */

.rt3-link-con {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}

.rt3-link-con-nhan {
  margin-right: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #96806a;
}

.rt3-link-con a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid rgba(142, 100, 68, 0.32);
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: #4a3628;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.rt3-link-con a:hover,
.rt3-link-con a:focus-visible {
  border-color: #8e6444;
  background: #8e6444;
  color: #fff;
}

.rt3-link-con a::after { display: none; }

/* Bản đặt trên ảnh hero (trang Workshop): nền giấy đục để đọc được dù ảnh phía
   sau sáng hay tối, và đồng bộ tông với bảng giờ làm việc ngay bên dưới. */
.rt3-link-con-sang a {
  border-color: rgba(142, 100, 68, 0.3);
  background: rgba(255, 252, 246, 0.92);
  color: #4a3628;
  box-shadow: 0 6px 16px rgba(67, 42, 25, 0.1);
}

.rt3-link-con-sang a:hover,
.rt3-link-con-sang a:focus-visible {
  border-color: #8e6444;
  background: #8e6444;
  color: #fff;
}

.rt3-link-con-sang .rt3-link-con-nhan {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.86);
  color: #7d6753;
}

/* Dải mỏng chỉ chứa hàng link, không cần khoảng đệm dọc lớn như khối nội dung. */
.rt3-block-mong { padding: 28px 0 4px; }

/* Trong hero trang Sản phẩm và Về chúng tôi thì hàng link nối tiếp phần trên. */
.rt3-shop-hero .rt3-link-con { margin-top: 34px; }
.a2-link-con { margin-top: 26px; }

/* Trang Workshop: hàng gói nằm trên ảnh hero, cần tách khỏi dòng chip phía trên. */

@media (max-width: 560px) {
  .rt3-link-con { gap: 6px; }
  .rt3-link-con a { padding: 8px 14px; font-size: 12px; }
}

/* =========================================================================
   Ô tìm kiếm trên header
   ========================================================================= */

.rt3-search { position: relative; display: flex; align-items: center; }

.rt3-search-form {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  border-radius: 999px;
  background: #fffaf3;
  box-shadow: 0 18px 40px rgba(50, 30, 16, 0.2);
  transform: translateY(-50%);
  transition: width 300ms ease, opacity 220ms ease, padding 300ms ease, visibility 0s linear 300ms;
}

.rt3-search.is-mo .rt3-search-form {
  width: min(320px, 62vw);
  padding: 6px 8px 6px 16px;
  opacity: 1;
  visibility: visible;
  transition: width 300ms ease, opacity 220ms ease, padding 300ms ease, visibility 0s;
}

.rt3-search-form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #3d2b20;
  font-family: inherit;
  font-size: 13.5px;
}

.rt3-search-form input:focus { outline: none; }
.rt3-search-form input::placeholder { color: #a08a72; }

.rt3-search-form button {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #8e6444;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

/* Trang tìm kiếm: form to đặt giữa nội dung, luôn hiện. */
.rt3-search-form-lon {
  position: static;
  width: 100%;
  max-width: 720px;
  margin: 0 0 48px;
  padding: 8px 8px 8px 20px;
  opacity: 1;
  visibility: visible;
  overflow: visible;
  transform: none;
  border: 1px solid rgba(142, 100, 68, 0.28);
  box-shadow: none;
  transition: none;
}

.rt3-search-form-lon .rt3-search-ic { width: 20px; height: 20px; color: #8e6444; flex: none; }
.rt3-search-form-lon input { font-size: 16px; padding: 12px 0; }
.rt3-search-form-lon button { width: auto; height: auto; padding: 12px 26px; font-size: 12px; }

.rt3-menu-search {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 20px;
}

.rt3-menu-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}

.rt3-menu-search input::placeholder { color: rgba(255, 255, 255, 0.5); }

.rt3-menu-search button {
  flex: none;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #e2c9a4;
  color: #2f2018;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* =========================================================================
   Kết quả tìm kiếm
   ========================================================================= */

.rt3-search-nhom { margin-bottom: 56px; }

.rt3-search-nhom h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 500;
  color: #3d2b20;
}

.rt3-search-nhom h2 i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #96806a;
}

.rt3-search-list { display: grid; gap: 10px; }

.rt3-search-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid rgba(142, 100, 68, 0.16);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  text-decoration: none;
  transition: border-color 240ms ease, transform 240ms ease;
}

.rt3-search-item:hover { border-color: #8e6444; transform: translateX(4px); }

.rt3-search-item img {
  width: 64px;
  height: 64px;
  border-radius: 0.8rem;
  object-fit: cover;
  background: #d7c5af;
}

.rt3-search-item h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: #3d2b20; }
.rt3-search-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #6d5947; }
.rt3-search-item b { font-size: 14px; color: #8e6444; white-space: nowrap; }

.rt3-search-empty { max-width: 620px; margin-bottom: 48px; }
.rt3-search-empty h2 { margin: 0 0 8px; font-size: 24px; font-weight: 500; color: #3d2b20; }
.rt3-search-empty p { margin: 0 0 20px; color: #6d5947; }
.rt3-search-goi-y { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .rt3-search-item { grid-template-columns: auto 1fr; }
  .rt3-search-item b { grid-column: 2; }
}

/* =========================================================================
   Mạng xã hội ở footer
   ========================================================================= */

.rt3-footer-lien { text-decoration: none; }

.rt3-footer-mxh { display: flex; gap: 8px; margin-top: 18px; }

.rt3-footer-mxh a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: inherit;
  transition: background-color 240ms ease, border-color 240ms ease;
}

.rt3-footer-mxh a:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }
.rt3-footer-mxh a::after { display: none; }
.rt3-mxh-i { width: 18px; height: 18px; }


/* =========================================================================
   Trang chi tiết gói workshop
   ========================================================================= */

.rt3-goi-chi-tiet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 56px;
}

.rt3-goi-anh {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1.4rem;
  margin-bottom: 36px;
}

.rt3-goi-noi-dung h2 {
  margin: 40px 0 18px;
  font-size: 24px;
  font-weight: 500;
  color: #3d2b20;
}

.rt3-goi-noi-dung h2:first-of-type { margin-top: 0; }

.rt3-goi-gom { margin: 0; padding-left: 20px; }
.rt3-goi-gom li { margin-bottom: 10px; font-size: 15px; line-height: 1.66; color: #5c4736; }

.rt3-goi-buoc { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.rt3-goi-buoc li {
  display: flex;
  gap: 18px;
  padding: 20px 24px;
  border: 1px solid rgba(142, 100, 68, 0.18);
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.5);
}

.rt3-goi-buoc span { flex: none; font-size: 12px; font-weight: 600; color: #8e6444; }
.rt3-goi-buoc b { display: block; margin-bottom: 5px; font-size: 16px; font-weight: 500; color: #3d2b20; }
.rt3-goi-buoc p { margin: 0; font-size: 14.5px; line-height: 1.62; color: #6d5947; }

.rt3-goi-dat { position: sticky; top: 96px; }
.rt3-goi-gia { margin: -6px 0 18px; font-size: 22px; font-weight: 600; color: #8e6444; }

.rt3-goi-gio {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(142, 100, 68, 0.18);
  font-size: 13px;
  line-height: 1.6;
  color: #6d5947;
}

.rt3-goi-gio b { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #96806a; }

.rt3-goi-khac { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.rt3-goi-khac a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid rgba(142, 100, 68, 0.2);
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  text-decoration: none;
  transition: border-color 240ms ease, transform 240ms ease;
}

.rt3-goi-khac a:hover { border-color: #8e6444; transform: translateY(-3px); }
.rt3-goi-khac b { font-size: 17px; font-weight: 500; color: #3d2b20; }
.rt3-goi-khac small { font-size: 13px; line-height: 1.55; color: #6d5947; }
.rt3-goi-khac strong { font-size: 15px; font-weight: 600; color: #8e6444; }

@media (max-width: 1024px) {
  .rt3-goi-chi-tiet { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rt3-goi-dat { position: static; }
}

/* =========================================================================
   Form gửi câu hỏi ở trang FAQ
   ========================================================================= */

.rt3-faq-hoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.rt3-faq-hoi-copy h2 { margin: 6px 0 14px; font-size: 30px; font-weight: 500; color: #3d2b20; }
.rt3-faq-hoi-copy p { margin: 0; font-size: 15px; line-height: 1.7; color: #6d5947; }

.rt3-faq-hoi-mxh { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.rt3-faq-hoi-mxh span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #96806a; }

.rt3-faq-hoi-mxh a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(142, 100, 68, 0.3);
  border-radius: 999px;
  color: #8e6444;
  transition: background-color 240ms ease, color 240ms ease;
}

.rt3-faq-hoi-mxh a:hover { background: #8e6444; color: #fff; }

.rt3-faq-hoi-form {
  display: grid;
  gap: 16px;
  padding: 32px;
  border: 1px solid rgba(142, 100, 68, 0.2);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.68);
}

.rt3-faq-hoi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.rt3-faq-hoi-form label { display: grid; gap: 7px; }

.rt3-faq-hoi-form label > span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #96806a;
}

.rt3-faq-hoi-form input,
.rt3-faq-hoi-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(142, 100, 68, 0.28);
  border-radius: 0.8rem;
  background: #fff;
  color: #3d2b20;
  font-family: inherit;
  font-size: 14.5px;
}

.rt3-faq-hoi-form textarea { resize: vertical; line-height: 1.6; }

.rt3-faq-hoi-form input:focus,
.rt3-faq-hoi-form textarea:focus { outline: 2px solid #8e6444; outline-offset: 1px; }

.rt3-faq-hoi-form .rt3-note { margin: 0; font-size: 12.5px; color: #96806a; }

@media (max-width: 900px) {
  .rt3-faq-hoi { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rt3-faq-hoi-row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Khối video (Về chúng tôi, 3D Showroom) + nhãn bài Sự kiện
   ========================================================================= */

.rt3-video-khung,
.a2-video-khung {
  overflow: hidden;
  border-radius: 1.4rem;
  background: #1c120b;
  box-shadow: 0 20px 46px rgba(50, 30, 16, 0.16);
}

.rt3-video-khung video,
.a2-video-khung video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.a2-video { max-width: 1080px; margin: 0 auto; padding: 0 24px 72px; }
.a2-video-chu { margin: 14px 0 0; font-size: 13px; text-align: center; color: #6d5947; }

.rt3-post-su-kien > div { position: relative; }

.rt3-post-nhan {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #8e6444;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}