/* ══════════════════════════════════════════════════════════════════════════
   TRANG CHỦ — THEME DISCORD, dựng theo TRANG THẬT discord.com (18/09/2026)
   Chỉ index.html dùng. Lý do từng lựa chọn: comment đầu file HTML.
   Mọi lớp mang tiền tố .v6- (bẫy tên trần, CLAUDE.md §8).

   SỐ ĐO LẤY TỪ discord.com, khổ 1440 (đo computed style + điểm ảnh):
     tấm kính khối   1240 × 610 · bo 120 · đệm 28
     ô ảnh chụp      727 × 554 (≈ 58% tấm) · bo 104
     cột chữ         384 rộng · tiêu đề 36px 800 · chữ thân 20px/1.3 TRẮNG
     đầu trang       tiêu đề 56px · chữ dẫn 20px · nút cao 65px chữ 20px
     nút             trắng #FFF chữ #23272A · blurple #5865F2 · bo 12
     chân trang      nền đen, tiêu đề cột trắng 70%, liên kết trắng

   MÀU (token _common.css §2A·6 + §2A·6b). Chữ trên nền màu LUÔN trắng:
     trắng trên --v6-dot 13.88 · --v6-violet-blue 9.49 · --v6-glass-mid 6.78 ·
     --v6-glass-dark 9.43 · --v6-black 15.05 · --v6-charcoal 13.45
     Greyple trên --v6-black ≈ 6.4 (chỉ trong giao diện ứng dụng tối)
   ⚠ --v6-glass-light (mép trên tấm kính) chỉ 4.15 với chữ trắng — cột chữ
     luôn căn GIỮA tấm theo chiều dọc, nằm trên phần kinh-giua → kinh-toi.
   ══════════════════════════════════════════════════════════════════════════ */

.v6{font-family:'Inter',var(--font-ui);color:var(--white);
  background:linear-gradient(180deg,var(--v6-dot) 0,var(--v6-violet-blue) 1500px,var(--v6-violet-blue) calc(100% - 1400px),var(--v6-depth) 100%)}
body:has(.v6){background:var(--v6-depth)}
.v6 :focus-visible{outline-color:var(--white)}

/* Chiều cao thanh điều hướng + 1px kẻ đáy — khai trên .screen-head chứ không
   trên .v6 vì .v6 CHÍNH LÀ vật chứa @container app (lý do ở _trang-chu-v3). */
.screen-head{--height-nav:65px}
@container app (max-width:1023px){.screen-head{--height-nav:61px}}

/* ── Chép từ _screens.css (file này không nạp _screens.css) ─────────────────────── */
.v6 .drawer-menu{position:fixed}
.v6 .drawer-menu .body-drawer{background:var(--v6-black)}
.alert-mockup{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;
  max-width:min(520px,92vw);padding:12px 20px;border-radius:12px;
  background:var(--white);color:var(--v6-black);font-size:14.5px;box-shadow:var(--shadow-box)}
/* Menu tài khoản: kiểu nằm ở _common.css (một bộ cho mọi màn, 19/09). */

/* ══ CHỮ ══════════════════════════════════════════════════════════════════
   Montserrat 800 thay ABC Ginto Nord — chữ rộng, hình học, có đủ dấu Việt.
   Dãn dòng 1.08 (Discord 0.93): dấu chồng hai tầng (Ể, Ổ) cần thêm chỗ.
   Viết hoa bằng CSS để trình đọc màn hình không đánh vần từng chữ cái.   */
.v6-h1,.v6-h2{font-family:'Montserrat',var(--font-ui);font-weight:800;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--white)}
/* Cỡ chọn để "CÙNG PHÁT TRIỂN." nằm gọn một dòng trong cột trái — lớn hơn
   là chữ "TRIỂN." rơi xuống dòng riêng (thấy trên ảnh chụp 18/09). */
.v6-h1{font-size:clamp(30px,min(3.25cqi,7vh),60px);line-height:1.08}
/* CHỮ ĐẦU TRANG — TRẮNG ĐẶC, SẮC NÉT (19/09 lượt 3).
   Người dùng: bản khối đùn "quá mờ, quá xấu". Hai lượt trước đều hỏng vì
   CHỒNG HIỆU ỨNG lên chữ — ĐỪNG THÊM LẠI:
     ✗ 8 lớp text-shadow đùn khối + bóng mềm 22px → mép chữ nhoè thành vệt;
     ✗ chữ chuyển sắc pastel (pha trắng) trên nền tím → tương phản thấp,
       đọc ra "mờ";
     ✗ xoay phối cảnh / filter:drop-shadow (lượt 1) → chữ bị vẽ thành ảnh.
   Discord thật để tiêu đề TRẮNG ĐẶC, không bóng — chữ nổi nhờ cỡ + độ đậm.
   Điểm nhấn dòng hai là một VẠCH màu dưới chữ (trang trí, không mang chữ),
   nên chữ luôn trắng 100% và sắc ở mọi cỡ.                                */
.v6-h1{letter-spacing:-.005em;text-shadow:none}
/* Lượt 4 (người dùng: "thà để màu phối tím như trước trông thu hút hơn"):
   dòng hai TÍM CHUYỂN SẮC trở lại — chỉ màu, KHÔNG bóng, KHÔNG đùn, nên vẫn
   sắc. Điểm màu pha trắng vừa đủ để sáng trên nền tối (≥ 4.5 : 1 ở --dark-5),
   không pha nhiều tới mức thành pastel "mờ". Vệt sáng lướt 9s. Bỏ vạch dưới
   chữ — nó đè lên câu dẫn ở màn thấp. */
.v6-h1 em{font-style:normal;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--v6-fuchsia) 72%,var(--white)) 0%,
    color-mix(in srgb,var(--v6-blurple-pale) 82%,var(--white)) 45%,
    color-mix(in srgb,var(--v6-blue) 72%,var(--white)) 80%,
    color-mix(in srgb,var(--v6-fuchsia) 72%,var(--white)) 100%) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:v6-h1-img 9s linear infinite}
@keyframes v6-h1-img{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.v6-h1 em{animation:none}}
.v6-h2{font-size:clamp(26px,2.55cqi,40px);line-height:1.08;text-wrap:balance}

/* ══ THANH ĐIỀU HƯỚNG — như Discord: logo trái, liên kết GIỮA, nút phải ═══ */
.v6 .nav{background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--dur-nav),border-color var(--dur-nav)}
.v6 .nav.has-bubble{background:color-mix(in srgb,var(--v6-night) 82%,transparent);box-shadow:none;
  border-bottom-color:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.v6 .nav-menu{margin-inline:auto}
.v6 .nav-menu a{color:var(--white);font-size:15px;font-weight:600}
.v6 .nav-menu a::after{height:2px;background:var(--white)}
.v6 .nav .brand span{font-weight:700}
.v6 .nav .btn--outline-white{border-radius:12px;border-color:rgba(255,255,255,.7);color:var(--white)}
/* "Log In" của Discord: nền trắng, chữ đen, bo 16. */
.v6 .nav .btn--gold{background:var(--white);color:var(--v6-void);border-radius:16px;font-weight:600}
.v6 .nav .btn--gold:hover{box-shadow:none;background:var(--v6-light)}
.v6 .nav .team button[aria-pressed="true"]{background:var(--white);color:var(--v6-black)}

/* ══ NÚT ══════════════════════════════════════════════════════════════════ */
.btn.v6-btn-main,.btn.v6-btn-white,.btn.v6-btn-code,.btn.v6-btn-gray{border-radius:12px;font-weight:500;letter-spacing:.01em;height:auto}
.btn.v6-btn-main{padding:15px 24px;font-size:16px;background:var(--v6-blurple);color:var(--white);border:0}
.btn.v6-btn-main:hover{background:var(--v6-blurple-deep);box-shadow:none;transform:translateY(-2px)}
.btn.v6-btn-white{padding:15px 24px;font-size:16px;background:var(--white);color:var(--v6-black);border:0}
.btn.v6-btn-white:hover{background:var(--v6-light);transform:translateY(-2px)}
.btn.v6-btn-code{padding:13px 22px;font-size:16px;border:1px solid var(--white);color:var(--white)}
.btn.v6-btn-code:hover{background:rgba(255,255,255,.12)}
.btn.v6-btn-gray{background:var(--v6-gray-dark);color:var(--white)}
.btn.v6-btn-gray:hover{background:color-mix(in srgb,var(--v6-gray-dark) 80%,var(--white))}
.btn.v6-btn-small{padding:12px 20px;font-size:15.5px}
.btn.v6-btn-mini{padding:6px 12px;font-size:12.5px;border-radius:8px;font-weight:600}

/* ══ ① MÀN ĐẦU ════════════════════════════════════════════════════════════ */
.screen-head{margin-top:calc(-1 * var(--height-nav))}
.v6-head{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
  padding-top:calc(var(--height-nav) + clamp(10px,3vh,48px));padding-bottom:clamp(18px,4vh,56px);
  /* Đo từ discord.com: đỉnh gần đen #02021C → chàm #181B81; quầng blurple
     sau cụm minh hoạ. */
  background:
    radial-gradient(ellipse 55% 60% at 70% 42%,color-mix(in srgb,var(--v6-blurple) 50%,var(--v6-dot)) 0%,transparent 70%),
    linear-gradient(180deg,var(--v6-night) 0%,var(--v6-dot) 62%,var(--v6-dot) 100%)}
.v6-head-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.v6-star{position:absolute;inset:0;opacity:.85;
  background-image:
    radial-gradient(1.5px 1.5px at 6% 20%,var(--white) 50%,transparent 51%),
    radial-gradient(1px 1px at 16% 66%,var(--white) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 29% 12%,var(--white) 50%,transparent 51%),
    radial-gradient(1px 1px at 38% 84%,var(--white) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 30%,var(--white) 50%,transparent 51%),
    radial-gradient(1px 1px at 56% 8%,var(--white) 50%,transparent 51%),
    radial-gradient(2px 2px at 63% 76%,var(--v6-blurple-pale) 50%,transparent 51%),
    radial-gradient(1px 1px at 74% 16%,var(--white) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 88%,var(--white) 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 36%,var(--white) 50%,transparent 51%),
    radial-gradient(2px 2px at 97% 70%,var(--white) 50%,transparent 51%)}
.v6-gold{position:absolute;width:36%;aspect-ratio:1;right:10%;top:10%;border-radius:50%;background:var(--v6-fuchsia);
  opacity:.16;filter:blur(90px);animation:v6-drift 40s ease-in-out infinite}
@keyframes v6-drift{0%,100%{translate:0 0}50%{translate:-6% 8%}}

/* Khối flex → .container BẮT BUỘC width:100% (CLAUDE.md §8). */
.v6-head>.container{width:100%;flex:1;position:relative;display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-rows:auto auto;
  /* Nội dung + cặp nút dồn thành MỘT cụm giữa màn — hàng 1fr trước đây
     đẩy cặp nút xuống tận đáy, để một khoảng chết lớn ở giữa. */
  align-content:center;column-gap:clamp(20px,3cqi,56px);row-gap:clamp(20px,5vh,64px);align-items:center}
.v6-head-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.4vh,24px)}
.v6-hint{max-width:30em;font-size:clamp(16px,min(1.4cqi,2.4vh),20px);line-height:1.3;color:var(--white)}
/* Kính mờ thay khối trắng đặc (19/09: "hòa hòa chút") — khối trắng đặc
   giữa nền chàm là điểm chói nhất màn, kéo mắt khỏi tiêu đề. Chữ gõ và
   chữ gợi ý TRẮNG trên nền chàm pha trắng 12% (≥ 9 : 1). */
.v6-search{width:100%;max-width:520px;height:clamp(48px,6.6vh,58px);display:flex;align-items:center;gap:10px;padding:0 7px 0 18px;
  border-radius:14px;color:var(--white);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.v6-search:focus-within{outline:3px solid var(--v6-blurple-pale);outline-offset:3px}
.v6-search svg{width:19px;height:19px;flex:0 0 19px;color:var(--white)}
.v6-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font-size:15.5px;color:var(--white)}
.v6-search input::placeholder{color:rgba(255,255,255,.78)}
.v6-search .btn:focus-visible{outline-color:var(--white)}
/* Cặp nút giữa — Discord: cao 65, chữ 20. */
.v6-row-btn{grid-column:1/-1;position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.v6-row-btn .btn{padding:clamp(12px,2.2vh,20px) 32px;font-size:clamp(16px,1.4cqi,20px)}

/* ── Cụm minh hoạ ─────────────────────────────────────────────────────── */
.v6-illus{position:relative;justify-self:end;width:100%;
  max-width:calc((100svh - var(--height-nav) - 190px) * 1.7);padding:4% 9% 11% 5%;
  isolation:isolate}   /* ngữ cảnh xếp lớp riêng: quầng z-index:-1 nằm sau cụm, không chìm sau nền đầu trang */
/* Quầng sàn: vệt sáng blurple mờ dưới chân cụm — cụm "đứng" trên nền chứ
   không trôi lơ lửng; đổi màu nền sau lưng cho mềm, bớt cứng. */
.v6-illus::before{content:"";position:absolute;left:4%;right:6%;bottom:2%;height:26%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--v6-blurple) 70%,transparent),transparent);
  filter:blur(24px);opacity:.75;pointer-events:none}
.v6-illus::after{content:"";position:absolute;inset:6% 10% 18% 8%;border-radius:40%;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--v6-fuchsia) 30%,transparent),transparent);
  filter:blur(40px);pointer-events:none}
.v6-scene{display:block;will-change:transform}
@keyframes v6-bubble{from{translate:0 0}to{translate:0 -10px}}
.v6-mh{position:relative;padding:10px;border-radius:20px;background:var(--v6-black);
  transform:perspective(1800px) rotateY(-17deg) rotateX(7deg) rotateZ(1.5deg);transform-origin:40% 50%;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--v6-blurple-pale) 55%,transparent),0 50px 90px -30px rgba(0,0,0,.8);
  animation:v6-bubble 10s ease-in-out infinite alternate}
.v6-mh::after{content:"";position:absolute;left:50%;top:100%;width:22%;height:24px;translate:-50% 0;
  background:linear-gradient(var(--v6-black),var(--v6-charcoal));clip-path:polygon(28% 0,72% 0,100% 100%,0 100%)}
.v6-app{display:grid;grid-template-columns:minmax(0,31%) minmax(0,1fr);aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  font-size:12px;line-height:1.35}
/* 19/09: bỏ cột "biểu tượng máy chủ" (bốn ô màu chép từ Discord) — người
   dùng hỏi "để làm gì"; hệ thống không có máy chủ hay nhóm con nào để nó
   đại diện. Logo về đầu cột kênh; chỗ trống dưới kênh là "Thành viên mới"
   — khối có thật trên trang chủ. */
.v6-app-channel b{display:flex;align-items:center;gap:8px}
.v6-app-channel b img{width:22px;height:22px;flex:0 0 22px}
.v6-app-new{margin-top:auto;padding:10px 6px 0;border-top:1px solid rgba(0,0,0,.3);display:flex;flex-direction:column;gap:8px}
.v6-app-new small{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v6-gray)}
.v6-app-new p{display:flex;align-items:center;gap:8px;min-width:0}
.v6-app-new .avatar{--c:24px;width:24px;height:24px;font-size:9px;flex:0 0 24px}
.v6-app-new p>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.v6-app-new b{padding:0;margin:0;border:0;font-size:11.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-app-new em{font-style:normal;font-size:10px;color:var(--v6-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-app-channel{display:flex;flex-direction:column;gap:2px;padding:12px 8px;background:var(--v6-black);min-width:0}
.v6-app-channel b{padding:0 6px 10px;margin-bottom:6px;border-bottom:1px solid rgba(0,0,0,.3);font-size:13px}
.v6-app-channel>span{padding:5px 8px;border-radius:6px;color:var(--v6-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-app-channel>span.active{background:var(--v6-charcoal);color:var(--white)}
.v6-app-chat{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--v6-charcoal);min-width:0}
.v6-app-info{display:flex;gap:10px}
.v6-app-info .avatar{--c:32px;font-size:11px;flex-shrink:0}
.v6-app-info>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.v6-app-info b{margin-right:6px}
.v6-app-info small{color:var(--v6-gray);font-size:10.5px}
.v6-app-stick{display:flex;flex-direction:column;gap:6px;max-width:260px;padding-bottom:10px;border-radius:10px;overflow:hidden;background:var(--v6-black);
  border-left:3px solid var(--v6-blurple)}
.v6-app-stick img{width:100%;aspect-ratio:16/7;object-fit:cover}
.v6-app-stick p{padding-inline:10px;display:flex;flex-direction:column}
.v6-app-stick span{margin-inline:10px;width:max-content;padding:4px 12px;border-radius:6px;background:var(--v6-blurple);font-weight:600}
.v6-app-orange{display:flex;gap:6px}
.v6-app-orange i{font-style:normal;padding:2px 8px;border-radius:8px;border:1px solid var(--v6-blurple);
  background:color-mix(in srgb,var(--v6-blurple) 25%,transparent);font-size:11px}

/* Điện thoại: thẻ hồ sơ kiểu Discord. */
.v6-scene--spn{position:absolute;right:0;bottom:4%;width:30%;z-index:3}
.v6-spn{display:flex;flex-direction:column;padding-bottom:14px;border-radius:24px;overflow:hidden;background:var(--v6-black);
  transform:perspective(1200px) rotateY(12deg) rotateZ(-4deg);
  border:4px solid var(--v6-charcoal);box-shadow:0 30px 60px -20px rgba(0,0,0,.75);font-size:11.5px;line-height:1.35;
  animation:v6-bubble 8s ease-in-out -3s infinite alternate}
.v6-spn-cover{height:56px;background:linear-gradient(135deg,var(--v6-blurple),var(--v6-fuchsia))}
.v6-spn .avatar{--c:56px;margin:-30px 0 6px 12px;border:5px solid var(--v6-black);box-sizing:content-box;font-size:17px}
.v6-spn b{padding-inline:14px;font-size:14px}
.v6-spn small{padding-inline:14px;color:var(--v6-gray)}
.v6-spn-facts{display:flex;flex-wrap:wrap;gap:4px;margin:10px 14px 0}
.v6-spn-facts i{font-style:normal;padding:2px 7px;border-radius:4px;background:var(--v6-charcoal);font-size:10.5px}

/* Sao bốn cánh lấp lánh. */
.v6-light-star{position:absolute;z-index:4;width:var(--k,22px);aspect-ratio:1;pointer-events:none;background:var(--white);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:v6-repeat 3.6s ease-in-out infinite}
.v6-light-star--1{--k:28px;right:0;top:34%}
.v6-light-star--2{--k:16px;left:34%;bottom:2%;animation-delay:-1.8s}
@keyframes v6-repeat{0%,100%{scale:1;opacity:1}50%{scale:.55;opacity:.55}}

/* ══ KHỐI — TẤM KÍNH ══════════════════════════════════════════════════════
   Discord: tấm 1240 × 610 bo 120, sáng ở mép trên (#6B73D7) tối dần xuống
   (#3A3D8C); viền sáng mảnh như cạnh kính. Không bóng đổ.               */
.v6-block{padding-block:clamp(36px,4.2cqi,64px)}
.v6-block:first-of-type{padding-top:clamp(64px,7cqi,112px)}
.v6-glass{position:relative;max-width:1500px;margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3.4cqi,64px);
  padding:clamp(14px,2cqi,28px) clamp(28px,4.4cqi,76px) clamp(14px,2cqi,28px) clamp(14px,2cqi,28px);
  border-radius:clamp(36px,8.4cqi,120px);
  background:linear-gradient(180deg,var(--v6-glass-light) 0%,var(--v6-glass-mid) 24%,var(--v6-glass-dark) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14)}
.v6-glass--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr);
  padding:clamp(14px,2cqi,28px) clamp(14px,2cqi,28px) clamp(14px,2cqi,28px) clamp(28px,4.4cqi,76px)}

.v6-glass-text{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;max-width:460px}
/* Mô tả + ba ý của tấm kính (19/09). Chữ TRẮNG trên kính (§2B: không chữ
   xám trên nền màu). Đặt ở phần giữa–dưới tấm kính — cụm chữ căn giữa theo
   chiều dọc nên không chạm mép trên sáng nhất (--v6-glass-light, 4.15 : 1). */
.v6-glass-open{font-size:clamp(15.5px,1.12cqi,18px);line-height:1.6;color:var(--white)}
.v6-glass-y{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v6-glass-y li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;font-weight:500}
/* Dấu tích: đĩa trắng mờ + nét trắng — trang trí, nghĩa nằm ở chữ. */
.v6-glass-y li::before{content:"";flex:0 0 22px;height:22px;margin-top:-1px;border-radius:50%;
  background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
@media (max-height:700px){.v6-glass-y{display:none}}   /* màn thấp: tấm kính vẫn vừa một màn */
.v6-glass-large{font-size:clamp(18px,1.6cqi,22px);line-height:1.3;font-weight:700}
.v6-glass-hint{font-size:clamp(16px,1.4cqi,20px);line-height:1.3}
.v6-glass-ai{display:flex;align-items:center;gap:10px;font-size:14.5px}
.v6-glass-btn{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.v6-text-st,.v6-text-tag{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:16px}
.v6-text-st li{display:inline-flex;align-items:center;gap:8px}
.v6-text-tag{gap:8px}
.v6-text-tag li{padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.25);font-size:14.5px;font-weight:500}
.v6-dot{width:10px;height:10px;border-radius:50%;background:var(--v6-blue)}
.v6-dot--active{background:var(--v6-leaf)}
.v6-dot--past{background:var(--v6-gray)}

/* Vật lơ lửng đè mép trên tấm kính — "3D Character Float". */
.v6-place-obj{position:absolute;z-index:2;top:-34px;pointer-events:none}
.v6-place-obj i{display:block;width:var(--k,64px);height:var(--k,64px);border-radius:50%;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--white) 60%,var(--c)) 0,var(--c) 45%,
    color-mix(in srgb,var(--c) 45%,var(--v6-night)) 100%);
  animation:v6-bubble 8s ease-in-out infinite alternate}
.v6-place-obj--1{--c:var(--v6-leaf);--k:60px;left:46%}
.v6-place-obj--2{--c:var(--v6-fuchsia);--k:52px;right:8%}
.v6-place-obj--3{--c:var(--v6-orange);--k:72px;left:6%;top:-40px}
.v6-place-obj--4{--c:var(--v6-blue);--k:56px;left:40%}
.v6-place-obj--5{--c:var(--v6-blurple-pale);--k:64px;right:10%}

/* ── Ô ẢNH CHỤP — mỗi khối một cảnh màu (đo từ discord.com) ─────────────── */
.v6-scene-img{position:relative;min-width:0;min-height:clamp(340px,40cqi,580px);
  border-radius:clamp(28px,7.2cqi,104px);padding:clamp(18px,3cqi,48px);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.v6-scene-img--pink{background:radial-gradient(ellipse 70% 50% at 50% 105%,color-mix(in srgb,var(--v6-scene-pink-2) 80%,var(--white)) 0%,transparent 70%),
  linear-gradient(180deg,var(--v6-scene-pink) 0%,color-mix(in srgb,var(--v6-scene-pink) 40%,var(--v6-scene-pink-2)) 55%,var(--v6-scene-pink-2) 100%)}
.v6-scene-img--search{background:radial-gradient(ellipse 70% 50% at 50% 0%,color-mix(in srgb,var(--v6-scene-purple) 60%,var(--white)) 0%,transparent 70%),
  linear-gradient(180deg,var(--v6-scene-purple) 0%,color-mix(in srgb,var(--v6-scene-purple) 45%,var(--v6-night)) 100%)}
.v6-scene-img--dark{background:radial-gradient(ellipse 60% 50% at 20% 0%,color-mix(in srgb,var(--v6-blurple) 35%,transparent) 0%,transparent 70%),
  linear-gradient(180deg,var(--v6-charcoal) 0%,var(--v6-black) 100%)}
.v6-scene-img--screen{background:radial-gradient(ellipse 70% 55% at 80% 100%,color-mix(in srgb,var(--v6-fuchsia) 45%,transparent) 0%,transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--v6-scene-screen) 55%,var(--v6-night)) 0%,var(--v6-scene-screen) 100%)}
.v6-scene-img--leaf{background:radial-gradient(ellipse 80% 45% at 50% 105%,var(--v6-scene-leaf-2) 0%,transparent 72%),
  linear-gradient(180deg,var(--v6-scene-leaf) 0%,color-mix(in srgb,var(--v6-scene-leaf) 55%,var(--v6-scene-leaf-2)) 100%)}

/* Nhãn dùng chung trong giao diện ứng dụng */
.v6-channel-label{display:inline-flex;padding:3px 10px;border-radius:6px;background:var(--white);color:var(--v6-black);font-size:12.5px;font-weight:700}
.v6-pin{font-style:normal;padding:1px 6px;margin-right:6px;border-radius:4px;background:var(--v6-orange);color:var(--v6-black);font-weight:700}
.v6-urgent{background:var(--v6-red)!important;color:var(--white)!important}                     /* 4.60 */

/* ── ② TIN TỨC: tin lớn tự chạy (trái) + danh sách tin (phải) ─────────────
   Theo khối tin doanhnhanvietnam.org.vn (19/09). Tấm kính đổi thành 2 hàng:
   hàng đầu là tiêu đề khối + nút; hàng dưới chia ô tin lớn | danh sách.
   Tiêu đề khối nằm ở mép trên sáng nhất của kính (trắng 4.15) — đạt vì là
   chữ LỚN (≥ 24px đậm, ngưỡng 3.0).                                        */
.v6-glass--info{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:stretch;
  row-gap:clamp(12px,1.6cqi,22px);padding:clamp(14px,2cqi,28px)}
.v6-st-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;
  padding:clamp(8px,1.4cqi,18px) clamp(14px,3.4cqi,60px) 0}
.v6-st{justify-content:flex-start;min-height:0;padding:clamp(16px,2.2cqi,32px)}

/* Các tin xếp chồng cùng một ô lưới — ô cao bằng tin cao nhất, đổi tin
   không làm cả khối nhảy lên xuống. */
.v6-st-frame{display:grid}
.v6-st-slide{grid-area:1/1;display:flex;flex-direction:column;gap:clamp(14px,1.6cqi,22px);
  color:var(--white);text-decoration:none;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease-btn),visibility .7s}
.v6-st-slide.active{opacity:1;visibility:visible}
.v6-st-img{display:block;aspect-ratio:16/9;border-radius:clamp(16px,2cqi,28px);overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.65)}
.v6-st-img img{width:100%;height:100%;object-fit:cover}
/* Ảnh tin đang hiện phóng rất chậm trong suốt lượt của nó — tin "sống"
   chứ không đứng im như một tấm poster. */
.v6-st-slide.active .v6-st-img img{animation:v6-st-room var(--st-paper,6s) linear forwards}
@keyframes v6-st-room{from{scale:1}to{scale:1.06}}
.v6-st-text{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-inline:4px;
  translate:0 12px;transition:translate .7s var(--ease-btn)}
.v6-st-slide.active .v6-st-text{translate:0 0}
.v6-st-label{display:flex;flex-wrap:wrap;gap:6px}
.v6-st-text b{font-size:clamp(20px,1.9cqi,30px);line-height:1.3;font-weight:700}
.v6-st-slide:hover .v6-st-text b{text-decoration:underline;text-underline-offset:4px}
.v6-st-text small{font-size:14px}
.v6-st-sum{font-size:clamp(15px,1.2cqi,17px);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v6-st-slide .v6-pin{margin-right:0;padding:3px 10px;font-size:12.5px}

/* Điều khiển: chấm chọn tin (trái) + nút trước / sau (phải). Chấm vẽ bằng
   ::before để vùng bấm vẫn đủ 24px dù chấm chỉ 10px. */
.v6-st-dk{display:flex;align-items:center;gap:10px;margin-top:clamp(14px,1.8cqi,24px)}
.v6-st-dot{display:flex;align-items:center;gap:2px;margin-right:auto}
.v6-st-dot button{min-width:24px;height:24px;padding:0 4px;border:0;background:none;display:grid;place-items:center}
.v6-st-dot button::before{content:"";width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.45);
  transition:width .35s var(--ease-btn),background-color .35s}
.v6-st-dot button[aria-current="true"]::before{width:30px;background:var(--white)}
.v6-st-btn{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.65);background:rgba(0,0,0,.18);color:var(--white);
  transition:background-color .25s,color .25s}
.v6-st-btn:hover{background:var(--white);color:var(--v6-black)}
.v6-st-btn svg{width:18px;height:18px}
.v6-st--one .v6-st-dk{display:none}

/* Danh sách tin bên phải */
.v6-st-list{list-style:none;margin:0;padding:clamp(4px,1cqi,14px) clamp(4px,2cqi,36px) clamp(4px,1cqi,14px) 0;
  display:flex;flex-direction:column;justify-content:center;gap:6px}
.v6-st-line{position:relative;display:grid;grid-template-columns:clamp(110px,10.5cqi,176px) minmax(0,1fr);
  gap:clamp(12px,1.4cqi,20px);align-items:center;padding:10px 10px 14px;border-radius:20px;overflow:hidden;
  color:var(--white);text-decoration:none;transition:background-color .3s var(--ease-btn)}
.v6-st-line:hover,.v6-st-line.active{background:rgba(0,0,0,.22)}
.v6-st-line img{width:100%;aspect-ratio:16/10;border-radius:12px;object-fit:cover}
.v6-st-line>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.v6-st-type{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;font-weight:600}
.v6-st-type .v6-pin{margin-right:0}
.v6-st-line b{font-size:clamp(14.5px,1.15cqi,17px);line-height:1.35;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v6-st-line small{font-size:13px;font-style:italic}
/* Vạch chạy thời gian dưới tin đang hiện — người xem biết còn bao lâu thì
   tin tự đổi. Đứng lại khi khối đang dừng (rê chuột / Tab vào). */
.v6-st-run{position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.18);opacity:0;transition:opacity .3s}
.v6-st-line.active .v6-st-run{opacity:1}
.v6-st-run::after{content:"";position:absolute;inset:0;background:var(--white);transform-origin:left center;scale:0 1}
.v6-st-line.active .v6-st-run::after{animation:v6-st-run var(--st-paper,6s) linear forwards}
.v6-st--use .v6-st-run::after{animation-play-state:paused}
@keyframes v6-st-run{to{scale:1 1}}

/* ── VỪA ĐÚNG MỘT MÀN HÌNH (19/09) ─────────────────────────────────────────
   Người dùng: "độ cao để fit view 1 page thôi, cần thay đổi theo kích thước
   màn hình khác nhau". Trước đây ảnh lớn giữ 16:9 THEO BỀ NGANG — màn càng
   rộng khối càng cao, ở 1880×880 khối vượt màn. Nay tính NGƯỢC LẠI:
     · chiều cao tấm kính = chiều cao khung nhìn − thanh điều hướng (65px)
       − khoảng thở trên dưới; trần 980px cho màn rất cao;
     · ảnh lớn co giãn LẤP phần còn lại (object-fit:cover), chữ dưới ảnh giữ
       nguyên cỡ — màn thấp thì ảnh thấp, chữ không bị bóp;
     · danh sách phải chia đều chiều cao cho bốn tin, ảnh nhỏ co theo.
   Khối nằm đúng một màn khi cuộn tới (scroll-snap proximity ở _common.css). */
.v6-glass--info{height:clamp(440px,calc(100vh - 65px - clamp(20px,3.2vh,40px)),980px);
  height:clamp(440px,calc(100svh - 65px - clamp(20px,3.2vh,40px)),980px);
  grid-template-rows:auto minmax(0,1fr)}
.v6-glass--info .v6-st{min-height:0;display:flex;flex-direction:column}
.v6-st-frame{flex:1;min-height:0}
.v6-st-slide{min-height:0}
.v6-st-img{flex:1 1 auto;min-height:120px;aspect-ratio:auto}
.v6-st-text{flex:0 0 auto}
/* Chữ tin lớn gọn lại để nhường chiều cao cho ẢNH — ảnh là thứ kéo mắt. */
.v6-glass--info .v6-st-text b{font-size:clamp(19px,min(1.6cqi,3vh),27px)}
.v6-glass--info .v6-st-sum{-webkit-line-clamp:2}
.v6-st-list{min-height:0;justify-content:stretch}
.v6-st-list>li{flex:1 1 0;min-height:0;display:flex}
.v6-st-line{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
.v6-st-line img{height:100%;max-height:120px;aspect-ratio:auto;align-self:center}
/* Màn thấp: bớt tóm tắt và thu tiêu đề tin lớn — giữ ảnh còn đủ lớn để
   nhìn ra. Chiều cao không truy vấn được bằng @container nên dùng @media. */
@media (max-height:760px){
  .v6-st-sum{display:none}
  .v6-st-text b{font-size:clamp(18px,1.6cqi,24px)}
  .v6-st-dk{margin-top:10px}
  .v6-st-line b{-webkit-line-clamp:2;font-size:14.5px}
}
/* Rất thấp (laptop 1280×620): danh sách chỉ giữ ảnh + tiêu đề. */
@media (max-height:660px){
  .v6-st-type,.v6-st-line small{display:none}
  .v6-st-line{padding-block:6px 10px}
}
/* Xếp dọc (≤ 1023): tin lớn + danh sách chồng lên nhau thì không thể gói
   vào một màn — trả về chiều cao tự nhiên, ảnh lại theo 16:9. */
@container app (max-width:1023px){
  .v6-glass--info{height:auto}
  .v6-st-img{flex:none;aspect-ratio:16/9;min-height:0}
  .v6-st-list>li{flex:none}
  .v6-st-line img{height:auto;max-height:none;aspect-ratio:16/10}
}

/* ── ③ SỰ KIỆN: bốn thẻ 2 × 2 ────────────────────────────────────────────── */
.v6-ev{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2cqi,16px)}
.v6-ev:has(>li:only-child){grid-template-columns:minmax(0,1fr)}
.v6-ev-card{height:100%;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--v6-black);
  color:var(--white);text-decoration:none;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:translate .4s var(--ease-bounce)}
.v6-ev-card:hover{translate:0 -5px}
.v6-ev-img{display:block;aspect-ratio:16/8;overflow:hidden}
.v6-ev-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-img) var(--ease-in)}
.v6-ev-card:hover .v6-ev-img img{transform:scale(1.05)}
.v6-ev-card--past .v6-ev-img img{opacity:.55;filter:grayscale(.6)}
.v6-ev-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.v6-ev-st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--v6-blue)}
.v6-ev-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.v6-ev-st--active{color:var(--v6-leaf)}
.v6-ev-st--past{color:var(--v6-gray)}
.v6-ev-body b{font-size:clamp(13px,1.05cqi,15px);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v6-ev-last{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.v6-ev-last small{font-size:11.5px;color:var(--v6-gray);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── ④ SẢN PHẨM VÀ DỊCH VỤ: BĂNG THẺ TRƯỢT (19/09 lượt 4) ─────────────────
   Mẫu: "Danh sách diễn đàn" của innovation.gov.vn. Lý do + ⚑: comment khối
   trong index.html. Tấm kính 2 hàng: tiêu đề trên (dùng lại
   .v6-st-head), băng thẻ dưới. Chữ trắng / Fog trên --v6-bg (≥ 10 : 1).  */
.v6-glass--sl{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;
  row-gap:clamp(12px,1.6cqi,22px);padding:clamp(14px,2cqi,28px)}
.v6-sl{position:relative;min-height:0;display:flex;flex-direction:column;gap:14px;padding-inline:clamp(0px,1cqi,12px)}
/* Tắt JS: băng cuộn ngang tay được, đủ sáu thẻ. Có JS: ẩn thanh cuộn, trượt
   bằng transform. */
.v6-sl-of{flex:1;min-height:0;border-radius:26px;overflow-x:auto;scroll-snap-type:x proximity}
.v6-sl--js .v6-sl-of{overflow:hidden}
.v6-sl-rail{--g:clamp(12px,1.4cqi,20px);list-style:none;margin:0;padding:0;height:100%;display:flex;gap:var(--g);will-change:transform}
/* Hai thẻ đủ + ló một phần thẻ thứ ba — gợi "còn nữa, trượt tiếp". */
.v6-sl-rail>li{flex:0 0 calc((100% - 2 * var(--g)) / 2.22);min-width:0;display:flex;scroll-snap-align:start}
/* THẺ SẢN PHẨM / DỊCH VỤ — dựng lại 19/09 theo bảng đối chiếu trường nhập
   (comment khối ④ trong index.html). Nửa CHỮ | nửa HÌNH.
   Thứ tự trong nửa chữ = thứ tự người đọc cần: LOẠI + NHÓM (đây là gì) →
   TÊN → MÔ TẢ (làm gì, cho ai) → ƯU ĐÃI (vì sao nên hỏi ngay) → NGƯỜI
   ĐĂNG (hỏi ai) → hai nút.
   Chữ trên nền thẻ --v6-bg: trắng 18.9 : 1; trắng .78 vẫn ≥ 11 : 1.   */
/* 19/09 lượt 2: ẢNH TRÁI hẹp | CHỮ PHẢI. Ảnh là cột cố định 30% (150–210px),
   cao ĐÚNG BẰNG phần chữ (grid stretch) — không còn mảng ảnh to trống.  */
.v6-sl-card{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:clamp(150px,30%,210px) minmax(0,1fr);
  border-radius:24px;overflow:hidden;background:var(--v6-bg);color:var(--white)}
.v6-sl-text{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;
  padding:clamp(16px,1.5cqi,22px) clamp(16px,1.6cqi,24px)}
.v6-sl-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Loại: nền trắng chữ đen (15 : 1) + chấm màu của thẻ — màu chỉ là lớp
   thứ hai, người mù màu vẫn đọc được chữ. */
.v6-sl-type{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:999px;
  background:var(--white);color:var(--v6-black);font-size:12.5px;font-weight:700;line-height:1.35}
.v6-sl-type::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.v6-sl-group{padding:3px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.4);font-size:12.5px;font-weight:600;line-height:1.35}
.v6-sl-name{margin:0;font-family:'Montserrat',var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(15px,1.05cqi,18px);line-height:1.22;color:var(--white);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v6-sl-name a{color:inherit;text-decoration:none}
/* Liên kết tiêu đề PHỦ KÍN thẻ — bấm đâu trên thẻ cũng mở chi tiết. */
.v6-sl-name a::after{content:"";position:absolute;inset:0;z-index:1}
.v6-sl-name a:focus-visible{outline:none}
.v6-sl-name a:focus-visible::after{outline:3px solid var(--white);outline-offset:-3px;border-radius:24px}
.v6-sl-open{font-size:14px;line-height:1.5;color:rgba(255,255,255,.86);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Ưu đãi: ô nhấn bám vạch màu của thẻ — lý do để liên hệ NGAY. */
.v6-sl-pri{align-self:stretch;display:flex;flex-direction:column;gap:1px;padding:7px 12px;border-radius:12px;
  border-left:3px solid var(--c);background:rgba(255,255,255,.07);font-size:14px;line-height:1.4;font-weight:600}
.v6-sl-pri small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
/* Người đăng: CÁ NHÂN trước, doanh nghiệp sau (biên bản 18/09). */
/* Hàng đáy: người đăng TRÁI, hai nút PHẢI — một hàng thay vì hai, thẻ bớt
   ~50px. Hẹp quá thì nút tự xuống dòng (flex-wrap). */
.v6-sl-last{align-self:stretch;margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 12px}
.v6-sl-ai{flex:1 1 180px;display:flex;align-items:center;gap:10px;min-width:0}
.v6-sl-ai .avatar{--c:34px;flex:0 0 34px;font-size:12px;font-weight:700;color:var(--v6-black)}
.v6-sl-ai>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.v6-sl-ai b{font-size:14px}
.v6-sl-ai small{font-size:12.5px;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Hai nút nằm TRÊN lớp phủ của tiêu đề (z-index 2) — bấm riêng được. */
.v6-sl-btn-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px}
.v6-sl-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.75);color:var(--white);font-size:14px;font-weight:600;text-decoration:none;
  transition:background-color .25s,color .25s,border-color .25s}
.v6-sl-btn:hover{background:rgba(255,255,255,.12)}
.v6-sl-btn--solid{background:var(--white);border-color:var(--white);color:var(--v6-black)}
.v6-sl-btn--solid:hover{background:var(--v6-light)}
.v6-sl-btn i{font-style:normal;transition:translate .3s var(--ease-bounce)}
.v6-sl-card:hover .v6-sl-btn--solid i{translate:4px 0}
.v6-sl-btn:focus-visible{outline:3px solid var(--white);outline-offset:2px}
/* Nửa hình: mảng màu + vòng đồng tâm + BIỂU TƯỢNG NHÓM trong ô kính.
   ⚑ Chỗ của ảnh bìa (trường tuỳ chọn của form Viết bài). Có ảnh thì ảnh
   phủ kín nửa này; không có thì hiện đúng trạng thái đang thấy. */
.v6-sl-pic{grid-column:1;grid-row:1;position:relative;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 68% 30%,color-mix(in srgb,var(--c) 75%,var(--white)) 0%,var(--c) 38%,
    color-mix(in srgb,var(--c) 35%,var(--v6-bg)) 100%)}
.v6-sl-pic::before{content:"";position:absolute;inset:-20%;
  background:repeating-radial-gradient(circle at 60% 45%,transparent 0 34px,rgba(255,255,255,.12) 35px 36px);
  transition:scale 1.2s var(--ease-btn)}
.v6-sl-pic span{position:relative;z-index:1;width:clamp(60px,42%,88px);aspect-ratio:1;border-radius:28%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.45);color:var(--white);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.45);transition:scale .6s var(--ease-bounce),rotate .6s var(--ease-bounce)}
.v6-sl-pic svg{width:52%;height:52%}
.v6-sl-card:hover .v6-sl-pic::before{scale:1.12}
.v6-sl-card:hover .v6-sl-pic span{scale:1.06;rotate:-6deg}

/* Nút ‹ › tròn trắng đè hai mép băng — như mẫu. */
.v6-sl-arrow{position:absolute;z-index:2;top:calc(50% - 40px);width:52px;height:52px;border:0;border-radius:50%;
  display:grid;place-items:center;background:var(--white);color:var(--v6-black);box-shadow:0 12px 28px -10px rgba(0,0,0,.6);
  transition:scale .3s var(--ease-bounce)}
.v6-sl-arrow:hover{scale:1.08}
.v6-sl-arrow svg{width:20px;height:20px}
.v6-sl-arrow--prev{left:-8px}
.v6-sl-arrow--after{right:-8px}
.v6-sl-dot{display:flex;justify-content:center;gap:2px}
.v6-sl-dot button{min-width:24px;height:24px;padding:0 4px;border:0;background:none;display:grid;place-items:center}
.v6-sl-dot button::before{content:"";width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.45);
  transition:width .35s var(--ease-btn),background-color .35s}
.v6-sl-dot button[aria-current="true"]::before{width:30px;background:var(--white)}
/* Không JS hoặc ít hơn ba thẻ: không trượt → bỏ nút và chấm. */
.v6-sl:not(.v6-sl--js) .v6-sl-arrow,.v6-sl:not(.v6-sl--js) .v6-sl-dot{display:none}
/* Chấm bấm nhảy thẳng tới thẻ xa: mờ nhanh rồi hiện lại, không trượt dài. */
.v6-sl-rail.v6-sl-blink{animation:v6-sl-blink .45s var(--ease-btn)}
@keyframes v6-sl-blink{from{opacity:.2}to{opacity:1}}

@container app (max-width:1023px){.v6-sl-rail>li{flex-basis:calc((100% - var(--g)) / 1.25)}}
@container app (max-width:679px){
  .v6-sl-rail>li{flex-basis:88%}
  .v6-sl-card{grid-template-columns:minmax(0,1fr);grid-template-rows:96px auto}
  .v6-sl-pic{grid-column:1;grid-row:1}
  .v6-sl-text{grid-column:1;grid-row:2}
  .v6-sl-arrow{display:none}
  .v6-sl-btn-row .v6-sl-btn{flex:1 1 auto;justify-content:center;padding-block:12px}   /* ngón tay: ≥ 44px */
}


/* ── ⑤ NHU CẦU: thanh kênh + bong bóng chat rời ─────────────────────────── */
.v6-chat{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:clamp(12px,1.6cqi,22px);align-items:start}
.v6-chat-channel{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-radius:16px;background:var(--v6-black);font-size:13.5px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.7)}
.v6-chat-channel b{padding:0 8px 10px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.v6-chat-channel span{padding:6px 8px;border-radius:6px;color:var(--v6-gray)}
.v6-chat-channel span.active{background:var(--v6-charcoal);color:var(--white)}
.v6-chat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v6-chat-bubble{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 14px;border-radius:18px;background:var(--v6-black);
  box-shadow:0 16px 32px -14px rgba(0,0,0,.7)}
.v6-chat-bubble:nth-child(even){margin-left:clamp(0px,2cqi,28px)}
.v6-chat-bubble .avatar{--c:34px;font-size:11.5px}
.v6-chat-bubble>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.v6-chat-ai{font-size:11.5px;color:var(--v6-gray)}
.v6-chat-ai b{font-size:13px;color:var(--white);margin-right:4px}
.v6-chat-label{display:flex;gap:6px}
.v6-chat-label i{font-style:normal;padding:1px 7px;border-radius:4px;background:var(--v6-gray-dark);font-size:11px;font-weight:600}
.v6-chat-bubble h3{font-size:clamp(13px,1.05cqi,14.5px);line-height:1.3;font-weight:700;color:var(--white)}
/* Mô tả cắt ở 2 dòng bất kể dài ngắn (biên bản 18/09). */
.v6-chat-open{font-size:12px;line-height:1.45;color:var(--v6-mist);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v6-chat-bubble .btn{margin-top:4px}

/* ── ⑥ THÀNH VIÊN: danh sách kiểu Discord ────────────────────────────────── */
.v6-mem{padding:12px;border-radius:20px;background:var(--v6-black);box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.v6-mem-head{padding:4px 10px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v6-gray)}
.v6-mem-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.v6-mem-line{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 10px;border-radius:10px;
  color:var(--white);text-decoration:none;transition:background-color var(--dur-layer)}
.v6-mem-line:hover{background:var(--v6-charcoal)}
.v6-mem-line .avatar{--c:36px;font-size:12px;box-shadow:0 0 0 2px var(--v6-black),0 0 0 4px var(--color)}
.v6-mem-line>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.v6-mem-line b{font-size:14px;line-height:1.3}
.v6-mem-line small{font-size:12px;color:var(--v6-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-mem-facts{display:flex;gap:4px}
.v6-mem-facts i{font-style:normal;padding:2px 7px;border-radius:4px;background:var(--v6-charcoal);font-size:11px}



/* ══ CHÂN TRANG — Discord: nền đen, tiêu đề cột trắng 70%, liên kết trắng ═ */
.v6 .foot{background:var(--v6-void);color:var(--white);font-size:16px}
.v6 .foot h4,.v6 .foot h2{color:rgba(255,255,255,.7);font-size:16px;font-weight:500}
.v6 .foot a{color:var(--white)}
.v6 .foot a:hover{text-decoration:underline}
.v6 .foot-bottom{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.v6 .foot-bottom a{color:rgba(255,255,255,.8)}
.v6 .foot .foot-social-link{border-color:rgba(255,255,255,.35)}

/* ══ CHUYỂN ĐỘNG THEO CUỘN (CSS scroll-driven) ════════════════════════════
   Tấm kính phóng nhẹ vào; thẻ trong ô ảnh chụp lần lượt nổi lên; bong bóng
   chat trượt vào từ phải như tin mới tới. Dùng scale/translate/opacity trên
   li — thẻ a bên trong giữ translate cho hiệu ứng rê chuột.
   Trình duyệt chưa hỗ trợ: đứng yên, hiện đủ. prefers-reduced-motion:
   _common.css tắt hẳn mọi animation (§5C).                                */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .v6-ev>li,.v6-chat-bubble,.v6-st-list>li,.v6-mem-list>li{
      animation:linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .v6-ev>li,.v6-mem-list>li{animation-name:v6-small-up}
    .v6-chat-bubble,.v6-st-list>li{animation-name:v6-self-right}
    @keyframes v6-room{from{scale:.93}to{scale:1}}
    @keyframes v6-small-up{from{translate:0 40px;opacity:0}to{translate:0 0;opacity:1}}
    @keyframes v6-self-right{from{translate:60px 0;opacity:0}to{translate:0 0;opacity:1}}
  }
}

/* ══ ĐIỂM NGẮT (theo .app, không theo cửa sổ) ════════════════════════════ */
@container app (max-width:1023px){
  .v6-head>.container{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:center}
  .v6-illus{justify-self:center;max-width:560px}
  .v6-glass,.v6-glass--flip{grid-template-columns:minmax(0,1fr);padding:clamp(14px,2.4cqi,24px)}
  .v6-glass-text{order:-1;max-width:none;padding:16px 12px 4px}
  .v6-place-obj{display:none}
  .v6-glass--info{grid-template-columns:minmax(0,1fr)}
  .v6-st-head{padding:12px 12px 0}
  .v6-st-list{padding:0}
}
@container app (max-width:679px){
  .v6-illus{display:none}
  .v6-row-btn .btn{flex:1 1 100%}
  .v6-chat{grid-template-columns:minmax(0,1fr)}
  .v6-chat-channel{display:none}
  .v6-chat-bubble:nth-child(even){margin-left:0}
  .v6-mem-facts{display:none}
  .v6-scene-img{min-height:0}
  .v6-st-line{grid-template-columns:104px minmax(0,1fr)}
}
@container app (max-width:559px){
  .v6-ev{grid-template-columns:minmax(0,1fr)}
  .v6-search .btn{padding-inline:12px}
}
@container app (max-width:399px){
}

/* ══ MỖI KHỐI VỪA ĐÚNG MỘT MÀN HÌNH + HIỆU ỨNG ĐẨY KHI CHUYỂN KHỐI (19/09) ══
   Người dùng: "độ cao để fit view 1 page… các session khác cũng rà soát,
   sửa tương tự… khi chuyển các session bổ sung thêm hiệu ứng đẩy nhẹ".
   Áp cho MỌI tấm kính (Tin tức đã làm ở trên, đây gom luật chung).
   · Chỉ khi chia hai cột (≥ 1024) — xếp dọc thì không gói nổi vào một màn.
   · Tấm kính cao = khung nhìn − thanh điều hướng (65px) − khoảng thở; ô ảnh
     chụp cao đúng bằng tấm, nội dung bên trong co theo CHIỀU CAO:
       sự kiện 2 × 2 và dịch vụ 3 × 2 chia đều hàng, ảnh thẻ co giãn;
       nhu cầu: bong bóng xếp 2 × 2 (một cột bốn bong bóng không gói nổi
       ở màn laptop); thanh kênh chỉ hiện khi ô đủ rộng.
   · scroll-snap-align:start — khối dừng khít dưới thanh điều hướng
     (_common.css đã bật scroll-snap PROXIMITY, không mandatory — §5C).
   · Luật này là của trang chủ: lớp .v6-block chỉ có ở index.html, không
     dính bẫy .block dùng chung (CLAUDE.md §8).                              */
@container app (min-width:1024px){
  /* 19/09 lượt 2: "các session để quá cỡ, ko cân đối, cần nhỏ hơn" — tấm
     kính trước đây ăn gần trọn màn, sát thanh menu và sát đáy. Nay: khối
     vẫn chiếm đúng một màn (dừng khít khi cuộn), nhưng tấm kính nhỏ hơn
     ~16% chiều cao, rộng tối đa 1360px và ĐẶT GIỮA — quanh tấm luôn có
     khoảng nền thở đều bốn phía. Flex → .container BẮT BUỘC width:100% (§8). */
  .v6-block:has(>.container>.v6-glass){min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);
    display:flex;align-items:center;padding-block:clamp(16px,3vh,40px);scroll-snap-align:start;scroll-margin-top:65px}
  .v6-block:has(>.container>.v6-glass)>.container{width:100%}
  .v6-glass{max-width:1360px;height:clamp(420px,calc(100vh - 65px - clamp(72px,16vh,190px)),820px);
    height:clamp(420px,calc(100svh - 65px - clamp(72px,16vh,190px)),820px);align-items:stretch}
  .v6-h2{font-size:clamp(24px,2.05cqi,34px)}
  .v6-glass-large{font-size:clamp(17px,1.35cqi,20px)}
  .v6-glass-hint{font-size:clamp(15px,1.2cqi,18px)}
  .v6-glass>.v6-glass-text{align-self:center}
  .v6-glass>.v6-scene-img{min-height:0;height:100%}

  /* ③ Sự kiện: hai hàng chia đều, ảnh thẻ lấp phần còn lại. */
  .v6-scene-img--search{justify-content:stretch}
  .v6-ev{height:100%;grid-template-rows:repeat(2,minmax(0,1fr))}
  .v6-ev:has(>li:only-child){grid-template-rows:minmax(0,1fr)}
  .v6-ev>li{min-height:0}
  .v6-ev-card{min-height:0}
  .v6-ev-img{flex:1 1 auto;min-height:48px;aspect-ratio:auto}

  /* ④ Sản phẩm, dịch vụ: băng thẻ lấp đầy phần dưới tấm kính. */
  /* ⑤ Nhu cầu: bong bóng 2 × 2, thanh kênh ẩn trừ khi ô rộng. */
  .v6-scene-img--screen{justify-content:center}
  .v6-chat{grid-template-columns:minmax(0,1fr)}
  .v6-chat-channel{display:none}
  .v6-chat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .v6-chat-bubble:nth-child(even){margin-left:0;margin-top:clamp(0px,3vh,28px)}
}
@container app (min-width:1600px){
  .v6-chat{grid-template-columns:minmax(0,26%) minmax(0,1fr)}
  .v6-chat-channel{display:flex}
}
/* Màn thấp: bớt dòng phụ để nội dung trong ô ảnh chụp không tràn. */
/* Tấm kính nhỏ lại (19/09) nên ngưỡng bớt dòng phụ nâng lên theo. */
@media (max-height:900px){
  .v6-chat-open{display:none}
  .v6-st-type{display:none}
}
@media (max-height:820px){
  .v6-chat-label{display:none}
}
@media (max-height:700px){
  .v6-chat-open,.v6-chat-label{display:none}
  .v6-ev-last small{display:none}
  .v6-mem-line{padding-block:4px}
}
@media (max-height:660px){
  .v6-st-slide small{display:none}
  .v6-st-img{min-height:90px}
  .v6-ev-body{gap:4px;padding:8px 10px 10px}
  .v6-ev-body b{-webkit-line-clamp:1}
  .v6-ev-img{min-height:36px}
  .v6-mem-head{display:none}
  .v6-mem-line small{display:none}
  .v6-mem-line .avatar{--c:28px}
  .v6-chat-bubble{padding:8px 10px;gap:8px}
  .v6-chat-bubble h3{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .v6-chat-bubble .btn{padding:4px 10px;margin-top:0}
  .v6-chat-bubble:nth-child(even){margin-top:0}
}

/* Hiệu ứng khi chuyển khối: xem "(2) Hiệu ứng ĐẨY LÊN" ở cuối file. */

/* ══ 19/09 LƯỢT 5 ═════════════════════════════════════════════════════════
   (1) cụm minh hoạ "sống" ở màn đầu · (2) hiệu ứng ĐẨY LÊN khi cuộn tới khối
   · (3) băng Sản phẩm & dịch vụ trượt TRÀN NGANG thân trang · (4) tooltip
   hồ sơ tóm tắt ở khối Thành viên · (5) popup "Danh bạ…" theo tông trang. */

/* ── (1) Cụm minh hoạ "sống" (19/09 lượt 6) ──────────────────────────────
   Nhân vật hoạt hình đã BỎ (người dùng: "trông buồn cười quá… thêm hiệu ứng
   chỗ ảnh sao cho hấp dẫn hơn là được"). Chuyển động dồn vào chính màn hình:
     · viền sáng tím → hồng → xanh CHẠY VÒNG quanh màn (conic xoay bằng
       @property — trình duyệt chưa hỗ trợ thì viền đứng yên, vẫn đẹp);
     · tin nhắn LẦN LƯỢT HIỆN trong mặt chat rồi lặp — như đang trò chuyện;
     · vệt sáng LƯỚT qua mặt kính, 7 giây một lần;
     · nút "Đăng ký" nhịp sáng; điện thoại có chấm thông báo;
     · hạt sáng li ti bay lên phía sau cụm.
   Tắt hẳn khi prefers-reduced-motion (_common.css) — khi đó mọi tin nhắn
   hiện đủ (trạng thái đầu của hoạt ảnh không bị giữ lại). */
@property --v6-corner{syntax:'<angle>';inherits:false;initial-value:0deg}
.v6-mh::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:22px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--v6-corner),var(--v6-blurple),var(--v6-fuchsia),var(--v6-blue),var(--v6-blurple));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:v6-border-rotate 6s linear infinite}
@keyframes v6-border-rotate{to{--v6-corner:360deg}}
/* Quầng màu mờ theo viền — cho màn "phát sáng" nhẹ, không loá (§5). */
.v6-mh{box-shadow:0 0 60px -10px color-mix(in srgb,var(--v6-blurple) 55%,transparent),0 50px 90px -30px rgba(0,0,0,.8)}

/* Vệt sáng lướt qua mặt kính. */
.v6-app{position:relative}
.v6-app::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%) no-repeat;
  background-size:260% 100%;background-position:130% 0;animation:v6-hits 7s ease-in-out 1.5s infinite}
@keyframes v6-hits{0%{background-position:130% 0}35%,100%{background-position:-30% 0}}

/* Tin nhắn lần lượt hiện — vòng 10 giây. */
@media (prefers-reduced-motion:no-preference){
}
@keyframes v6-info-black{0%{opacity:0;translate:0 14px}6%,86%{opacity:1;translate:0 0}94%,100%{opacity:0;translate:0 -6px}}

/* Nút "Đăng ký" trong thẻ sự kiện nhịp sáng. */
.v6-app-stick span{animation:v6-btn-pulse 2.4s ease-in-out infinite}
@keyframes v6-btn-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--v6-blurple) 60%,transparent)}
  50%{box-shadow:0 0 0 6px transparent}}

/* Chấm thông báo trên điện thoại. */
.v6-spn{position:relative}
.v6-spn::after{content:"";position:absolute;right:14px;top:12px;width:12px;height:12px;border-radius:50%;
  background:var(--v6-red);box-shadow:0 0 0 3px var(--v6-black);animation:v6-dot-alert 1.8s ease-in-out infinite}
@keyframes v6-dot-alert{0%,100%{scale:1}50%{scale:1.3}}

/* Hạt sáng bay lên phía sau cụm. */
.v6-particle{position:absolute;z-index:-1;bottom:8%;width:var(--k,6px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:var(--color,var(--white));box-shadow:0 0 10px var(--color,var(--white));opacity:0;
  animation:v6-particle-fly var(--dur,7s) ease-in var(--delay,0s) infinite}
@keyframes v6-particle-fly{0%{opacity:0;translate:0 0}15%{opacity:.9}100%{opacity:0;translate:var(--x,0px) -340px}}

/* Ô nhắn tin trống dưới cùng mặt chat — lấp khoảng trống. */
.v6-app-fld{margin-top:auto;height:30px;border-radius:8px;background:var(--v6-black)}

/* ── (2) Hiệu ứng ĐẨY LÊN khi cuộn tới khối ───────────────────────────────
   Người dùng: "khi scroll… thêm hiệu ứng đẩy lên, cho cảm giác load session
   nhưng nhẹ nhàng, dễ tiếp nhận". Bản trước buộc theo vị trí cuộn (scroll-
   driven) nên chuyển động giật theo tay cuộn. Nay chạy theo THỜI GIAN khi
   khối vào khung nhìn: tấm kính trượt lên 70px + phóng từ 94% trong 1.2s
   với đường cong êm (ease-out-expo), rồi các phần bên trong lần lượt nổi
   lên cách nhau 0.12s.
   Kích hoạt bằng lớp .rise → .shown mà _shell.js đã gắn cho mọi khối — ba chốt
   an toàn của §5C giữ nguyên: chỉ ẩn khi JS đã chạy (.fx), tắt hẳn khi
   prefers-reduced-motion, đầu trang không hiện dần. */
@media (prefers-reduced-motion:no-preference){
  .fx .v6-glass.rise{translate:0 70px;scale:.94;
    transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),
      translate 1.2s cubic-bezier(.16,1,.3,1),scale 1.2s cubic-bezier(.16,1,.3,1)}
  .fx .v6-glass.rise.shown{translate:0 0;scale:1}
  .fx .v6-glass.rise>:not(.v6-place-obj){opacity:0;translate:0 26px;
    transition:opacity .9s ease,translate 1.1s cubic-bezier(.16,1,.3,1)}
  .fx .v6-glass.rise.shown>:not(.v6-place-obj){opacity:1;translate:0 0}
  .fx .v6-glass.rise.shown>:nth-child(2){transition-delay:.12s}
  .fx .v6-glass.rise.shown>:nth-child(3){transition-delay:.24s}
  .fx .v6-glass.rise.shown>:nth-child(4){transition-delay:.36s}
  /* 3D (19/09): tấm kính LẬT LÊN từ nằm nghiêng 14° quanh mép dưới khi vào
     khung — thêm chiều sâu cho cú "đẩy lên" vốn có. Dùng thuộc tính rotate
     riêng (không đụng transform — transform để dành cho nghiêng theo chuột). */
  .fx .v6-glass.rise{rotate:x 14deg;transform-origin:50% 100%}
  .fx .v6-glass.rise.shown{rotate:x 0deg;transition:opacity 1s cubic-bezier(.16,1,.3,1),translate 1.2s cubic-bezier(.16,1,.3,1),
    scale 1.2s cubic-bezier(.16,1,.3,1),rotate 1.3s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.2,.8,.2,1)}
}

/* ── (3) Băng Sản phẩm & dịch vụ TRÀN NGANG thân trang ────────────────────
   Người dùng: "bỏ theme bên ngoài cho đỡ bó… cho trượt full body từ phải
   sang trái giống bên Innovation". Bỏ tấm kính; tiêu đề vẫn trong khung
   (thẳng mép với các khối khác), băng thẻ chạy từ mép khung bên trái ra
   TỚI mép phải màn hình.
   ⚑ Đi ngược luật "không dựng khối tràn mép" (CLAUDE.md §4 — KH bác dải
   chạy tràn mép phải 16/09) theo yêu cầu người dùng — CẦN KH GẬT.
   Khối vẫn cao đúng một màn và dừng khít khi cuộn. */
.v6-block--sl{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,4vh,48px);
  padding-block:clamp(20px,4vh,56px);overflow:hidden;
  --gutter:max(clamp(20px,2.6vw,44px),calc((100% - 1760px) / 2 + clamp(20px,2.6vw,44px)))}
.v6-block--sl>.container{width:100%}
.v6-block--sl .v6-st-head{padding:0}
/* Đầu khối: chữ trái (tiêu đề + mô tả, như tấm kính) | nút phải. */
.v6-sl-head{align-items:flex-end}
/* Chữ đầu khối ăn HẾT phần ngang còn lại (flex:1) — trước bó 62ch nên tiêu
   đề bị gãy hai dòng, bên phải trống một mảng (người dùng bắt 19/09). Chỉ
   ĐOẠN MÔ TẢ giữ bề rộng đọc thoải mái (≤ 88ch). */
.v6-sl-head-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.v6-sl-head-text .v6-h2{text-wrap:wrap}
.v6-sl-head-text .v6-glass-open{max-width:88ch}
.v6-block--sl .v6-sl{padding:0;gap:18px}
.v6-block--sl .v6-sl-of{border-radius:0;scroll-padding-left:var(--gutter)}   /* §8: đệm trái + scroll-snap */
.v6-block--sl .v6-sl-rail{--g:clamp(14px,1.4cqi,24px);padding-left:var(--gutter)}
/* Thẻ ~2,6 tấm một màn ở 1440, ~3,2 ở 1920 — đủ thấy "còn nữa, trượt tiếp". */
.v6-block--sl .v6-sl-rail>li{flex:0 0 clamp(460px,36cqi,620px)}
/* ≥ 1024: KHỐI cao đúng một màn như các tấm kính; nội dung CĂN GIỮA theo
   chiều dọc. Thẻ vẫn cao THEO NỘI DUNG (không kéo giãn — bị chê "to, lố,
   trống" lượt trước), nhưng chữ và đệm trong thẻ nở theo chiều cao màn
   (vh) nên màn cao thì thẻ cao tương xứng, mô tả hiện nhiều dòng hơn. */
@container app (min-width:1024px){
  .v6-block--sl{height:calc(100vh - 65px);height:calc(100svh - 65px);scroll-snap-align:start;scroll-margin-top:65px}
  /* Cỡ chữ, đệm, khoảng cách nở THEO CHIỀU CAO MÀN (vh): màn cao thì thẻ
     cao lên bằng chính nội dung (chữ to hơn, mô tả nhiều dòng hơn) — không
     bằng khoảng trống. Mốc: 1440×900 thẻ ≈ 470px, khối lấp ~ 85% màn. */
  .v6-block--sl{gap:clamp(18px,4.2vh,52px)}
  .v6-block--sl .v6-sl-rail>li{flex-basis:clamp(480px,38cqi,660px)}
  .v6-block--sl .v6-sl-text{gap:clamp(8px,1.8vh,18px);padding:clamp(16px,3.4vh,38px) clamp(18px,2cqi,32px)}
  .v6-block--sl .v6-sl-label span{font-size:clamp(12px,1.5vh,14px)}
  .v6-block--sl .v6-sl-name{font-size:clamp(15px,min(1.4cqi,2.6vh),24px)}
  .v6-block--sl .v6-sl-open{font-size:clamp(14px,1.9vh,17px);line-height:1.6}
  .v6-block--sl .v6-sl-pri{font-size:clamp(13.5px,1.7vh,15.5px);padding:clamp(7px,1.2vh,12px) 14px}
  .v6-block--sl .v6-sl-ai b{font-size:clamp(14px,1.7vh,15.5px)}
  .v6-block--sl .v6-sl-btn{font-size:clamp(14px,1.6vh,15px);padding:clamp(8px,1.2vh,11px) clamp(14px,1.8vh,18px)}
  .v6-block--sl .v6-sl-pic span{width:clamp(60px,9vh,104px)}
}
@media (min-height:860px){.v6-block--sl .v6-sl-open{-webkit-line-clamp:4}}
@media (min-height:1000px){.v6-block--sl .v6-sl-open{-webkit-line-clamp:5}}
@media (max-height:760px){.v6-block--sl .v6-sl-open{-webkit-line-clamp:2}}
@media (max-height:680px){.v6-sl-head .v6-glass-open{display:none}}   /* màn thấp: khối vẫn vừa một màn */
@container app (max-width:1023px){.v6-block--sl .v6-sl-rail>li{flex-basis:min(78cqi,560px)}}
@container app (max-width:679px){
  .v6-block--sl .v6-sl-rail>li{flex-basis:86cqi}
}
/* Băng vào sân: trượt từ phải sang khi cuộn tới — nối tiếp hướng trượt. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .v6-block--sl .v6-sl-of{animation:v6-sl-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes v6-sl-in{from{translate:120px 0;opacity:0}to{translate:0 0;opacity:1}}
  }
}

/* ── (4) Tooltip hồ sơ tóm tắt — khối Thành viên mới ──────────────────────
   Rê chuột / Tab vào một thành viên → thẻ tóm tắt nổi bên phải: khoá · lĩnh
   vực · nơi, tên, chức danh · doanh nghiệp, và những gì người đó ĐANG CUNG
   CẤP / ĐANG TÌM trên trang (lấy từ bài thật của chính họ ở khối Giải pháp
   và Nhu cầu hợp tác — không tự viết tiểu sử). Mẫu: tooltip nhà tài trợ của
   innovation.gov.vn. Chỉ trên máy có chuột, khổ ≥ 1024. */
/* Ô cảnh lá nổi trên cột chữ bên cạnh: mỗi con của tấm kính có translate
   (hiệu ứng đẩy) nên thành một lớp xếp chồng riêng — không nâng z-index thì
   cột chữ vẽ ĐÈ lên tooltip (lỗi người dùng chụp 19/09). */
.v6-scene-img--leaf{overflow:visible;position:relative;z-index:3}
.v6-mem-list>li{position:relative}
/* Hiện NGAY TRÊN dòng được rê (người dùng 19/09), mũi nhọn chỉ xuống. */
.v6-mem-card{position:absolute;z-index:30;left:44px;bottom:calc(100% + 10px);top:auto;width:min(380px,92%);
  display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;
  background:var(--v6-night);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  color:var(--white);text-align:left;pointer-events:none;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity .25s var(--ease-btn),transform .3s var(--ease-btn),visibility .25s}
.v6-mem-card::before{content:"";position:absolute;top:100%;left:22px;
  border:8px solid transparent;border-top-color:var(--v6-night)}
.v6-mem-line:hover .v6-mem-card,.v6-mem-line:focus-visible .v6-mem-card{opacity:1;visibility:visible;transform:translateY(0)}
/* Dòng đang rê nổi lên trên các dòng khác để tooltip không bị dòng dưới đè. */
.v6-mem-list>li:hover,.v6-mem-list>li:focus-within{z-index:5}
/* Nửa trên danh sách: tooltip hiện BÊN DƯỚI dòng (mũi nhọn chỉ lên) —
   hiện bên trên thì dòng đầu đẩy tooltip lên chạm thanh menu. */
.v6-mem-list>li:nth-child(-n+3) .v6-mem-card{bottom:auto;top:calc(100% + 10px);transform:translateY(-8px)}
.v6-mem-list>li:nth-child(-n+3) .v6-mem-card::before{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--v6-night)}
.v6-mem-list>li:nth-child(-n+3) .v6-mem-line:hover .v6-mem-card,
.v6-mem-list>li:nth-child(-n+3) .v6-mem-line:focus-visible .v6-mem-card{transform:translateY(0)}
.v6-mem-card-about{margin-top:4px;font-size:14px;line-height:1.55;color:var(--white)}
.v6-mem-card-kicker{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--v6-orange)}   /* cam trên đêm ≈ 10 */
.v6-mem-card b{font-size:17px;line-height:1.3}
.v6-mem-card-tix{font-size:13.5px;color:var(--v6-mist)}
.v6-mem-card-line{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px;line-height:1.45}
.v6-mem-card-line i{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v6-leaf)}
.v6-mem-card-view{margin-top:8px;font-size:13px;font-weight:600;color:var(--v6-blurple-pale)}
@container app (max-width:1023px){.v6-mem-card{display:none}}
@media (hover:none){.v6-mem-card{display:none}}

/* Hộp "Cần đăng nhập": kiểu chung ở _common.css (.dialog--access). Bản tím
   toàn khối riêng của trang chủ đã gỡ 19/09 — "trông đau mắt". */

/* ── Ô tìm kiếm: rộng hơn; khổ hẹp không đủ chỗ thì chữ gợi ý kết "…" ──── */
.v6-search{max-width:660px}
.v6-search input{text-overflow:ellipsis;font-size:15px}
.v6-search input::placeholder{text-overflow:ellipsis}

/* ── (5) HIỆU ỨNG 3D THEO CON TRỎ — tấm kính, thẻ sự kiện, thẻ sản phẩm ─────
   19/09 — người dùng: "page này cũng cân nhắc thêm hiệu ứng hay 3D… cho hấp
   dẫn hơn". Script cuối trang ghi transform nội tuyến (nghiêng quanh X/Y) và
   hai biến --gx/--gy cho VỆT SÁNG: một quầng trắng mờ .14 bám theo con trỏ
   trên mặt thẻ, như ánh đèn lướt trên mặt kính. Quầng mờ và nhỏ — KH nhạy
   "loá" (§5). Không dùng mix-blend-mode (bẫy §8).
   Chỉ máy có chuột; tắt chuyển động thì không có gì chạy.                 */
.v6-block>.container{perspective:1600px}
.v6-ev-card{position:relative}
.v6-loudspeaker{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 60%);
  transition:opacity .35s ease}
.v6-tilt:hover>.v6-loudspeaker{opacity:1}
@media (prefers-reduced-motion:reduce){.v6-loudspeaker{display:none}}

/* ══ NHÂN VẬT DOANH NHÂN QUANH MÀN HÌNH (19/09) ═══════════════════════════
   Người dùng: "để mấy nhân vật tương tự [Discord] nhưng đẹp chút, biểu tượng
   cho doanh nhân, kết nối". Hai người đứng hai phía màn hình cộng đồng:
   doanh nhân nam cầm máy tính bảng đang mở danh bạ, doanh nhân nữ vẫy chào —
   đọc ra "gặp nhau, kết nối qua nền tảng".
   Lần trước bị chê "buồn cười" (18/09) vì nhân vật tròn trịa có mặt mũi hoạt
   hình. Lần này theo lối minh hoạ doanh nghiệp: dáng người thon, KHÔNG vẽ mặt,
   com-lê / blazer, màu lấy đúng bộ token (không thêm màu da — đầu/tay dùng
   --v6-light như tượng sứ, tránh phải đặt mã màu mới ngoài danh sách §3).
   Trôi nhẹ 7 giây lệch pha; prefers-reduced-motion → đứng yên. aria-hidden
   theo khối minh hoạ. ⚑ Minh hoạ tạm do MOHA vẽ — thay bằng bộ minh hoạ
   chính thức nếu khách có.                                                  */
.v6-nv{position:absolute;z-index:4;pointer-events:none;height:auto;overflow:visible;
  animation:v6-nv-drift 7s ease-in-out infinite}
/* Đứng CẶP ở góc dưới trái màn hình, quay vào nhau — "gặp gỡ, kết nối".
   Chỉ che phần dưới cột kênh (không có chữ ở đó); tin nhắn bên phải không
   bị che (CLAUDE.md §8: phần mang chữ giữ nguyên vẹn). Người nữ lật ngang
   để tay vẫy hướng về người nam. */
.v6-nv--scene{left:-5%;bottom:0;width:34%;animation:none}
@keyframes v6-nv-drift{50%{translate:0 -7px}}
/* Lượt 3 (người dùng: "nhân vật bắt tay, vui mừng, hào hứng, thêm nhân vật
   cho đông vui"): MỘT cảnh ba người thay hai hình rời. Mặt chỉ là ba nét cười
   (mắt cong + miệng) — đủ đọc ra vui, không thành mặt hoạt hình.
   Nhịp: bắt tay lắc 3 cái rồi nghỉ · người sau nhảy nhẹ · pháo giấy bung
   theo nhịp bắt tay · quầng sáng ở bàn tay thở. Đứng trên phần dưới cột kênh
   (không có chữ ở đó) — không che tin nhắn. */
.v6-nv-shake{animation:v6-nv-shake 3.2s ease-in-out infinite}
@keyframes v6-nv-shake{0%,48%,100%{translate:0 0}8%{translate:0 4px}16%{translate:0 -3px}24%{translate:0 4px}32%{translate:0 -2px}40%{translate:0 2px}}
.v6-nv-blink{animation:v6-nv-blink 1.6s cubic-bezier(.3,0,.3,1) infinite}
@keyframes v6-nv-blink{0%,100%{translate:0 0}40%{translate:0 -9px}60%{translate:0 -9px}}
.v6-nv-halo{opacity:.35;transform-box:fill-box;transform-origin:center;animation:v6-nv-halo 3.2s ease-in-out infinite}
@keyframes v6-nv-halo{0%,100%{scale:.7;opacity:.15}20%{scale:1.25;opacity:.45}}
.v6-pg{opacity:0;transform-box:fill-box;transform-origin:center;animation:v6-pg 3.2s cubic-bezier(.2,.7,.4,1) infinite}
@keyframes v6-pg{0%{opacity:0;transform:translate(0,0) rotate(0)}6%{opacity:1}
  70%{opacity:1}100%{opacity:0;transform:translate(calc(var(--rsv) * 1px),calc(var(--dy) * 1px + 40px)) rotate(300deg)}}
@media (prefers-reduced-motion:reduce){.v6-nv,.v6-nv-shake,.v6-nv-blink,.v6-nv-halo{animation:none}.v6-pg{display:none}}
@container app (max-width:1023px){.v6-nv{display:none}}

/* ══ MÀN HÌNH MINH HOẠ "SỐNG" — kênh màu + bốn cảnh chat (19/09) ══════════
   Người dùng: "Layout chỗ máy tính, đừng để layout chết, luôn hiển thị
   content… Left menu cho màu sắc… thêm hiệu ứng". Trước đây tin nhắn ẩn rồi
   hiện lần lượt nên có lúc khung chat trống trơn.
   Nay: bốn kênh có biểu tượng + MÀU NHẬN DIỆN riêng (màu mang nghĩa phân
   loại nội dung, như màu chuyên mục — §3 cho phép quá hai sắc ở chỗ này),
   chấm báo tin mới nhịp nhẹ. Kênh đang mở tự chuyển 4s một lần, khung chat
   hiện đúng cảnh của kênh đó. Cảnh sau HIỆN RA TRƯỚC khi cảnh trước tắt nên
   không bao giờ trống. Chu kỳ 16s = 4 kênh × 4s; độ trễ âm để mỗi kênh/cảnh
   sáng đúng ô 4 giây của nó.
   prefers-reduced-motion: đứng yên ở kênh "sự-kiện", cảnh đầu. */
.v6-conn{position:relative;display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;
  color:var(--v6-gray);white-space:nowrap;min-width:0;animation:v6-conn-light 16s linear infinite}
.v6-conn>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.v6-conn i{flex:0 0 22px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--k) 22%,transparent);color:var(--k)}
.v6-conn i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v6-conn em{margin-left:auto;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--k);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 25%,transparent);animation:v6-conn-dot 2s ease-in-out infinite}
@keyframes v6-conn-dot{50%{scale:.6}}
@keyframes v6-conn-light{
  0%,23%{background:color-mix(in srgb,var(--k) 20%,var(--v6-charcoal));color:var(--white);box-shadow:inset 3px 0 0 var(--k)}
  25%,100%{background:transparent;color:var(--v6-gray);box-shadow:inset 0 0 0 transparent}}
.v6-conn:nth-of-type(2){animation-delay:-12s}
.v6-conn:nth-of-type(3){animation-delay:-8s}
.v6-conn:nth-of-type(4){animation-delay:-4s}
.v6-conn:nth-of-type(1) em{display:none}
.v6-app-pn{position:absolute;left:14px;right:14px;top:14px;bottom:58px;display:flex;flex-direction:column;gap:12px;
  opacity:0;animation:v6-pn 16s linear infinite}
@keyframes v6-pn{0%{opacity:0;translate:0 14px}3%,25%{opacity:1;translate:0 0}29%,100%{opacity:0;translate:0 -8px}}
.v6-app-pn:nth-of-type(2){animation-delay:-12s}
.v6-app-pn:nth-of-type(3){animation-delay:-8s}
.v6-app-pn:nth-of-type(4){animation-delay:-4s}
/* Cảnh 3 · THẺ NHU CẦU (19/09 lượt 3). Chữ trắng / nền --v6-black (giao diện
   ứng dụng tối — xám chỉ ở chữ phụ, §2B). Dải đầu xanh lá = màu kênh nhu cầu. */
.v6-app-need{margin-top:2px;max-width:310px;border-radius:10px;overflow:hidden;background:var(--v6-black);
  border:1px solid color-mix(in srgb,var(--v6-leaf) 30%,transparent);box-shadow:inset 3px 0 0 var(--v6-leaf)}
.v6-app-need-head{display:flex;align-items:center;gap:6px;padding:6px 10px;background:color-mix(in srgb,var(--v6-leaf) 16%,var(--v6-black))}
.v6-app-need-head i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--v6-leaf)}
.v6-app-need-head span{font-size:10px;padding:1px 7px;border-radius:5px;background:rgba(255,255,255,.1)}
.v6-app-need-head em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:5px;
  background:var(--v6-red);color:var(--white);animation:v6-dot-alert 1.8s ease-in-out infinite}
.v6-app-need-name{display:block;margin:0;padding:8px 10px 6px;font-size:12.5px;line-height:1.3}
.v6-app-need-st{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px}
.v6-app-need-st span{font-size:10px;padding:2px 7px;border-radius:5px;background:var(--v6-charcoal);color:rgba(255,255,255,.88)}
.v6-app-need-last{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-top:1px solid rgba(255,255,255,.06)}
.v6-app-need-ai{display:flex;flex:0 0 auto}
.v6-app-need-ai .avatar{--c:18px;width:18px;height:18px;flex:0 0 18px;font-size:7px;font-weight:700;color:var(--v6-black);box-shadow:0 0 0 1.5px var(--v6-black)}
.v6-app-need-ai .avatar+.avatar{margin-left:-5px}
.v6-app-need-last small{min-width:0;font-size:9.5px;color:var(--v6-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-app-need-btn{margin-left:auto;flex:0 0 auto;padding:3px 10px;border-radius:6px;background:var(--v6-blurple);font-size:10.5px;font-weight:600}
.v6-app-dk{display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:2px;padding:5px 10px;border-radius:8px;
  background:var(--v6-black);border:1px solid rgba(255,255,255,.08);font-size:10.5px}
/* Cảnh 4 · THẺ CHÀO MỪNG thành viên mới. */
.v6-app-sys{flex:0 0 32px;width:32px;height:32px}
.v6-app-sys img{width:32px;height:32px}
.v6-app-hello{margin-top:2px;max-width:320px;border-radius:10px;overflow:hidden;background:var(--v6-black);border:1px solid rgba(255,255,255,.06)}
.v6-app-hello-cover{margin:0;padding:6px 10px;font-size:11.5px;font-weight:700;
  background:linear-gradient(90deg,color-mix(in srgb,var(--v6-orange) 45%,var(--v6-black)),color-mix(in srgb,var(--v6-fuchsia) 40%,var(--v6-black)))}
.v6-app-mem{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
.v6-app-mem-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:9px 6px 8px;
  border-radius:8px;background:var(--v6-charcoal);text-align:center}
.v6-app-mem-card .avatar{--c:34px;width:34px;height:34px;font-size:11px;font-weight:700;color:var(--v6-black);
  box-shadow:0 0 0 2px var(--v6-charcoal),0 0 0 3.5px var(--color);margin-bottom:3px}
/* Chấm "đang hoạt động" — trên thẻ, không trong .avatar (overflow:hidden cắt mất, §8). */
.v6-app-mem-card::before{content:"";position:absolute;left:calc(50% + 9px);top:34px;z-index:1;width:8px;height:8px;border-radius:50%;
  background:var(--v6-leaf);box-shadow:0 0 0 2px var(--v6-charcoal)}
.v6-app-mem-card b{margin:0;font-size:11px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-app-mem-card small{font-size:9px;color:var(--v6-gray);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-app-mem-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:2px}
.v6-app-mem-facts i{font-style:normal;font-size:8.5px;padding:1px 5px;border-radius:4px;background:color-mix(in srgb,var(--color) 25%,transparent)}
.v6-app-mem-btn{margin-top:4px;padding:2px 12px;border-radius:999px;border:1px solid var(--color);font-size:9.5px;font-weight:600}
.v6-app-emoji{display:flex;align-items:center;gap:4px;margin:6px 0 0}
.v6-app-emoji span{font-size:11px;padding:1px 6px;border-radius:999px;background:var(--v6-charcoal);border:1px solid rgba(255,255,255,.08)}
.v6-app-emoji small{margin-left:4px;font-size:9.5px;color:var(--v6-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.v6-app-need-head em{animation:none}}
@media (prefers-reduced-motion:reduce){
  .v6-conn,.v6-conn em,.v6-app-pn{animation:none}
  .v6-conn:nth-of-type(1){background:color-mix(in srgb,var(--k) 20%,var(--v6-charcoal));color:var(--white);box-shadow:inset 3px 0 0 var(--k)}
  .v6-app-pn:nth-of-type(1){opacity:1}}

/* Tiêu đề thẻ Nhu cầu hợp tác dẫn sang màn chi tiết (19/09 — rà toàn bộ lối
   đi trên trang chủ). Giữ nguyên chữ; gạch chân khi rê / Tab. */
.v6-want-link{color:inherit;text-decoration:none}
.v6-want-link:hover,.v6-want-link:focus-visible{text-decoration:underline;text-underline-offset:3px}


/* ══════════════════════════════════════════════════════════════════════════
   THEME LỤC · 22/09 — nội bộ chốt "xanh lá đi".
   Bảng màu nền nằm ở :root của _common.css (đổi GIÁ TRỊ, giữ TÊN).
   Khối này chỉ lo những gì RIÊNG trang chủ: lật chữ sang mực trong thân
   trang, nền từng khối, mặt tấm kính, chân trang, và bốn hiệu ứng.
   Đặt ở CUỐI file theo §8 — chèn thêm thì đặt SAU luật gốc.
   Bản chàm cũ: Archieved/2026-09-22-theme-discord-cham/
   ══════════════════════════════════════════════════════════════════════════ */
.v6{
  /* Mực vẽ hình nhân vật. --v6-light là màu ĐẦU và BÀN TAY → để KEM, và viền
     mực ở .v6-nv-head bên dưới lo phần tách khỏi nền (kem trên nền sáng chỉ
     1.01 : 1, không viền là mất đầu). */
  --v6-light:#F6EBD9; --v6-dot:#1F2A08; --v6-depth:#1F2A08; --v6-night:#3E6430;
  --v6-bg:#FFFFFF; --v6-violet-blue:#FBFCEF;
  --v6-glass-light:#FFFFFF; --v6-glass-mid:#FFFFFF; --v6-glass-dark:#FBFCEF;
  /* Sáu token dưới là nguồn màu băng thẻ "Sản phẩm và dịch vụ" (HTML khai --c
     trỏ vào chúng). Ba sắc của bảng + ba sắc trạng thái giữ nguyên nghĩa. */
  --v6-blurple:#4A7C3A; --v6-blurple-deep:#3E6430; --v6-blurple-pale:#8FBE30;
  --v6-fuchsia:#E8873A; --v6-orange:#8FBE30;
  --v6-leaf:#1F8F4A; --v6-blue:#1668B0; --v6-red:#CF2030;
  --v6-purple:#3E6430; --v6-pink:#E8873A;
  --v6-scene-pink:#FAF0D4;  --v6-scene-pink-2:#8FBE30;
  --v6-scene-leaf:#E9F2C6;    --v6-scene-leaf-2:#F2B417;
  --v6-scene-screen:#FFFFFF;   --v6-scene-purple:#8FBE30;
  --white:#0B1220;
  --dark-text:#4A5568; --dark-label:#3E6430; --dark-sub:#4A5568;
  --v6-mist:#4A5568; --v6-gray:#66758D;
  background:#FBFCEF; color:var(--ink);
}
body:has(.v6){background:#FBFCEF}

/* ── ĐẦU NHÂN VẬT: kem + viền mực ────────────────────────────────────────── */
.v6-nv-head{stroke:#1F2A08;stroke-width:2.4;paint-order:stroke fill}

/* ── THANH ĐIỀU HƯỚNG ────────────────────────────────────────────────────── */
.v6 .nav{background:#4A7C3A;border-bottom:0}
.v6 .nav.has-bubble{background:#4A7C3A;box-shadow:0 2px 14px rgba(11,18,32,.16)}
.v6 .nav,.v6 .nav a,.v6 .nav b{color:#FFFFFF}
.v6 .nav-menu a::after{background:#FFFFFF}
.v6 .nav .btn--gold{background:#FFFFFF;color:#3E6430}
.v6 .nav .btn--gold:hover{background:#EAF2B0;color:#3E6430}
.v6 .nav .btn--outline-white{border-color:rgba(255,255,255,.7);color:#FFFFFF}
.v6 .nav .btn--outline-white:hover{background:rgba(255,255,255,.14)}
.v6 .nav .team button{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.35)}
.v6 .nav .team button[aria-pressed="true"]{background:#FFFFFF;color:#3E6430;border-color:#FFFFFF}
.v6 .nav .acct{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#FFFFFF}

/* ── ĐẦU TRANG ───────────────────────────────────────────────────────────── */
.v6-head{background:linear-gradient(165deg,#EAF2B0 0,#FBFCEF 72%)}
.v6-hint{color:#3A4553}
.v6-search{background:#FFFFFF;border:1px solid rgba(11,18,32,.14);box-shadow:0 2px 12px rgba(11,18,32,.07)}
.v6-search input{color:#0B1220}
.v6-search input::placeholder{color:#66758D}
.v6-search:focus-within{outline-color:#4A7C3A}
.v6-gold{background:#8FBE30}
.v6 :focus-visible{outline-color:#3E6430}

/* ── CHỮ ĐẦU TRANG: bề dày bằng nhiều lớp text-shadow lệch 1px NGUYÊN ──────
   §8 cấm perspective/rotate/filter lên chữ — chữ bị vẽ thành ảnh rồi lọc nên
   nhoè, người dùng đã chê "mờ mờ". Cách này chữ vẫn là chữ: nét sắc nguyên,
   chỉ có nhiều bản sao đặc lệch dần. Hướng đùn xuống-phải, 6 nấc. */
.v6-h1{color:#0B1220;
  text-shadow:
    1px 1px 0 #8FBE30, 2px 2px 0 #8FBE30,
    3px 3px 0 #4A7C3A,    4px 4px 0 #4A7C3A,
    5px 5px 0 #3E6430,  6px 6px 0 #3E6430,
    7px 8px 14px rgba(11,18,32,.16)}
.v6-h1 em{font-style:normal;color:#4A7C3A;background:none;-webkit-text-fill-color:#4A7C3A;animation:none;
  text-shadow:
    1px 1px 0 #F2B417, 2px 2px 0 #F2B417,
    3px 3px 0 #8FBE30,4px 4px 0 #8FBE30,
    5px 5px 0 #3E6430, 6px 6px 0 #3E6430,
    7px 8px 14px rgba(11,18,32,.16)}
@media (prefers-reduced-motion:reduce){.v6-h1,.v6-h1 em{text-shadow:none}}

/* ══ MỖI KHỐI MỘT SẮC — cùng độ nhạt, chênh nhau về SẮC ═══════════════════ */
.v6-block:nth-of-type(1){background:#FAF0D4}
.v6-block:nth-of-type(2){background:#FFFFFF}
.v6-block:nth-of-type(3){background:#E9F2C6}
.v6-block:nth-of-type(4){background:#FFFFFF}
.v6-block:nth-of-type(5){background:#D9EFE0}

/* Khối mô phỏng giao diện: nền tối giữ nguyên, chữ trả lại trắng. */
.v6-mh{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-app-channel{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-app-chat{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-app-stick{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-spn{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-ev-card{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-chat-channel{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-chat-bubble{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-mem{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-app-need{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-app-hello{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-app-fld{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;--v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}

.v6-glass{border:1px solid rgba(11,18,32,.10);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 20px 48px -16px rgba(11,18,32,.16)}

/* ── nút ─────────────────────────────────────────────────────────────────── */
.btn.v6-btn-main{background:#4A7C3A;color:#FFFFFF}
.btn.v6-btn-main:hover{background:#3E6430}
.btn.v6-btn-white{background:#FFFFFF;color:#3E6430;box-shadow:inset 0 0 0 1.5px #4A7C3A}
.btn.v6-btn-white:hover{background:#EAF2B0}
.btn.v6-btn-code{color:#3E6430;border-color:#4A7C3A}
.btn.v6-btn-code:hover{background:#EAF2B0}
.v6-sl-btn--solid{background:#4A7C3A;border-color:#4A7C3A;color:#FFFFFF}
.v6-sl-btn{border-color:rgba(11,18,32,.16);color:#0B1220}
.v6-sl-btn:hover{background:#EAF2B0}
.v6-st-btn{border-color:rgba(11,18,32,.16);color:#0B1220}
.v6-st-btn:hover{background:#4A7C3A;color:#FFFFFF;border-color:#4A7C3A}

/* ── viên nhãn, chấm điều hướng ──────────────────────────────────────────── */
.v6-channel-label{background:#4A7C3A;color:#FFFFFF}
.v6-glass-y li::before{background:#4A7C3A;color:#FFFFFF}
.v6-st-dot button,.v6-sl-dot button{border-color:#4A7C3A;opacity:.45}
.v6-st-dot button[aria-current="true"],.v6-sl-dot button[aria-current="true"]{opacity:1}
.v6-st-dot button[aria-current="true"]::before,
.v6-sl-dot button[aria-current="true"]::before{background:#4A7C3A}
.v6-light-star{background:#8FBE30}

/* ── băng thẻ "Sản phẩm và dịch vụ" ──────────────────────────────────────── */
.v6-sl-card{background:#FFFFFF;color:#0B1220;border:1px solid rgba(11,18,32,.10);
  box-shadow:0 1px 2px rgba(11,18,32,.05),0 14px 32px -14px rgba(11,18,32,.16)}
.v6-sl-pic{--white:#FFFFFF}
.v6-sl-type{background:#FFFFFF;color:#0B1220;box-shadow:inset 0 0 0 1px rgba(11,18,32,.14)}
.v6-sl-ai .avatar{color:#FFFFFF}

/* ── CHÂN TRANG ──────────────────────────────────────────────────────────
   _home.css khai .v6 .foot{color:var(--white)}. Lượt trước tôi lật
   --white thành mực cho cả trang → chữ đen trên nền đen, chân trang trông
   như chưa dựng. Trả lại trắng TRONG phạm vi chân trang, và đổi nền đen
   tuyền sang sắc đậm của bảng để nó thuộc về trang. */
.v6 .foot{--white:#FFFFFF;background:#1B2E12;color:#FFFFFF}
.v6 .foot h4,.v6 .foot h2{color:#8FBE30;font-weight:600;letter-spacing:.02em}
.v6 .foot a{color:rgba(255,255,255,.88)}
.v6 .foot a:hover{color:#FFFFFF;text-decoration:underline}
.v6 .foot .brand b{color:#FFFFFF}
.v6 .foot-bottom{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.v6 .foot-bottom a{color:rgba(255,255,255,.82)}
.v6 .foot .foot-social-link{border-color:rgba(255,255,255,.4);color:#FFFFFF}
.v6 .foot .foot-social-link:hover{background:rgba(255,255,255,.14)}
.v6 .foot :focus-visible{outline-color:#FFFFFF}


/* ══════════════════════════════════════════════════════════════════════════
   LƯỢT 6 — sửa chữ đầu trang, mực vẽ nhân vật, và thêm hiệu ứng.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ② tóc và chân: mực TRUNG TÍNH, không cùng họ với áo ─────────────────── */
.v6{--v6-dot:#243042; --v6-depth:#141B26}

/* ══ TẤM KÍNH PHẢI TÁCH KHỎI NỀN KHỐI ═════════════════════════════════════
   Người dùng: "background trắng bị chìm quá". Đúng — khối ② và ④ nền TRẮNG
   mà tấm kính cũng TRẮNG, nên tấm kính không còn mép, cả khối đọc ra là một
   mảng trắng trơn; chỉ mỗi ô ảnh màu là nổi.

   Luật đặt ra: tấm kính LUÔN khác nền khối một nấc.
     khối có sắc  → tấm kính TRẮNG
     khối trắng   → tấm kính mang sắc nhạt
   Thêm viền rõ hơn và bóng sâu hơn cho mọi tấm kính, để nó đọc ra là một
   THẺ NỔI chứ không phải một vùng nền. §4 cho phép: phân khối bằng kẻ chỉ
   và khoảng trống — đây là kẻ chỉ, không phải rải bóng khắp nơi. */
.v6-block:nth-of-type(2),.v6-block:nth-of-type(4){
  --v6-glass-light:#F6FAEA; --v6-glass-mid:#F6FAEA; --v6-glass-dark:#EEF5DA}
.v6-glass{border:1px solid #D3DFB4;
  box-shadow:0 1px 2px rgba(11,18,32,.06),0 26px 56px -20px rgba(11,18,32,.24)}

/* ── ① chữ đầu trang — TRẢ VỀ KIỂU GỐC ───────────────────────────────────
   Người dùng: "style chữ như ban đầu ok hơn". Bản gốc: dòng một mực đặc,
   dòng hai CHUYỂN SẮC có vệt sáng lướt 9 giây — không bóng, không đùn, không
   dải nền. Chữ vẫn là chữ nên nét sắc nguyên (§8).

   Khác bản gốc đúng một chỗ: bản gốc pha các chặng với TRẮNG để sáng lên trên
   nền tối. Nền nay sáng nên pha ngược lại — dùng các chặng đậm của bảng, đã
   đo từng chặng trên nền khối 1, chặng yếu nhất vẫn đạt ngưỡng chữ lớn.
   Dùng lại @keyframes v6-h1-anh có sẵn trong _home.css. */
.v6-h1{color:#0B1220;text-shadow:none}
.v6-h1 em{font-style:normal;
  background:linear-gradient(100deg,
    #2A7D2A 0%, #00796B 25%, #0B63C4 50%,
    #7034BC 75%, #2A7D2A 100%) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding:0;border-radius:0;text-shadow:none;
  -webkit-box-decoration-break:slice;box-decoration-break:slice;
  animation:v6-h1-img 9s linear infinite}
@media (prefers-reduced-motion:reduce){.v6-h1 em{animation:none}}

/* ── ③ vầng sáng màu trôi trong dải đầu ──────────────────────────────────
   Hai quầng mờ trôi chéo, một vòng 40 giây. Nặng 0 byte — §5C cấm video nền,
   đây là phương án thay thế đã ghi trong README. Đặt dưới nội dung. */
.v6-head{position:relative;isolation:isolate}
.v6-head>*{position:relative;z-index:1}
.v6-head::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 38% at 20% 28%,color-mix(in srgb,#8FBE30 42%,transparent) 0,transparent 70%),
    radial-gradient(30% 34% at 76% 64%,color-mix(in srgb,#F2B417 34%,transparent) 0,transparent 70%);
  will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .v6-head::after{animation:v6-blot 40s ease-in-out infinite alternate}
}
@keyframes v6-blot{to{transform:translate3d(3%,2.5%,0) scale(1.09)}}

/* ── ③ thẻ nâng nhẹ khi rê chuột ─────────────────────────────────────────
   CHỈ trên máy có chuột. Đặt trên thẻ, KHÔNG đặt trên .v6-glass — tấm kính
   đang dùng translate cho hiệu ứng vào khung nhìn, chồng lên là mất cả hai. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .v6-ev-card,.v6-sl-card{transition:translate .35s var(--ease-btn),box-shadow .35s var(--ease-btn)}
  .v6-ev-card:hover,.v6-sl-card:hover{translate:0 -4px;
    box-shadow:0 20px 40px -14px rgba(11,18,32,.3)}
}

/* ══════════════════════════════════════════════════════════════════════════
   LƯỢT 7 — bốn hiệu ứng nữa. Trang đã có hơn 20 hoạt ảnh nên chỉ thêm thứ
   CHƯA CÓ, và chọn thứ đọc được trên nền sáng. Tất cả là CSS thuần, 0 byte.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ⓐ thanh tiến trình đọc, mảnh 3px ở đáy thanh điều hướng ─────────────
   Dùng scroll-driven animation của CSS — không cần một dòng JS nào. Trình
   duyệt chưa hỗ trợ thì vạch đứng yên ở 0, trang vẫn lành (không phải kiểu
   "thiếu JS là mất nội dung" mà §5C cấm). */
.v6 .nav{position:relative}
.v6 .nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#8FBE30,#F2B417);
  transform-origin:0 50%;scale:0 1;pointer-events:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .v6 .nav::after{animation:v6-vert linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes v6-vert{to{scale:1 1}}

/* ── ⓑ gạch màu dưới tiêu đề khối, VẼ RA khi khối vào khung nhìn ─────────
   §5C: chỉ ẩn khi JS đã chạy. Mặc định gạch hiện đủ; chỉ khi _shell.js gắn
   .fx mới thu về 0 rồi vẽ ra lúc khối nhận lớp .shown. */
.v6-h2{position:relative;padding-bottom:.3em}
.v6-h2::after{content:"";position:absolute;left:0;bottom:0;width:2.4em;height:5px;
  border-radius:3px;background:linear-gradient(90deg,#4A7C3A,#8FBE30);
  transform-origin:0 50%}
.fx .v6-h2::after{scale:0 1;
  transition:scale .9s cubic-bezier(.16,1,.3,1) .28s}
.fx .shown .v6-h2::after{scale:1 1}
@media (prefers-reduced-motion:reduce){.fx .v6-h2::after{scale:1 1;transition:none}}

/* ── ⓒ vệt sáng lướt qua nút chính khi rê chuột ─────────────────────────
   §5 cấm "quầng sáng mạnh SAU nút" — đây là vệt chạy BÊN TRONG nút, bị cắt
   bởi overflow, không hắt ra ngoài. Nhạt (34% trắng), đi một lần .55 giây. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn.v6-btn-main{position:relative;overflow:hidden;isolation:isolate}
  .btn.v6-btn-main::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
    transform:skewX(-18deg);pointer-events:none;
    transition:left .55s cubic-bezier(.2,.7,.3,1)}
  .btn.v6-btn-main:hover::after{left:125%}
}

/* ── ④ viên CHƯƠNG TRÌNH HỌC trên thẻ thành viên bay ─────────────────────
   Thẻ ghi "Trần Thị B · Giám đốc vận hành · DBA · Sản xuất". Viên đầu là
   CHƯƠNG TRÌNH HỌC (DBA) — tức mối nối giữa giáo dục và con người vốn đã
   nằm sẵn trong dữ liệu (Danh bạ có bộ lọc theo chương trình học), chỉ đang
   bị vẽ nhỏ và mờ NGANG HÀNG với viên lĩnh vực nên không ai đọc ra nó là
   chương trình học.
   Nay tách thứ bậc: viên đầu mang sắc thương hiệu, chữ mực, đậm hơn. Viên
   thứ hai (lĩnh vực) giữ nguyên nền than — rõ thứ bậc chứ không thêm màu. */
.v6-spn-facts i:first-child{background:#8FBE30;color:#0B1220;font-weight:700;
  font-size:11px;letter-spacing:.02em;padding:2px 8px}

/* ── ⓓ dòng tin sáng lên khi rê chuột ───────────────────────────────────
   Chỉ đổi nền, KHÔNG phóng ảnh: ảnh nằm trực tiếp trong thẻ <a>, không có
   khung cắt nên phóng lên là tràn ra ngoài. */
@media (hover:hover){
  .v6-st-line{transition:background-color .3s var(--ease-btn)}
  .v6-st-line:hover{background:var(--green-pale)}
}


/* ══════════════════════════════════════════════════════════════════════════
   VÁ 22/09 · trạng thái rê chuột trên nền SÁNG
   Nền trang nay sáng. Mọi trạng thái rê viết bằng rgba trắng hoặc rgba đen là
   di sản của nền tối: trắng mờ trên nền sáng thì tàng hình, đen mờ thì ra một
   dải XÁM lạc hẳn khỏi bảng màu — người dùng bắt đúng chỗ này.
   ⚠ Phải đặt ở _home.css: file này nạp sau _common.css nên luật gốc ở
   đây đè mọi luật cùng độ đặc trưng viết ở _common.css.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-st-line:hover,.v6-st-line.active{background:var(--green-pale)}
.v6-st-line.active .v6-st-run{background:color-mix(in srgb,var(--green) 22%,transparent)}
.v6-st-line.active .v6-st-run::after{background:var(--green)}
.v6-sl-btn:hover{background:var(--green-pale);border-color:var(--green);color:var(--green-dark)}
.v6-block .btn.v6-btn-code:hover{background:var(--green-pale)}


/* ══════════════════════════════════════════════════════════════════════════
   TINH CHỈNH MÀU + HIỆU ỨNG (bản "moi") — KHÔNG đổi một dòng bố cục nào.
   Ba việc:
     ① Các mặt TỐI đặt trên tấm kính sáng (thẻ sự kiện, bong bóng nhu cầu,
        danh sách thành viên, thẻ điện thoại) đổi thành MẶT SÁNG + mực đậm.
        Đây là chỗ sinh ra cảm giác "tối quá": tấm kính sáng mà ruột đen.
     ② Hoà sắc: mọi sắc nhấn về một họ xanh lục → bạc hà → hổ phách.
     ③ Hiệu ứng mượt: nâng thẻ + bóng nở khi rê, ảnh phóng nhẹ, nhãn sáng lên.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① MẶT SÁNG ─────────────────────────────────────────────────────────────── */
.v6-ev-card,.v6-chat-bubble,.v6-chat-channel,.v6-mem,.v6-spn{
  --white:#0B2016;--dark-text:#456052;--dark-label:#456052;--dark-sub:#456052;
  --v6-mist:#456052;--v6-gray:#456052;color:#0B2016}
.v6-ev-card{background:#FFFFFF;box-shadow:0 14px 34px -18px rgba(8,40,26,.34)}
.v6-ev-card b{color:#0B2016}
.v6-ev-st{color:#456052}
.v6-chat-bubble{background:#FFFFFF;box-shadow:0 12px 30px -16px rgba(8,40,26,.30)}
.v6-chat-bubble h3,.v6-chat-ai b{color:#0B2016}
.v6-chat-label i{background:#E4FBE9;color:#15653D}
.v6-chat-label i.v6-urgent{background:#FFE7DE;color:#B93B12}
.v6-chat-channel{background:#F4FBF1;box-shadow:0 12px 30px -18px rgba(8,40,26,.26)}
.v6-chat-channel b{border-bottom-color:rgba(8,40,26,.10)}
.v6-chat-channel span.active{background:#FFFFFF;color:#15653D;font-weight:700}
.v6-mem{background:transparent}
.v6-mem-head{color:#3C5648}
.v6-mem-line{background:#FFFFFF;box-shadow:0 8px 22px -16px rgba(8,40,26,.28)}
.v6-mem-line:hover{background:#F4FBF1}
.v6-mem-line .avatar{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--color)}
.v6-mem-facts i{background:#E4FBE9;color:#15653D;font-weight:600}
.v6-spn{background:#FFFFFF;box-shadow:0 18px 40px -20px rgba(8,40,26,.38)}

/* ② HOÀ SẮC ──────────────────────────────────────────────────────────────── */
/* Dòng hai tiêu đề: lục bảo → chanh → bạc hà (bỏ quãng cam–lam đánh nhau). */
.v6-h1 em{background:linear-gradient(100deg,
    #15653D 0%, #1F8F4A 38%, #17703A 68%, #15653D 100%) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.v6-channel-label,.v6-st-type{background:#E4FBE9;color:#15653D}
.v6-pin{background:#FFF1D6;color:#8A5A05}
.v6-sl-label .v6-sl-type{background:#15653D;color:#fff}
.v6-sl-label .v6-sl-group{border-color:rgba(8,40,26,.16);color:#15653D}

/* ③ HIỆU ỨNG MƯỢT ────────────────────────────────────────────────────────── */
.v6-ev-card,.v6-chat-bubble,.v6-mem-line,.v6-st-line,.v6-sl-card{
  transition:transform .34s var(--ease-in),box-shadow .34s var(--ease-in),background-color .24s var(--ease-btn)}
.v6-ev-card:hover,.v6-chat-bubble:hover,.v6-sl-card:hover{
  transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(8,40,26,.42)}
.v6-mem-line:hover,.v6-st-line:hover{transform:translateX(5px)}
.v6-ev-img img,.v6-st-img img,.v6-st-line img{transition:transform .6s var(--ease-in)}
.v6-ev-card:hover .v6-ev-img img,.v6-st-line:hover img{transform:scale(1.06)}
.v6-glass{transition:box-shadow .4s var(--ease-in)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 2 — HEADER · CHỮ ĐẦU TRANG · NHÂN VẬT · THUMBNAIL (chỉ màu + hiệu ứng)
   ① Header: mảng olive đặc → tấm KÍNH trong suốt, cuộn xuống mới hiện nền
      trắng mờ + kẻ chỉ mảnh. Mực đậm, mục đang xem là viên bo, gạch chân
      trượt mượt.
   ② Chữ đầu trang: bỏ 6 lớp bóng đùn (nặng, cũ, rìa lởm chởm) → mực đặc
      phẳng + dòng hai lục bảo, thêm vệt chanh mảnh dưới chân chữ.
   ③ Nền khối: 5 sắc → 2 sắc xen kẽ (trắng · xanh sương) cho nhịp đều.
   ④ Thumbnail hồ sơ (Trần Thị B) và màn máy tính: bỏ xoay 3D lệch, viền
      sáng, bìa chuyển sắc trong họ xanh, nhịp nổi chậm và nhẹ hơn.
   ⑤ Nhân vật: nhỏ lại, hạ về chân cụm, bỏ nhịp nhảy, bắt tay chậm hơn.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① HEADER ───────────────────────────────────────────────────────────────── */
.v6 .nav{background:transparent;border-bottom:1px solid transparent;
  transition:background-color .34s var(--ease-in),border-color .34s var(--ease-in),backdrop-filter .34s}
.v6 .nav.has-bubble{background:rgba(255,255,255,.82);border-bottom-color:rgba(12,59,38,.10);
  box-shadow:0 8px 28px -18px rgba(8,40,26,.34);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.v6 .nav,.v6 .nav a,.v6 .nav b{color:#0C3B26}
.v6 .nav-menu a{padding:9px 14px;border-radius:999px;font-weight:600;
  transition:background-color .2s var(--ease-btn),color .2s var(--ease-btn)}
.v6 .nav-menu a:hover{background:rgba(31,143,74,.10);color:#15653D}
.v6 .nav-menu a::after{background:#1F8F4A;height:2px;border-radius:2px;transition:width .28s var(--ease-in)}
.v6 .nav .btn--gold{background:#1F8F4A;color:#FFFFFF;box-shadow:0 10px 22px -12px rgba(31,143,74,.70);
  transition:transform .2s var(--ease-btn),background-color .2s,box-shadow .2s}
.v6 .nav .btn--gold:hover{background:#17703A;color:#FFFFFF;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(31,143,74,.80)}
.v6 .nav .btn--outline-white{border-color:rgba(12,59,38,.24);color:#0C3B26}
.v6 .nav .btn--outline-white:hover{background:rgba(31,143,74,.10)}
.v6 .nav .team button{color:#3C5648;border-color:rgba(12,59,38,.22)}
.v6 .nav .team button[aria-pressed="true"]{background:#15653D;color:#FFFFFF;border-color:#15653D}
.v6 .nav .acct{background:rgba(255,255,255,.72);border-color:rgba(12,59,38,.16);color:#0C3B26}

/* ② CHỮ ĐẦU TRANG ────────────────────────────────────────────────────────── */
.v6-head{background:linear-gradient(168deg,#E8F7DC 0%,#F7FCF2 52%,#FFFFFF 100%)}
.v6-h1{color:#0B2016;text-shadow:none;letter-spacing:-.02em}
.v6-h1 em{position:relative;font-style:normal;color:#177A44;-webkit-text-fill-color:#177A44;
  background:none;text-shadow:none;animation:none}
.v6-h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.11em;border-radius:99px;
  background:linear-gradient(90deg,#8FE04A,rgba(143,224,74,0));opacity:.55;z-index:-1}
.v6-hint{color:#3C5648}
.v6-search{border-color:rgba(12,59,38,.14);box-shadow:0 10px 26px -16px rgba(8,40,26,.30)}
.v6-search:focus-within{outline-color:#1F8F4A}

/* ③ NHỊP NỀN: hai sắc xen kẽ ─────────────────────────────────────────────── */
.v6-block:nth-of-type(1){background:#FFFFFF}
.v6-block:nth-of-type(2){background:#F4FBF1}
.v6-block:nth-of-type(3){background:#FFFFFF}
.v6-block:nth-of-type(4){background:#F4FBF1}
.v6-block:nth-of-type(5){background:#FFFFFF}

/* ④ THUMBNAIL + MÀN MÁY TÍNH ─────────────────────────────────────────────── */
.v6-spn{transform:none;border:1px solid rgba(12,59,38,.10);border-radius:22px;
  box-shadow:0 20px 44px -22px rgba(8,40,26,.34);animation:v6-bubble 9s ease-in-out -3s infinite alternate}
.v6-spn-cover{height:52px;background:linear-gradient(120deg,#1F8F4A,#8FE04A)}
.v6-spn .avatar{border-color:#FFFFFF;margin:-28px 0 8px 14px}
.v6-spn b,.v6-spn small{padding-inline:16px}
.v6-spn-facts{margin:10px 16px 0}
.v6-spn-facts i{background:#E4FBE9;color:#15653D;font-weight:600;padding:3px 9px;border-radius:999px}
.v6-spn::after{background:#1F8F4A;box-shadow:0 0 0 3px #FFFFFF}
.v6-mh{transform:perspective(2200px) rotateY(-9deg) rotateX(4deg);
  box-shadow:0 0 56px -18px rgba(31,143,74,.45),0 40px 80px -34px rgba(8,40,26,.55)}

/* ⑤ NHÂN VẬT ─────────────────────────────────────────────────────────────── */
.v6-nv--scene{left:-1%;bottom:-2%;width:27%}
.v6-nv-blink{animation:none}
.v6-nv-shake{animation-duration:4.6s}
.v6-nv-halo{opacity:.22}
.v6-pg{opacity:0;animation-duration:4.6s}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 3 — ĐẬM MÀU · MENU · ANIMATION · MÀN MÁY TÍNH  (vẫn chỉ màu + hiệu ứng)
   ① Màu đậm và nhiều lớp hơn: nền đầu trang có quầng lục bảo + hổ phách;
      mỗi khối một dải nền đậm hơn một nấc, xen hai sắc xanh lục ↔ xanh lam;
      tấm kính có vành sáng và chuyển sắc thật thay vì phẳng.
   ② Menu: cả nhóm nằm trong một viên kính; mục đang xem là viên ĐẶC lục bảo,
      mục khác sáng lên + nhấc 1px khi rê.
   ③ Animation theo cuộn: tiêu đề khối, đoạn dẫn, danh sách ý và tấm kính
      cùng nổi lên theo view-timeline; vệt sáng quét qua tấm kính; chấm
      "đang diễn ra" đập nhịp. Tắt hết khi prefers-reduced-motion.
   ④ Màn máy tính: nghiêng lại rõ (rotateY -16°), hai lớp quầng lục bảo +
      hổ phách, nhấc nhẹ khi rê chuột.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① MÀU ĐẬM HƠN ──────────────────────────────────────────────────────────── */
.v6-head{background:
  radial-gradient(60% 62% at 82% 14%,rgba(31,143,74,.30) 0%,transparent 68%),
  radial-gradient(46% 50% at 6% 84%,rgba(233,168,28,.26) 0%,transparent 70%),
  radial-gradient(40% 44% at 46% 100%,rgba(47,169,224,.20) 0%,transparent 72%),
  linear-gradient(168deg,#D8F0C4 0%,#EDF8E2 48%,#F7FCF2 100%)}
.v6-gold{background:#E9A81C;opacity:.22;filter:blur(80px)}
.v6-block:nth-of-type(1){background:linear-gradient(180deg,#FFFFFF 0%,#F0F9E6 100%)}
.v6-block:nth-of-type(2){background:linear-gradient(180deg,#E8F5DE 0%,#DCF0F7 100%)}
.v6-block:nth-of-type(3){background:linear-gradient(180deg,#FFFFFF 0%,#FFF4DE 100%)}
.v6-block:nth-of-type(4){background:linear-gradient(180deg,#E4F3FA 0%,#EAF7DE 100%)}
.v6-block:nth-of-type(5){background:linear-gradient(180deg,#FFFFFF 0%,#EFF9E9 100%)}
.v6-glass{position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(12,59,38,.07),0 26px 60px -34px rgba(8,40,26,.40)}
.v6-scene-img--pink{background:linear-gradient(140deg,#FFF0D8,#FFD9A8)}
.v6-scene-img--search{background:linear-gradient(140deg,#DFF3E7,#BDE8CF)}
.v6-scene-img--screen{background:linear-gradient(140deg,#E2F2FB,#C3E5F6)}
.v6-scene-img--leaf{background:linear-gradient(140deg,#EAF8DD,#CFEEB2)}
.v6-h2{color:#0B2016}
.v6-glass-open{color:#3C5648}
.v6-glass-y li{color:#15653D}

/* ② MENU ─────────────────────────────────────────────────────────────────── */
.v6 .nav-menu{gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.62);border:1px solid rgba(12,59,38,.08);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.v6 .nav-menu a{position:relative;padding:9px 16px;border-radius:999px;font-weight:600;color:#25412F;
  transition:background-color .22s var(--ease-btn),color .22s var(--ease-btn),transform .22s var(--ease-btn)}
.v6 .nav-menu a:hover{background:#FFFFFF;color:#15653D;transform:translateY(-1px)}
.v6 .nav-menu a[aria-current],.v6 .nav-menu a.active{background:#1F8F4A;color:#FFFFFF;
  box-shadow:0 8px 18px -10px rgba(31,143,74,.85)}
.v6 .nav-menu a[aria-current]::after,.v6 .nav-menu a.active::after{display:none}

/* ③ ANIMATION THEO CUỘN ──────────────────────────────────────────────────── */
@keyframes v6-place-up{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes v6-in-left{from{opacity:0;translate:-24px 0}to{opacity:1;translate:0 0}}
@keyframes v6-scan{0%{transform:translateX(-130%) skewX(-16deg)}60%,100%{transform:translateX(240%) skewX(-16deg)}}
@keyframes v6-answer{0%,100%{box-shadow:0 0 0 0 rgba(31,143,74,.55)}55%{box-shadow:0 0 0 7px rgba(31,143,74,0)}}
.v6-glass::after{content:"";position:absolute;top:0;left:0;width:36%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:v6-scan 9s ease-in-out infinite}
.v6-dot--active,.v6-ev-st--active::before{border-radius:50%;animation:v6-answer 2.2s ease-out infinite}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .v6-glass,.v6-h2,.v6-glass-open,.v6-glass-y li,.v6-sl-rail>li,.v6-st-head{
      animation:linear both;animation-timeline:view();animation-range:entry 0% entry 52%}
    .v6-glass,.v6-h2,.v6-glass-open,.v6-sl-rail>li,.v6-st-head{animation-name:v6-place-up}
    .v6-glass-y li{animation-name:v6-in-left}
  }
}
@media (prefers-reduced-motion:reduce){.v6-glass::after{display:none}}

/* ④ MÀN MÁY TÍNH ─────────────────────────────────────────────────────────── */
.v6-mh{transform:perspective(1900px) rotateY(-16deg) rotateX(6deg) rotateZ(1.2deg);
  box-shadow:0 0 70px -14px rgba(31,143,74,.55),0 0 120px -30px rgba(233,168,28,.45),
    0 44px 90px -36px rgba(8,40,26,.60);
  transition:transform .55s var(--ease-in),box-shadow .55s var(--ease-in)}
.v6-illus:hover .v6-mh{transform:perspective(1900px) rotateY(-11deg) rotateX(4deg) rotateZ(.6deg) translateY(-8px)}
.v6-illus::before{background:radial-gradient(closest-side,rgba(31,143,74,.55),transparent);opacity:.9}
.v6-illus::after{background:radial-gradient(closest-side,rgba(233,168,28,.40),transparent)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 4 — THUMBNAIL HỒ SƠ TRỞ LẠI DẠNG CHỮ NHẬT NGANG
   Thẻ dọc (ảnh bìa trên, ảnh đại diện đè lên bìa) chồng chéo mép màn máy
   tính nên đọc ra là "lệch". Nay: MỘT hàng ngang — ảnh trái, chữ phải —
   đặt gọn ở góc dưới phải, không đè vào vùng có chữ của màn.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-scene--spn{right:-3%;bottom:-3%;width:46%;max-width:330px}
.v6-spn{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;
  column-gap:14px;row-gap:2px;padding:14px 18px 14px 16px;padding-bottom:14px;
  border-radius:18px;background:#FFFFFF;border:1px solid rgba(12,59,38,.10);
  box-shadow:0 18px 40px -22px rgba(8,40,26,.40)}
.v6-spn-cover{display:none}
.v6-spn .avatar{grid-column:1;grid-row:1/span 3;--c:58px;margin:0;border:3px solid #FFFFFF;
  box-shadow:0 0 0 2px #E4FBE9;font-size:17px}
.v6-spn b{grid-column:2;padding-inline:0;font-size:15px;line-height:1.25}
.v6-spn small{grid-column:2;padding-inline:0;font-size:12px;line-height:1.35}
.v6-spn-facts{grid-column:2;margin:6px 0 0}
.v6-spn::after{right:12px;top:12px;width:9px;height:9px}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 5 — ĐẬM NỀN KHỐI VÀ CẢNH MÀU TRONG TẤM KÍNH
   Trước: dải nền khối gần như trắng, cảnh màu pha quá nhiều trắng nên cả
   khối "nhạt nhoà". Nay mỗi khối là một dải hai sắc rõ (xanh lục ↔ xanh lam
   ↔ hổ phách), tấm kính ngả kem nhẹ để nổi trên dải, cảnh màu bão hoà hơn
   một nấc — vẫn đủ sáng để mực đậm đạt ≥ 4.5 : 1.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-block:nth-of-type(1){background:linear-gradient(180deg,#E6F6D8 0%,#CFEBF2 100%)}
.v6-block:nth-of-type(2){background:linear-gradient(180deg,#D7ECF8 0%,#E3F5D6 100%)}
.v6-block:nth-of-type(3){background:linear-gradient(180deg,#FFEFD2 0%,#E3F5D6 100%)}
.v6-block:nth-of-type(4){background:linear-gradient(180deg,#DCF0E4 0%,#CFEBF2 100%)}
.v6-block:nth-of-type(5){background:linear-gradient(180deg,#E6F6D8 0%,#FFEFD2 100%)}
.v6-glass{background:linear-gradient(150deg,#FFFFFF 0%,#F6FBF1 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(12,59,38,.09),0 30px 66px -34px rgba(8,40,26,.46)}
.v6-scene-img--pink{background:linear-gradient(140deg,#FFE0B0 0%,#FFC57E 100%)}
.v6-scene-img--search{background:linear-gradient(140deg,#C9EAD8 0%,#A2DCBB 100%)}
.v6-scene-img--screen{background:linear-gradient(140deg,#CFE7F8 0%,#A6D6F1 100%)}
.v6-scene-img--leaf{background:linear-gradient(140deg,#DEF4CB 0%,#BAE494 100%)}
.v6-st-head .v6-h2::after{content:"";display:block;width:64px;height:4px;margin-top:8px;border-radius:99px;
  background:linear-gradient(90deg,#1F8F4A,#8FE04A)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 6 — HOÀ TONE KHỐI THÀNH VIÊN
   Trước: dãy thẻ trắng nằm trên cảnh VÀNG, vành ảnh đại diện sáu màu khác
   nhau (lam · cam · tím · đỏ) → cả khối lệch tone. Nay cảnh về họ bạc hà,
   vành ảnh và ruột chữ viết tắt cùng họ xanh–hổ phách, viên chip một sắc.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-scene-img--leaf{background:linear-gradient(140deg,#DCF2E4 0%,#B4E3C8 100%)}
.v6-mem-line{border:1px solid rgba(12,59,38,.08)}
.v6-mem-line .avatar{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--color)}
.v6-mem-head{color:#15653D;letter-spacing:.08em}
.v6-mem-facts i{background:#EFF9E9;color:#15653D;border:1px solid rgba(31,143,74,.16);border-radius:999px;padding:3px 10px}
.v6-mem-line:hover .v6-mem-facts i{background:#E4FBE9}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 7 — BỎ NHÂN VẬT VẼ TAY, DÙNG CHÙM BIỂU TƯỢNG NGHIỆP VỤ
   Ba người vẽ tay đứng cạnh màn máy tính đọc ra là tranh minh hoạ lạc tone
   (nét vẽ khác hẳn phần còn lại của trang). Nay là ba VIÊN BIỂU TƯỢNG kính
   trắng: cặp tài liệu (doanh nghiệp) · hai người (kết nối) · đồ thị đi lên
   (cùng phát triển) — đúng ba ý của khẩu hiệu. Nổi lệch nhịp nhau cho sống.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-orb-cluster{position:absolute;left:-2%;bottom:2%;width:31%;display:flex;align-items:flex-end;gap:6%;
  z-index:4;pointer-events:none;animation:none}
.v6-orb{flex:1;aspect-ratio:1;max-width:84px;display:grid;place-items:center;border-radius:26%;
  background:linear-gradient(150deg,#FFFFFF,#F2FBEC);
  border:1px solid rgba(12,59,38,.10);
  box-shadow:0 18px 34px -18px rgba(8,40,26,.45),0 1px 0 #FFFFFF inset;
  animation:v6-orb-place 6s ease-in-out infinite}
.v6-orb svg{width:52%;height:52%}
.v6-orb--1{color:#15653D;animation-delay:-.4s}
.v6-orb--2{color:#1F8F4A;margin-bottom:14%;animation-delay:-2.1s;background:linear-gradient(150deg,#FFFFFF,#E9F7DC)}
.v6-orb--3{color:#B07908;animation-delay:-3.6s;background:linear-gradient(150deg,#FFFFFF,#FFF3DD)}
@keyframes v6-orb-place{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -10px;rotate:2deg}}
@media (prefers-reduced-motion:reduce){.v6-orb{animation:none}}
@container app (max-width:1023px){.v6-orb-cluster{display:none}}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 8 — SỬA HAI LỖI DO VỆT SÁNG TRÊN TẤM KÍNH
   overflow:hidden thêm ở vòng 3 (chỉ để cắt vệt sáng) đã CẮT hai thứ có
   chủ ý nằm tràn ra ngoài tấm kính: viên tròn trang trí (.v6-place-obj, tràn
   28px lên mép) và thẻ xem nhanh hồ sơ khi rê chuột (.v6-mem-card, bị cắt
   78px ở các dòng cuối — đúng tính năng mà khối đó quảng cáo).
   → BỎ vệt sáng, trả overflow về visible. Nhịp "sống" của tấm kính đã có
     ở animation nổi lên theo cuộn, không cần thêm.
   Biểu tượng nghiệp vụ: dùng ĐÚNG bộ sprite của dự án (bt-tui · bt-nguoi ·
   bt-phat trong _shell.js) thay vì nét vẽ riêng — cùng độ dày, cùng kiểu góc.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-glass{overflow:visible}
.v6-glass::after{content:none;display:none}
.v6-orb svg{width:48%;height:48%;fill:currentColor}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 9 — HỆ MÀU DỨT KHOÁT CHO CÁC KHỐI (thay lối pha loãng từng nấc)
   Vì sao vẫn nhạt: mọi thứ đều ở cùng một mức sáng ~92–96% nên không mảng
   nào "đứng ra". Nay mỗi khối có BA nấc rõ ràng:
     · DẢI NỀN  L≈84%  — sắc riêng của khối, thấy được ngay
     · TẤM KÍNH gần trắng — chữ vẫn ≥ 7 : 1, thêm vạch màu ở mép trên
     · CẢNH MÀU L≈76%  — mảng đậm nhất, làm nền cho thẻ trắng
   Bốn sắc dùng luân phiên: lục bảo · lam biển · hổ phách · chanh; không
   thêm sắc thứ năm để khỏi loạn.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-block:nth-of-type(1){background:linear-gradient(180deg,#CFE9D6 0%,#BFE0EE 100%)}
.v6-block:nth-of-type(2){background:linear-gradient(180deg,#BFE0EE 0%,#D7EAB8 100%)}
.v6-block:nth-of-type(3){background:linear-gradient(180deg,#FBE4B4 0%,#D7EAB8 100%)}
.v6-block:nth-of-type(4){background:linear-gradient(180deg,#C8E7D4 0%,#BFE0EE 100%)}
.v6-block:nth-of-type(5){background:linear-gradient(180deg,#D7EAB8 0%,#FBE4B4 100%)}

.v6-glass{position:relative;background:linear-gradient(160deg,#FFFFFF 0%,#FBFDF8 100%);
  box-shadow:0 0 0 1px rgba(12,59,38,.10),0 34px 72px -34px rgba(8,40,26,.46)}
.v6-glass::before{content:"";position:absolute;left:8%;right:8%;top:0;height:5px;border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,#1F8F4A,#8FE04A 50%,#E9A81C);opacity:.9;z-index:2}

.v6-scene-img--pink{background:linear-gradient(140deg,#F8CD8A 0%,#EFB463 100%)}
.v6-scene-img--search{background:linear-gradient(140deg,#A6DCBD 0%,#7FC9A3 100%)}
.v6-scene-img--screen{background:linear-gradient(140deg,#A8D6EE 0%,#7FBEE0 100%)}
.v6-scene-img--leaf{background:linear-gradient(140deg,#C8E69C 0%,#A9D571 100%)}

/* Chữ đặt TRỰC TIẾP trên cảnh màu: mực đậm nhất để vượt 4.5 : 1 ở nấc đậm. */
.v6-scene-img{color:#0B2016}
.v6-st-text b,.v6-st-sum,.v6-st-text small{color:#0B2016}
.v6-st-text small{opacity:.82}
.v6-channel-label{background:rgba(255,255,255,.92);color:#15653D}

/* Tiêu đề khối: vạch màu dưới chân, cùng sắc với dải nền của khối. */
.v6-h2{position:relative}
.v6-glass-text .v6-h2::after,.v6-st-head .v6-h2::after{content:"";display:block;width:56px;height:4px;
  margin-top:10px;border-radius:99px;background:linear-gradient(90deg,#1F8F4A,#8FE04A)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 10 — THẺ XEM NHANH HỒ SƠ (tooltip) ĐỔI SANG MẶT TRẮNG
   Bản trước là mảng xanh lục trung tính, mà chữ bên trong lại là xanh lục
   nhạt và xám → dòng "chức danh · doanh nghiệp" gần như mất hẳn. Cả trang
   nay là nền sáng nên tooltip tối là ngoại lệ duy nhất, đọc ra là lệch.
   Nay: mặt trắng, mực đậm, nhãn lục bảo, mũi nhọn và viền cùng đổi theo.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-mem-card{background:#FFFFFF;border:1px solid rgba(12,59,38,.12);
  box-shadow:0 26px 56px -24px rgba(8,40,26,.45);color:#0B2016}
.v6-mem-card::before{border-top-color:#FFFFFF}
.v6-mem-list>li:nth-child(-n+3) .v6-mem-card::before{border-bottom-color:#FFFFFF;border-top-color:transparent}
.v6-mem-card b{color:#0B2016}
.v6-mem-card-kicker{color:#15653D}
.v6-mem-card-tix{color:#3C5648}
.v6-mem-card-about{color:#25412F}
.v6-mem-card-line{color:#25412F;border-top-color:rgba(12,59,38,.10)}
.v6-mem-card-line i{color:#15653D}
.v6-mem-card-view{color:#1F8F4A;font-weight:700}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 11 — CHÂN TRANG VỀ CHUẨN + CÂN LẠI CỤM ĐẦU TRANG
   A. Chân trang: nền olive gần đen lệch khỏi họ lục bảo của cả trang, và cao
      quá vì padding 64/40 + khoảng cột 44px. Nay: nền lục bảo đậm cùng họ,
      padding gọn, hàng liên kết sát nhau, nhãn nhóm nhỏ lại.
   B. Đầu trang rời rạc: bốn cụm (chữ · cặp nút căn GIỮA ở đáy · chùm biểu
      tượng · thẻ hồ sơ) mỗi cụm một trục. Nay dồn về HAI trục:
        trục trái  — nhãn · tiêu đề · câu dẫn · ô tìm · CẶP NÚT (căn trái)
        trục phải  — màn máy tính, chùm biểu tượng bám góc dưới trái của màn,
                     thẻ hồ sơ bám góc dưới phải, cùng nằm trong một quầng.
   ══════════════════════════════════════════════════════════════════════════ */

/* A. CHÂN TRANG ──────────────────────────────────────────────────────────── */
.v6 .foot{background:#0C3B26;padding-block:clamp(34px,4.4vh,46px) 18px}
.v6 .foot-top{gap:clamp(20px,3cqi,40px);padding-bottom:22px}
.v6 .foot a{color:#D9EBDF}
.v6 .foot a:hover{color:#FFFFFF}
.v6 .foot-col h4,.v6 .foot-col h2{color:#8FE04A;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.v6 .foot-col ul{display:flex;flex-direction:column;gap:8px}
.v6 .foot p{color:#C6DCCD}
.v6 .foot-bottom{margin-top:16px;padding-top:14px;border-top:1px solid rgba(217,235,223,.16);font-size:13px}
.v6 .foot-bottom p,.v6 .foot-legal a{color:#B9D2C1}
.v6 .foot-social-link{padding:8px 14px;border-radius:999px;border:1px solid rgba(217,235,223,.28)}
.v6 .foot-social-link:hover{background:rgba(255,255,255,.10)}

/* B. CỤM ĐẦU TRANG ───────────────────────────────────────────────────────── */
.v6-row-btn{grid-column:1;justify-content:flex-start;gap:14px;margin-top:-6px}
.v6-illus{padding:4% 7% 12% 6%}
.v6-illus::before{left:2%;right:2%;bottom:4%;height:34%;opacity:1;
  background:radial-gradient(closest-side,rgba(31,143,74,.40),transparent)}
.v6-orb-cluster{left:4%;bottom:6%;width:26%;gap:4%;align-items:flex-end}
.v6-orb{max-width:66px}
.v6-orb--2{margin-bottom:10%}
.v6-scene--spn{right:-1%;bottom:2%;width:42%;max-width:306px}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 12 — KHỐI "SẢN PHẨM VÀ DỊCH VỤ" VỀ ĐÚNG TONE
   Ba chỗ lệch: dải nền HỔ PHÁCH trong khi thẻ toàn xanh lục · mảng hình của
   mỗi thẻ một sắc khác nhau (ngọc lam ↔ lục) · nút "Xem chi tiết" đổi sắc
   theo --c của thẻ nên mỗi thẻ một nút một màu.
   Nay: dải nền về họ lục, mảng hình cùng MỘT dải lục bảo (chỉ chênh sắc rất
   nhẹ theo thứ tự thẻ), nút chính một sắc duy nhất.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-block--sl,.v6-block:nth-of-type(3){background:linear-gradient(180deg,#E3F3D8 0%,#CFE9D6 100%)}
.v6-sl-rail>li{--c:#1F8F4A}
.v6-sl-rail>li:nth-child(2n){--c:#17784A}
.v6-sl-rail>li:nth-child(3n){--c:#2A8A58}
.v6-sl-pic{background:linear-gradient(150deg,
  color-mix(in srgb,var(--c) 84%,#FFFFFF) 0%,var(--c) 52%,#0F4D31 100%)}
.v6-sl-pic span{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
.v6-sl-pri{border-left:3px solid #E9A81C;color:#7A4F05}
.v6-sl-pri small{color:#8A5A05}
.v6-sl-btn--solid{background:#15653D;color:#FFFFFF;border-color:#15653D}
.v6-sl-btn--solid:hover{background:#0F4D31;color:#FFFFFF}
.v6-sl-type{background:#15653D;color:#FFFFFF}
.v6-sl-group{border-color:rgba(12,59,38,.18);color:#15653D;background:#FFFFFF}
.v6-sl-ai .avatar{background:#DCF0E4;color:#15653D}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 13 — THẺ SẢN PHẨM: HẠ CHIỀU CAO, IN ĐỦ THÔNG TIN
   · Cột hình 150–210px chiếm gần một phần ba thẻ và kéo thẻ cao lên; nay
     110–140px, thẻ thấp hơn một nấc.
   · Luật màn thấp đang ẨN "Mô tả ngắn" và dòng "chức danh · doanh nghiệp"
     của người đăng → thẻ trông rỗng giữa, thiếu đúng thông tin cần cho
     người xem. Nay in lại: mô tả cắt 3 dòng, người đăng đủ hai dòng.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-sl-card{grid-template-columns:clamp(110px,22%,140px) minmax(0,1fr)}
.v6-sl-text{gap:8px;padding:18px 20px}
.v6-block--sl .v6-sl-open,.v6-sl-card .v6-sl-open{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-size:14px;line-height:1.5;color:#3C5648}
.v6-block--sl .v6-sl-ai small,.v6-sl-card .v6-sl-ai small{display:block;font-size:12px;line-height:1.35;color:#3C5648}
.v6-block--sl .v6-sl-ai b,.v6-sl-card .v6-sl-ai b{font-size:14px}
.v6-sl-pic span{width:clamp(48px,56%,62px)}
.v6-sl-pri{padding:9px 12px;font-size:13.5px;line-height:1.45}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 14 — MÀN MÁY TÍNH SÁNG · VIÊN "HỢP TÁC" CÓ CHỮ · THÊM NHỊP ĐỘNG
   ① Khối mô phỏng giao diện vẫn là mặt TỐI (nền #10231A) trong khi cả trang
      đã sáng → nhìn ra "u ám". Nay là ảnh chụp một giao diện SÁNG: cột kênh
      xanh sương, khung chat trắng, mực đậm — đúng thứ người dùng sẽ thấy khi
      đăng nhập thật.
   ② Ba viên biểu tượng trần khó hiểu. Nay mỗi viên là một viên thuốc có
      CHỮ: cặp ảnh đại diện "Đang kết nối" · cặp tài liệu "Hợp tác" · đồ thị
      "Cùng phát triển" — ba ý của khẩu hiệu, đọc là hiểu.
   ③ Nhịp động: ba viên hiện lần lượt rồi nổi lệch nhịp, vệt sáng lướt mặt
      kính, nút chính có vòng sáng thở, viên thuốc sáng lên theo lượt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① Giao diện mẫu: GIỮ NGUYÊN mặt tối của bản gốc — người dùng chốt
   "để sáng còn rối hơn, style ban đầu ok hơn" (bỏ khối làm sáng của vòng 14). */

/* ② VIÊN CÓ CHỮ ──────────────────────────────────────────────────────────── */
.v6-orb-cluster{left:2%;bottom:5%;width:auto;max-width:56%;flex-direction:column;align-items:flex-start;gap:8px}
.v6-orb{display:inline-flex;align-items:center;gap:9px;width:auto;max-width:none;aspect-ratio:auto;
  padding:8px 16px 8px 10px;border-radius:999px;font-size:13px;
  background:rgba(255,255,255,.94);border:1px solid rgba(12,59,38,.10);
  box-shadow:0 14px 30px -16px rgba(8,40,26,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:v6-orb-show .7s var(--ease-in) both,v6-orb-place 6s ease-in-out infinite}
.v6-orb b{font-weight:700;color:#0B2016;white-space:nowrap}
.v6-orb svg{width:22px;height:22px;flex:none;fill:currentColor}
.v6-orb--1{color:#15653D;margin-left:0;animation-delay:.15s,-.4s}
.v6-orb--2{color:#1F8F4A;margin-left:26px;animation-delay:.3s,-2.1s}
.v6-orb--3{color:#B07908;margin-left:52px;animation-delay:.45s,-3.6s}
.v6-orb-ng{display:flex;flex:none}
.v6-orb-ng .avatar{--c:26px;font-size:10px;font-style:normal;border:2px solid #FFFFFF}
.v6-orb-ng .avatar:last-child{margin-left:-9px}
@keyframes v6-orb-show{from{opacity:0;translate:-14px 6px}to{opacity:1;translate:0 0}}
@keyframes v6-orb-place{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ③ NHỊP ĐỘNG ────────────────────────────────────────────────────────────── */
@keyframes v6-ring-breath{0%{box-shadow:0 0 0 0 rgba(31,143,74,.45)}70%{box-shadow:0 0 0 16px rgba(31,143,74,0)}100%{box-shadow:0 0 0 0 rgba(31,143,74,0)}}
.v6-row-btn .v6-btn-main{animation:v6-ring-breath 3.2s ease-out infinite}
.v6-head-text>*{animation:v6-orb-show .8s var(--ease-in) both}
.v6-head-text>*:nth-child(1){animation-delay:.05s}
.v6-head-text>*:nth-child(2){animation-delay:.14s}
.v6-head-text>*:nth-child(3){animation-delay:.23s}
.v6-head-text>*:nth-child(4){animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .v6-orb,.v6-row-btn .v6-btn-main,.v6-head-text>*{animation:none}
}


/* VÒNG 14b đã bỏ cùng lý do trên. */


/* VÒNG 15 — ba viên "hợp tác" bị ẩn dưới 1024px (thừa hưởng luật ẩn nhân vật
   vẽ tay cũ). Viên thuốc nhỏ và xếp bậc thang nên vẫn vừa từ 768px trở lên;
   dưới 768 cả cụm minh hoạ đã ẩn nên không cần luật riêng. */
@container app (min-width:768px){
  .v6-orb-cluster{display:flex!important}
}
@container app (max-width:1023px){
  .v6-orb-cluster{left:1%;bottom:3%;max-width:64%}
  .v6-orb{padding:6px 13px 6px 8px;font-size:12px}
  .v6-orb--2{margin-left:18px}
  .v6-orb--3{margin-left:36px}
}


/* VÒNG 16 — bỏ chữ trong ba viên (người dùng: "quá nhiều text không cần
   thiết"). Viên trở lại dạng vuông bo tròn chỉ có biểu tượng / cặp ảnh. */
.v6-orb{padding:0;width:58px;height:58px;aspect-ratio:1;border-radius:20px;justify-content:center}
.v6-orb b{display:none}
.v6-orb svg{width:26px;height:26px}
.v6-orb-ng .avatar{--c:24px}
@container app (max-width:1023px){
  .v6-orb{width:50px;height:50px;padding:0}
  .v6-orb svg{width:22px;height:22px}
}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 17 — NỀN "CỰC QUANG" ĐỘNG + PHỐI MÀU SỐNG HƠN
   Không thêm phần tử nào (khỏi đụng bố cục): nền động làm bằng CHÍNH các
   lớp background của khối — hai quầng màu trôi chậm trên dải nền sẵn có.
   Mỗi khối một cặp sắc riêng nhưng cùng độ nhạt, nên vẫn hoà.
   Kèm: viên tròn trang trí phát sáng, tấm kính nở quầng khi rê, nút chính
   có vệt sáng lướt, chấm nền lấm tấm ở đầu trang.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes v6-aurora{
  0%{background-position:0% 0%,100% 100%,0 0}
  50%{background-position:26% 34%,64% 58%,0 0}
  100%{background-position:0% 0%,100% 100%,0 0}}
.v6-block{background-repeat:no-repeat;background-size:150% 150%,130% 130%,100% 100%;
  animation:v6-aurora 30s ease-in-out infinite}
.v6-block:nth-of-type(1){background-image:
  radial-gradient(closest-side,rgba(31,143,74,.34),transparent),
  radial-gradient(closest-side,rgba(47,169,224,.30),transparent),
  linear-gradient(180deg,#CFE9D6 0%,#BFE0EE 100%)}
.v6-block:nth-of-type(2){background-image:
  radial-gradient(closest-side,rgba(47,169,224,.34),transparent),
  radial-gradient(closest-side,rgba(143,224,74,.34),transparent),
  linear-gradient(180deg,#BFE0EE 0%,#D7EAB8 100%)}
.v6-block:nth-of-type(3),.v6-block--sl{background-image:
  radial-gradient(closest-side,rgba(233,168,28,.30),transparent),
  radial-gradient(closest-side,rgba(31,143,74,.32),transparent),
  linear-gradient(180deg,#E3F3D8 0%,#CFE9D6 100%)}
.v6-block:nth-of-type(4){background-image:
  radial-gradient(closest-side,rgba(31,143,74,.32),transparent),
  radial-gradient(closest-side,rgba(47,169,224,.30),transparent),
  linear-gradient(180deg,#C8E7D4 0%,#BFE0EE 100%)}
.v6-block:nth-of-type(5){background-image:
  radial-gradient(closest-side,rgba(143,224,74,.34),transparent),
  radial-gradient(closest-side,rgba(233,168,28,.28),transparent),
  linear-gradient(180deg,#D7EAB8 0%,#FBE4B4 100%)}

/* Đầu trang: thêm lớp chấm lấm tấm rất nhạt cho nền đỡ phẳng. */
.v6-star{opacity:.5;background-image:
  radial-gradient(1.6px 1.6px at 12% 22%,rgba(31,143,74,.55) 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 34% 68%,rgba(233,168,28,.55) 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 58% 18%,rgba(47,169,224,.50) 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 76% 54%,rgba(31,143,74,.45) 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 90% 30%,rgba(143,224,74,.60) 50%,transparent 51%)}

/* Viên tròn trang trí: phát sáng và thở. */
@keyframes v6-obj-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}
.v6-place-obj{filter:drop-shadow(0 12px 26px rgba(31,143,74,.45));animation:v6-obj-breath 9s ease-in-out infinite}
.v6-place-obj--2{animation-delay:-2s}
.v6-place-obj--4{animation-delay:-4s}
.v6-place-obj--5{animation-delay:-6s}

/* Tấm kính: quầng màu nở ra khi rê chuột. */
.v6-glass{transition:box-shadow .45s var(--ease-in)}
.v6-glass:hover{box-shadow:0 0 0 1px rgba(31,143,74,.28),0 40px 84px -34px rgba(8,40,26,.50),
  0 0 70px -20px rgba(31,143,74,.40)}

/* Nút chính: vệt sáng lướt qua. */
.btn.v6-btn-main{position:relative;overflow:hidden}
.btn.v6-btn-main::after{content:"";position:absolute;top:0;left:0;width:42%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:v6-scan 5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .v6-block,.v6-place-obj{animation:none}
  .btn.v6-btn-main::after{display:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 18 — CHÂN TRANG GỌN VÀ NỐI TONE
   · Cao vì ba chỗ cộng lại: padding khối, khoảng dòng của <li> và cỡ chữ.
     Nay: padding 26/12, dòng liên kết 14.5px/1.25, khe 6px, nhãn nhóm
     margin dưới 10px → thấp hơn khoảng một phần ba.
   · Lệch tone vì dải nền khối cuối kết thúc ở HỔ PHÁCH rồi cắt thẳng vào
     lục bảo đậm. Nay khối cuối kết ở xanh sương, chân trang có vạch chuyển
     sắc ở mép trên → hai mảng nối liền.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-block:nth-of-type(5){background-image:
  radial-gradient(closest-side,rgba(143,224,74,.30),transparent),
  radial-gradient(closest-side,rgba(31,143,74,.26),transparent),
  linear-gradient(180deg,#D7EAB8 0%,#CDE7D4 100%)}
.v6 .foot{position:relative;padding-block:26px 12px}
.v6 .foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#1F8F4A,#8FE04A 52%,#E9A81C)}
.v6 .foot-top{padding-bottom:16px;gap:clamp(18px,2.6cqi,32px)}
.v6 .foot-col h4,.v6 .foot-col h2{margin-bottom:10px}
.v6 .foot-col ul{gap:6px}
.v6 .foot-col li{line-height:1.25}
.v6 .foot-col a{font-size:14.5px}
.v6 .col-head p{font-size:14px;line-height:1.5;margin-block:8px 12px;max-width:34ch}
.v6 .col-head .brand img{width:34px;height:34px}
.v6 .col-head .brand b{font-size:15.5px}
.v6 .foot-social{gap:8px}
.v6 .foot-social-link{padding:6px 13px;font-size:13.5px}
.v6 .foot-bottom{margin-top:12px;padding-top:12px;font-size:12.5px}
.v6 .foot-legal ul{gap:16px}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 19 — THẺ XEM NHANH: TRẮNG TRÊN TRẮNG NÊN MẤT KHUNG
   Đổi mặt trắng ở vòng 10 chữa được tương phản chữ, nhưng thẻ lại đặt trên
   cảnh bạc hà rất sáng → không thấy mép, đọc ra là "nhạt nhoà". Nay thẻ có
   khung rõ: vạch màu 4px ở mép trên, viền lục 1.5px, bóng sâu hơn, dải nhãn
   nền bạc hà, kẻ chỉ đậm hơn một nấc.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-mem-card{background:#FFFFFF;border:1.5px solid rgba(31,143,74,.30);border-top:4px solid #1F8F4A;
  box-shadow:0 30px 64px -22px rgba(8,40,26,.55),0 0 0 6px rgba(255,255,255,.55)}
.v6-mem-card::before{border-top-color:#FFFFFF}
.v6-mem-card-kicker{display:inline-block;margin-bottom:6px;padding:4px 10px;border-radius:999px;
  background:#EFF9E9;color:#15653D}
.v6-mem-card b{font-size:17px;color:#0B2016}
.v6-mem-card-tix{color:#3C5648;font-weight:600}
.v6-mem-card-about{color:#25412F}
.v6-mem-card-line{border-top:1px solid rgba(12,59,38,.16)}
.v6-mem-card-line i{color:#15653D;font-weight:700}
.v6-mem-card-view{color:#1F8F4A}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 20 — TRẢ LẠI NHÂN VẬT HỢP TÁC (người dùng chốt), PHỐI MÀU TƯƠI
   Ba viên biểu tượng bỏ; dùng lại đúng cảnh gốc: hai doanh nhân bắt tay,
   một người reo mừng, pháo giấy bung. Đổi bảng màu sang họ lục bảo tươi:
   áo lục bảo · lục sáng · hổ phách, quần xanh rừng, da kem, quầng sáng ở
   chỗ bắt tay. Nhịp bắt tay và pháo giấy giữ như gốc (đã chậm lại ở vòng 2).
   ══════════════════════════════════════════════════════════════════════════ */
.v6-nv--scene{left:-1%;bottom:0;width:29%;filter:drop-shadow(0 16px 30px rgba(8,40,26,.30))}
.v6{--v6-light:#FCEEDA;--v6-blurple:#1F8F4A;--v6-blurple-deep:#15653D;--v6-blurple-pale:#8FE04A;
  --v6-fuchsia:#F2A93B;--v6-purple:#2FA9A0;--v6-blue:#2FA9E0;--v6-leaf:#3FCB6E;--v6-orange:#E9A81C}
.v6-nv-halo{opacity:.35}
.v6-orb-cluster,.v6-orb{display:none!important}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 21 — MENU KIỂU HIỆN ĐẠI
   Bản trước: viên đặc lục bảo cho mục đang xem, nặng và to nhất trên thanh.
   Bản này theo lối thanh kính hiện đại:
     · thanh nổi trên nền, kính mờ 18px, vành 1px + vệt sáng trong lòng
     · mục đang xem KHÔNG tô đặc: mực đậm + gạch chân 3px bo tròn
     · rê chuột: viên bạc hà rất nhạt, không nhấc chữ (đỡ giật)
     · nút Tham gia: chuyển sắc lục bảo → chanh, bóng màu, mũi tên trượt
     · VI/EN thành cặp nút phân đoạn nhỏ trong một viên kính
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .nav{padding-block:12px}
.v6 .nav-menu{gap:2px;padding:4px;border-radius:18px;
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px -18px rgba(8,40,26,.40);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.v6 .nav-menu a{position:relative;padding:10px 16px;border-radius:14px;font-size:15px;font-weight:600;
  color:#25412F;letter-spacing:-.01em;transform:none!important;
  transition:background-color .2s var(--ease-btn),color .2s var(--ease-btn)}
.v6 .nav-menu a:hover{background:rgba(31,143,74,.10);color:#15653D}
.v6 .nav-menu a[aria-current],.v6 .nav-menu a.active{background:transparent;color:#0B2016;box-shadow:none}
.v6 .nav-menu a[aria-current]::after,.v6 .nav-menu a.active::after{display:block;content:"";
  position:absolute;left:16px;right:16px;bottom:5px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,#1F8F4A,#8FE04A)}
.v6 .nav-menu a::after{transition:opacity .22s var(--ease-btn)}

.v6 .nav .btn--outline-white{border-radius:14px;border-color:rgba(12,59,38,.18);color:#0C3B26;font-weight:600}
.v6 .nav .btn--outline-white:hover{background:rgba(255,255,255,.75)}
.v6 .nav .btn--gold{border-radius:14px;font-weight:700;
  background:linear-gradient(120deg,#1F8F4A,#3FCB6E 60%,#8FE04A);color:#FFFFFF;
  box-shadow:0 12px 26px -12px rgba(31,143,74,.75)}
.v6 .nav .btn--gold:hover{background:linear-gradient(120deg,#15653D,#2FA958 60%,#7CD13C);
  transform:translateY(-1px);box-shadow:0 16px 32px -12px rgba(31,143,74,.85)}

.v6 .nav .team{padding:3px;border-radius:999px;background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.v6 .nav .team button{border:0;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:#3C5648;background:transparent}
.v6 .nav .team button[aria-pressed="true"]{background:#1F8F4A;color:#FFFFFF}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 22 — THẺ XEM NHANH: MẶT TỐI VÀ DÙNG ĐƯỢC
   ① Mặt trắng trên cảnh bạc hà sáng vẫn khó đọc → đổi sang MẶT TỐI (lục
      rừng gần đen), chữ trắng, nhãn chanh, kẻ chỉ mờ. Đo: trắng trên
      #0A1C12 = 16.8 : 1 · chanh #A9D83F = 9.4 : 1.
   ② Trước đây thẻ chỉ để NGÓ (pointer-events tắt, khe 10px giữa dòng và
      thẻ làm mất hover khi đưa chuột vào). Nay:
        · pointer-events:auto — đưa chuột vào thẻ đọc được, bấm được
        · một "cầu nối" trong suốt 16px lấp khe, chuột đi qua không mất hover
        · chậm 160ms mới ẩn, đủ thời gian đưa chuột sang
        · "Xem hồ sơ →" sáng lên và trượt khi rê (cả dòng là một liên kết
          tới hồ sơ nên bấm chỗ nào trong thẻ cũng mở đúng hồ sơ)
   ══════════════════════════════════════════════════════════════════════════ */
.v6-mem-card{background:linear-gradient(160deg,#10301F 0%,#0A1C12 100%);
  border:1px solid rgba(143,224,74,.28);border-top:4px solid #8FE04A;
  box-shadow:0 30px 64px -20px rgba(3,18,10,.70),0 0 0 6px rgba(255,255,255,.35);
  color:#FFFFFF;pointer-events:auto;
  transition:opacity .22s var(--ease-in),visibility .22s,transform .28s var(--ease-in);
  transition-delay:0s}
.v6-mem-line .v6-mem-card{transition-delay:.16s}
.v6-mem-line:hover .v6-mem-card,.v6-mem-line:focus-visible .v6-mem-card{transition-delay:0s}
.v6-mem-card::before{border-top-color:#0A1C12}
.v6-mem-list>li:nth-child(-n+3) .v6-mem-card::before{border-bottom-color:#10301F;border-top-color:transparent}
/* cầu nối trong suốt lấp khe 10px giữa dòng và thẻ */
.v6-mem-card::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.v6-mem-list>li:nth-child(-n+3) .v6-mem-card::after{top:auto;bottom:100%}
.v6-mem-card-kicker{background:rgba(143,224,74,.16);color:#C8EE7E}
.v6-mem-card b{color:#FFFFFF}
.v6-mem-card-tix{color:#CFE3D6}
.v6-mem-card-about{color:#E6F1E8}
.v6-mem-card-line{border-top-color:rgba(255,255,255,.14);color:#E6F1E8}
.v6-mem-card-line i{color:#A9D83F}
.v6-mem-card-view{display:inline-flex;align-items:center;gap:6px;color:#A9D83F;font-weight:700;
  transition:gap .2s var(--ease-btn),color .2s}
.v6-mem-line:hover .v6-mem-card-view{gap:12px;color:#C8EE7E}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 23 — MENU TRỞ LẠI BẢN TRƯỚC · NHÂN VẬT SÁNG LÊN
   ① Menu: người dùng chốt bản trước đẹp hơn → mục đang xem tô ĐẶC lục bảo,
      bo viên, bỏ gạch chân; thanh kính nhẹ như bản vòng 11.
   ② Nhân vật u ám vì ba mảng lớn nhất (quần · giày · tóc) lấy --v6-dot /
      --v6-depth / --v6-void, mà ba token đó là màu nền tối của trang (olive
      gần đen). Nay khai lại NGAY TRÊN thẻ SVG (không đụng nền trang):
      quần lục trung, giày lục đậm, thêm quầng nắng ấm phía sau và bóng đổ
      mềm hơn.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① MENU ─────────────────────────────────────────────────────────────────── */
.v6 .nav-menu{gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.66);border:1px solid rgba(12,59,38,.08);
  box-shadow:0 8px 22px -16px rgba(8,40,26,.34);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.v6 .nav-menu a{padding:10px 17px;border-radius:999px;font-size:15px;font-weight:600;color:#25412F}
.v6 .nav-menu a:hover{background:#FFFFFF;color:#15653D}
.v6 .nav-menu a[aria-current],.v6 .nav-menu a.active{background:#1F8F4A;color:#FFFFFF;
  box-shadow:0 10px 22px -12px rgba(31,143,74,.80)}
.v6 .nav-menu a[aria-current]::after,.v6 .nav-menu a.active::after{display:none}

/* ② NHÂN VẬT ─────────────────────────────────────────────────────────────── */
.v6-nv{--v6-dot:#37795A;--v6-depth:#1F5A3C;--v6-void:#1B4E34;
  --v6-light:#FDF1DE;--v6-blurple:#1F8F4A;--v6-blurple-deep:#15653D;
  --v6-blurple-pale:#A9E05C;--v6-fuchsia:#F4B652;--v6-purple:#2FA9A0;
  --v6-blue:#3FB6E8;--v6-leaf:#4FD97C;--v6-orange:#F2B417}
.v6-nv--scene{left:-1%;bottom:0;width:29%;filter:drop-shadow(0 14px 26px rgba(8,40,26,.22))}
.v6-nv-head{stroke:#1F5A3C;stroke-width:2.2}
.v6-illus::after{background:radial-gradient(closest-side,rgba(242,180,23,.34),transparent)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 24 — THẺ XEM NHANH BỊ CHÂN TRANG ĐÈ (lỗi xếp lớp, không phải lỗi px)
   Thẻ có z-index:30 nhưng tổ tiên .v6-scene-img--leaf là position:relative
   z-index:3 → thẻ bị chặn ở nấc 3, trong khi chân trang (đặc, nằm sau trong
   DOM) vẽ lên trên. Ba dòng đầu mở XUỐNG nên phần đáy thẻ — hai dòng "Đang
   cung cấp / Đang tìm" và liên kết "Xem hồ sơ" — bị che và không bấm được.
   CHỮA Ở NGỌN NGUỒN: khi có dòng đang được rê/tiêu điểm thì nâng cả chuỗi
   tổ tiên lên trên chân trang, và ghim chân trang ở nấc 0.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .foot{z-index:0}
.v6-block:has(.v6-mem-line:hover),.v6-block:has(.v6-mem-line:focus-visible){position:relative;z-index:80}
.v6-glass:has(.v6-mem-line:hover),.v6-glass:has(.v6-mem-line:focus-visible){position:relative;z-index:80}
.v6-scene-img:has(.v6-mem-line:hover),.v6-scene-img:has(.v6-mem-line:focus-visible){z-index:80}
.v6-mem:has(.v6-mem-line:hover),.v6-mem:has(.v6-mem-line:focus-visible){position:relative;z-index:80}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 25 — THẺ HỒ SƠ NỔI KHÔNG ĐƯỢC ĐÈ LÊN MÀN MÁY TÍNH
   Vòng 11 đặt thẻ ở right:-1% nên nó nằm TRONG cột tin nhắn của màn; cảnh 2,
   3, 4 có nội dung chạm nửa phải → bị che sạch (cảnh 4: cả thẻ thành viên
   Phạm Thị D và hàng cảm xúc 100% nằm dưới thẻ).
   CHỮA THEO RÀNG BUỘC: đẩy thẻ RA NGOÀI bezel (right:-11%) và chừa đúng
   phần lề đó trong .v6-illus để không bị cắt; thu bớt bề rộng thẻ. Như
   vậy không cảnh nào còn chữ nằm dưới thẻ.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-illus{padding-right:11%}
.v6-scene--spn{right:-11%;bottom:4%;width:36%;max-width:268px}
.v6-spn{padding:12px 14px 12px 12px;column-gap:11px}
.v6-spn .avatar{--c:50px}
.v6-spn b{font-size:14px}
.v6-spn small{font-size:11.5px}
.v6-spn-facts i{padding:2px 8px;font-size:10.5px}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 26 — MENU CĂN TOP · CHÙM CHÂN DUNG THAY NHÂN VẬT VẼ TAY
   ① Thanh điều hướng thôi không kéo lên đè đầu trang (.screen-head âm lề) — nay
      nằm đúng trên cùng theo dòng chảy, đầu trang bắt đầu ngay dưới nó.
   ② Nhân vật vẽ tay bị chê xấu hai lượt. Nay dùng ĐÚNG bộ ảnh đại diện có
      sẵn của dự án (assets/img/dd-*.svg, đã đổi gradient sang họ thương
      hiệu): ba chân dung tròn xếp chồng nhẹ, vành trắng, một huy hiệu
      "cộng đồng" ở góc. Cùng ngôn ngữ hình với ảnh đại diện khắp trang.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .screen-head{margin-top:0}
.v6-head{padding-top:clamp(12px,3vh,40px)}

.v6-ng{position:absolute;left:0;bottom:4%;width:34%;display:flex;align-items:flex-end;animation:none}
.v6-ng-fld{position:relative;flex:none;width:34%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:3px solid #FFFFFF;box-shadow:0 16px 34px -14px rgba(8,40,26,.45);
  animation:v6-ng-place 6.5s ease-in-out infinite}
.v6-ng-fld img{width:100%;height:100%;object-fit:cover}
.v6-ng-fld--1{animation-delay:-.3s}
.v6-ng-fld--2{margin-left:-9%;margin-bottom:9%;width:38%;z-index:2;animation-delay:-2.2s}
.v6-ng-fld--3{margin-left:-9%;animation-delay:-4.1s}
.v6-ng-on{position:absolute;right:4%;top:-6%;width:24%;aspect-ratio:1;border-radius:34%;
  display:grid;place-items:center;color:#15653D;
  background:linear-gradient(150deg,#FFFFFF,#EAF7DC);border:1px solid rgba(12,59,38,.10);
  box-shadow:0 14px 28px -14px rgba(8,40,26,.40);animation:v6-ng-place 7.5s ease-in-out infinite -1s}
.v6-ng-on svg{width:52%;height:52%;fill:currentColor}
@keyframes v6-ng-place{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.v6-ng-fld,.v6-ng-on{animation:none}}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 27 — THẺ HỒ SƠ THÔI ĐÈ LÊN MÀN (sửa ràng buộc, không sửa toạ độ)
   Nguyên nhân: thẻ là position:absolute nằm trong hộp của màn máy tính, mà
   bốn cảnh chat thay nhau chạy tới nửa phải → đặt ở đâu trong bezel cũng có
   cảnh bị che; đẩy ra ngoài thì lại lòi khỏi khung .app.
   Chữa dứt: thẻ về DÒNG CHẢY, đứng ngay DƯỚI màn và căn phải. Không còn
   khả năng đè, cũng không lòi khung — hai ràng buộc thoả cùng lúc.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-illus{padding-right:7%}
.v6-scene--spn{position:static;width:100%;max-width:none;display:flex;justify-content:flex-end;
  margin-top:14px;z-index:auto}
.v6-spn{width:min(286px,100%);animation:none}

/* VÒNG 27b — chùm chân dung lùi trái để không chạm mép thẻ hồ sơ (đo được
   15×12px giao nhau ở khổ 1440). */
.v6-ng{left:-5%;bottom:0;width:29%}

/* VÒNG 27c — khai kích thước TUYỆT ĐỐI cho chùm chân dung: bản trước dùng
   % của một hộp không đặt chiều cao nên khi CSS chưa kịp áp (hoặc ở khổ lạ)
   ảnh bung ra cỡ gốc 200px, phá cả màn đầu. */
.v6-ng{left:0;bottom:0;width:auto;max-width:none;display:flex;align-items:flex-end;gap:0}
.v6-ng-fld{width:64px;height:64px;flex:0 0 64px;aspect-ratio:auto}
.v6-ng-fld--2{width:72px;height:72px;flex:0 0 72px;margin-left:-14px;margin-bottom:12px}
.v6-ng-fld--3{width:64px;height:64px;flex:0 0 64px;margin-left:-14px}
.v6-ng-on{width:38px;height:38px;right:-8px;top:-14px;border-radius:12px}
.v6-ng-fld img{width:100%;height:100%;display:block}

/* VÒNG 27d — huy hiệu cộng đồng dời sang mép TRÁI của chùm: ở mép phải nó
   giao 30×21px với thẻ hồ sơ (đo ở khổ 1440). */
.v6-ng-on{right:auto;left:-12px;top:-16px}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 28 — BA LỖI BÁO LẠI, SỬA TẬN GỐC
   ① Chùm chân dung: BỎ HẲN. Kích thước % của một hộp không có chiều cao nên
      dễ bung cỡ gốc; trả lại đúng cảnh nhân vật gốc (đã phối màu tươi ở
      vòng 23) — người dùng chốt "không nghĩ ra thì để như ban đầu".
   ② Thẻ hồ sơ bị cắt mép phải: .v6-illus có padding-right 7% (thêm từ
      hồi thẻ còn đè), cộng với thẻ căn phải nên thẻ tràn qua mép cột rồi bị
      khung cắt. Bỏ padding đó, thẻ căn phải theo đúng mép màn máy tính.
   ③ Menu để lại dải trắng thừa trên đầu: vòng 26 bỏ lề âm của .screen-head nên
      đầu trang tụt xuống dưới thanh điều hướng. Trả lại lề âm như gốc —
      thanh nằm trong suốt ĐÈ lên đầu trang, không sinh dải trống.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-ng,.v6-ng-fld,.v6-ng-on{display:none!important}
.v6 .screen-head{margin-top:calc(-1 * var(--height-nav))}
.v6-head{padding-top:calc(var(--height-nav) + clamp(10px,3vh,40px))}
.v6-illus{padding-right:0}
.v6-scene--spn{justify-content:flex-end;margin-top:12px;padding-right:2%}
.v6-spn{width:min(280px,92%)}

/* VÒNG 29 — MENU CAO BẰNG LOGO VÀ NÚT
   Cả ba cụm đã căn giữa trục dọc (tâm 44px), nhưng viên kính của menu cao
   57px trong khi logo 40 và nút 34 → nhìn ra "menu bị đẩy lên". Thu viên về
   40px: đệm 3px, mục 8px/15px, chữ 14.5px.
*/
.v6 .nav-menu{padding:3px;border-radius:999px}
.v6 .nav-menu a{padding:8px 15px;font-size:14.5px}

/* VÒNG 30 — thẻ hồ sơ căn GIỮA dưới màn, không căn phải nữa: căn phải làm
   mép thẻ luôn sát mép cột minh hoạ, chỉ cần khung .app hẹp đi vài px là bị
   cắt. Căn giữa trong lòng cột thì luôn còn lề hai bên. */
.v6-scene--spn{justify-content:center;padding-inline:4%;padding-right:4%}
.v6-spn{width:min(280px,100%);margin-right:0}

/* VÒNG 30b — nhân vật lùi hẳn sang trái/xuống dưới để không giao với thẻ hồ
   sơ đang căn giữa (đo được giao nhau ở cả bốn khổ 1280→1920). */
.v6-nv--scene{left:-13%;bottom:-3%;width:25%}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 31 — THANH ĐIỀU HƯỚNG: BỎ VIÊN KÍNH, CÙNG MỘT CHIỀU CAO
   Viên kính bọc menu là thứ gây cảm giác "menu bị đẩy lên": nó cao hơn logo
   và nút, lại có bóng nên nhìn như một tầng riêng. Bỏ hẳn viên bọc — menu
   là dãy liên kết trần, cùng chiều cao 36px với hai nút bên phải.
   Nút "Tham gia": bỏ chuyển sắc (hai đầu sắc lệch nhau nên nhìn không cân),
   dùng một sắc lục bảo đặc, cao đúng 36px như "Đăng nhập".
   VI/EN: mỗi nút cao 28px, chữ căn giữa cả trên–dưới và trái–phải.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .nav>.container,.v6 .nav-vacant{align-items:center}
.v6 .nav-menu{padding:0;gap:6px;background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;align-items:center}
.v6 .nav-menu a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;
  font-size:15px;font-weight:600;color:#25412F}
.v6 .nav-menu a:hover{background:rgba(31,143,74,.10);color:#15653D}
.v6 .nav-menu a[aria-current],.v6 .nav-menu a.active{background:#1F8F4A;color:#FFFFFF;box-shadow:none}

.v6 .nav .btn--outline-white,.v6 .nav .btn--gold{display:inline-flex;align-items:center;height:36px;
  padding:0 18px;border-radius:999px;font-size:14.5px;line-height:1}
.v6 .nav .btn--gold{background:#1F8F4A;color:#FFFFFF;font-weight:700;
  box-shadow:0 8px 18px -10px rgba(31,143,74,.70)}
.v6 .nav .btn--gold:hover{background:#15653D;transform:none;box-shadow:0 10px 22px -10px rgba(31,143,74,.80)}
.v6 .nav .btn--outline-white{background:rgba(255,255,255,.72);border:1px solid rgba(12,59,38,.16);color:#0C3B26}

.v6 .nav .team{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 4px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(12,59,38,.12)}
.v6 .nav .team button{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:38px;
  padding:0 10px;border-radius:999px;font-size:13px;font-weight:700;line-height:1;border:0;background:transparent;color:#3C5648}
.v6 .nav .team button[aria-pressed="true"]{background:#1F8F4A;color:#FFFFFF}

/* Thẻ hồ sơ: căn TRÁI trong cột minh hoạ — mép trái cột luôn nằm trong khung
   nên thẻ không thể bị cắt ở bất kỳ khổ nào (căn phải/căn giữa vẫn bị cắt khi
   cột minh hoạ tràn khỏi cột lưới ở một số tỉ lệ màn). */
.v6-scene--spn{justify-content:flex-start;padding-inline:0;padding-left:6%;padding-right:0}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 32 — BA VIỆC
   ① HỘP "CẦN ĐĂNG NHẬP" nền gần đen, chữ nút trùng màu nền. NGUYÊN NHÂN đo
      được: hộp thoại do _shell.js chèn NGAY TRONG khối thành viên, nên thừa
      hưởng --white:#0B1220 của luật "mặt sáng" (--white ở đó là màu MỰC).
      Chữa: khai lại toàn bộ token màu NGAY TRÊN hộp thoại, hộp không còn phụ
      thuộc chỗ nó được chèn.
   ② Tiêu đề "CÙNG KẾT NỐI. CÙNG PHÁT TRIỂN.": dòng hai đổi từ chữ xanh +
      vạch mờ sang MẢNG BÚT DẠ chanh bao quanh chữ, chữ lục rừng đặt trên —
      bắt mắt hơn mà vẫn 8.9 : 1.
   ③ Menu và thẻ hồ sơ: gắn ?v= vào link CSS để trình duyệt thôi dùng bản
      cache cũ (người dùng báo "không thấy thay đổi gì" ba lượt liền trong
      khi phép đo trên máy đều đúng).
   ══════════════════════════════════════════════════════════════════════════ */

/* ① HỘP CẦN ĐĂNG NHẬP ────────────────────────────────────────────────────── */
.dialog--access,.dialog--access *{
  --white:#FFFFFF;--ink:#0B2016;--gray:#3C5648;--gray-pale:#5A7466;
  --green:#15653D;--green-sub:#1F8F4A;--green-deep:#0C3B26;--green-light:#8FE04A;
  --cream:#F1F9EC;--border:#DCE9D6;--bird:#F7FBF4}
.dialog--access{background:rgba(6,24,15,.58)}
.dialog--access .body-dlg{background:#FFFFFF;box-shadow:0 44px 96px -28px rgba(3,18,10,.62)}
.dialog--access .dlg-text{background:#FFFFFF;color:#0B2016}
.dialog--access .dlg-text h2{color:#0B2016}
.dialog--access .dlg-text>p:not(.kicker-dlg):not(.add-dlg){color:#3C5648}
.dialog--access .kicker-dlg{color:#15653D}
.dialog--access .kicker-dlg::before{background:#1F8F4A}
.dialog--access .dlg-pic{background:linear-gradient(150deg,#1F8F4A 0%,#15653D 58%,#0C3B26 100%)}
.dialog--access .btn--main,.dialog--access .btn--gold{background:#1F8F4A;color:#FFFFFF;border:0}
.dialog--access .btn--main:hover,.dialog--access .btn--gold:hover{background:#15653D}
.dialog--access .btn--sub{background:#FFFFFF;color:#15653D;border:1px solid #CFE3D6}
.dialog--access .btn--sub:hover{background:#F1F9EC;color:#0C3B26}
.dialog--access .add-dlg{color:#3C5648;border-top:1px solid #E6EFE4}
.dialog--access .add-dlg a{color:#15653D;font-weight:700}
.dialog--access .dlg-line{background:#F1F9EC;color:#0B2016}
.dialog--access .dlg-line:hover{background:#DCE9D6}

/* ② TIÊU ĐỀ ĐẦU TRANG ───────────────────────────────────────────────────── */
.v6-h1{color:#0B2016}
.v6-h1 em{position:relative;display:inline-block;padding:0 .16em .02em;color:#0C3B26;
  -webkit-text-fill-color:#0C3B26;background:none;text-shadow:none;animation:none;z-index:0}
.v6-h1 em::before{content:"";position:absolute;left:0;right:0;top:.12em;bottom:.1em;z-index:-1;
  border-radius:.14em;background:linear-gradient(100deg,#B7EC63 0%,#8FE04A 45%,#E9F7A3 100%)}
.v6-h1 em::after{content:none}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 33 — TRẢ LẠI ĐÚNG STYLE MENU (vòng 31 đã đổi style trong khi yêu cầu
   chỉ là CĂN HÀNG). Viên kính bọc menu trở lại y như trước; việc duy nhất
   giữ lại từ vòng 31 là CHIỀU CAO bằng nhau: mục menu 36px nên viên kính
   cao 44px, ngang hàng logo (40) và hai nút (36), cùng tâm dọc.
   Không đổi thêm bất cứ thứ gì khác.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .nav-menu{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.66);border:1px solid rgba(12,59,38,.08);
  box-shadow:0 8px 22px -16px rgba(8,40,26,.34);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.v6 .nav-menu a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
  font-size:15px;font-weight:600;color:#25412F}
.v6 .nav-menu a:hover{background:#FFFFFF;color:#15653D}
.v6 .nav-menu a[aria-current],.v6 .nav-menu a.active{background:#1F8F4A;color:#FFFFFF;
  box-shadow:0 10px 22px -12px rgba(31,143,74,.80)}


/* VÒNG 34 — TRẢ NHÂN VẬT VỀ ĐÚNG VỊ TRÍ GỐC (left:-5% · bottom:0 · 34%).
   Yêu cầu chỉ là đẩy THẺ HỒ SƠ cho khỏi bị cắt, không phải dời nhân vật. */
.v6-nv--scene{left:-5%;bottom:0;width:34%}


/* VÒNG 35 — THẺ HỒ SƠ: căn PHẢI trong cột minh hoạ nhưng chừa 24px cứng.
   Căn trái (vòng 31) làm thẻ chạy vào đúng chỗ nhân vật đứng → giao nhau.
   Đo ở 1440: cột minh hoạ hết ở 1416 → thẻ 1112–1392 (trong khung), nhân vật
   hết ở 1072 → không còn cặp nào giao nhau. */
.v6-scene--spn{justify-content:flex-end;padding-left:0;padding-right:24px}
.v6-spn{width:min(280px,100%)}


/* VÒNG 36 — BỎ MẢNG BÚT DẠ Ở "CÙNG PHÁT TRIỂN."
   Yêu cầu là đổi style/phối màu cho hấp dẫn, không phải quẹt một mảng nền.
   Nay: chữ đặc chuyển sắc trong họ lục bảo → chanh (không nền, không bóng),
   đúng kiểu chữ chuyển sắc gọn gàng. Dòng một giữ mực đậm. */
.v6-h1 em{display:inline;padding:0;background:linear-gradient(96deg,#15653D 0%,#1F8F4A 42%,#4FA83C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;animation:none}
.v6-h1 em::before,.v6-h1 em::after{content:none;display:none}


/* VÒNG 37 — THẺ SẢN PHẨM tràn 28–48px: mô tả 3 dòng + người đăng hai dòng
   (thêm ở vòng 13) vượt chiều cao cố định của thẻ trong băng. Cắt mô tả về
   2 dòng và thu khe, không đổi chiều cao thẻ. */
.v6-block--sl .v6-sl-open,.v6-sl-card .v6-sl-open{-webkit-line-clamp:2}
.v6-sl-text{gap:7px;padding:16px 18px}
.v6-sl-pri{padding:8px 11px;font-size:13px}


/* VÒNG 38 — THẺ SẢN PHẨM: hàng nút bị cắt 8px.
   Vòng 37 viết .v6-sl-text (0-1-0) nên thua luật gốc .v6-block--sl .v6-sl-text
   (0-2-0) — padding/gap vẫn là 18.36/28.8/9.72px. Nay viết ĐÚNG cấp đó, và
   ô ưu đãi cắt 2 dòng (thẻ 1 cao hơn các thẻ khác đúng bằng phần dôi ra). */
.v6-block--sl .v6-sl-text{padding:16px 18px;gap:7px}
.v6-block--sl .v6-sl-pri{padding:8px 11px;font-size:13px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v6-block--sl .v6-sl-open{-webkit-line-clamp:2;font-size:13.5px;line-height:1.45}
.v6-block--sl .v6-sl-ai b{font-size:13.5px}
.v6-block--sl .v6-sl-ai small{font-size:11.5px}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 39 — BA VIỆC ĐÚNG THEO FEEDBACK
   ① Dải trống 24px trên đầu: .screen-head kéo lên -65px trong khi thanh điều
      hướng thật cao 89px → hở đúng 24px. Nay thanh điều hướng đặt CỐ ĐỊNH
      (không chiếm chỗ), đầu trang bắt đầu từ y=0, không còn hở.
   ② Nhân vật đẩy hẳn lên góc dưới–trái của màn máy tính.
   ③ Cặp nút không bị đẩy xuống: thu đệm dọc và khe hàng của đầu trang để cả
      cụm gọn trong một khung nhìn.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .nav{position:fixed;top:0;left:0;right:0;z-index:70}
.v6 .screen-head{margin-top:0}
.v6-head{padding-top:100px;padding-bottom:16px;min-height:100svh}
.v6-head>.container{row-gap:14px}
.v6-row-btn{margin-top:0}
.v6-nv--scene{left:4%;bottom:34%;width:30%}
@container app (max-width:1023px){
  .v6-head{padding-top:92px}
  .v6-nv--scene{display:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 40 — BA CHỖ TRẢ VỀ ĐÚNG NHƯ ẢNH GỐC (ảnh khoanh đỏ)
   ① Dòng "CÙNG PHÁT TRIỂN." trở lại chuyển sắc nhiều sắc như bản gốc
      (lam → tím → lục) kèm vệt sáng chạy 9s.
   ② Nhân vật về đúng chỗ gốc: đứng CẠNH màn, góc dưới bên trái cụm
      (left:-5% · bottom:0 · 34%), không leo lên mặt màn.
   ③ Cặp nút "Tìm hiểu thêm · Tham gia cộng đồng" căn GIỮA dưới cụm như gốc.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-h1 em{display:inline;padding:0;-webkit-text-fill-color:transparent;color:transparent;
  background:linear-gradient(100deg,#2F6BD8 0%,#7A3FD0 34%,#B93FA8 56%,#1F8F4A 100%) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;text-shadow:none;
  animation:v6-h1-img 9s linear infinite}
.v6-h1 em::before,.v6-h1 em::after{content:none;display:none}
@media (prefers-reduced-motion:reduce){.v6-h1 em{animation:none}}
.v6-nv--scene{left:-5%;bottom:0;width:34%}
.v6-row-btn{grid-column:1/-1;justify-content:center}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 41 — THẺ LIÊN HỆ TRỞ LẠI ĐÚNG STYLE GỐC (đồng bộ với màn máy tính)
   Theo ảnh: thẻ là MẶT TỐI cùng họ với màn máy tính, có dải bìa chuyển sắc
   hổ phách → lục, chấm thông báo đỏ, viền dày, NGHIÊNG 3D và đặt ở góc dưới
   phải của cụm minh hoạ. Mọi thứ tôi đổi ở các vòng trước (mặt trắng, dạng
   ngang, bỏ nghiêng, đưa xuống dòng chảy) đều gỡ.
   Nhân vật: khai lại đúng giá trị gốc.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-spn{--white:#FFFFFF;--dark-text:#C9CDD6;--dark-label:#C9CDD6;--dark-sub:#C9CDD6;
  --v6-mist:#BFC4CC;--v6-gray:#9AA1AB;color:#FFFFFF}
.v6-scene--spn{position:absolute;right:0;bottom:4%;width:30%;max-width:none;z-index:3;
  display:block;justify-content:normal;margin-top:0;padding:0}
.v6-spn{display:flex;flex-direction:column;width:auto;padding:0 0 14px;column-gap:0;row-gap:0;
  border-radius:24px;overflow:hidden;background:#141B26;border:4px solid #263042;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.75);font-size:11.5px;line-height:1.35;
  transform:perspective(1200px) rotateY(12deg) rotateZ(-4deg);
  animation:v6-bubble 8s ease-in-out -3s infinite alternate}
.v6-spn-cover{display:block;height:56px;background:linear-gradient(135deg,#E9A81C,#1F8F4A)}
.v6-spn .avatar{--c:56px;margin:-30px 0 6px 12px;border:5px solid #141B26;box-sizing:content-box;
  font-size:17px;box-shadow:none}
.v6-spn b{padding-inline:14px;font-size:14px;color:#FFFFFF}
.v6-spn small{padding-inline:14px;font-size:11.5px;color:#9AA1AB}
.v6-spn-facts{display:flex;flex-wrap:wrap;gap:4px;margin:10px 14px 0}
.v6-spn-facts i{padding:2px 7px;border-radius:4px;background:#263042;color:#E6EFE8;font-size:10.5px}
.v6-spn::after{background:#CF2030;box-shadow:0 0 0 3px #141B26;right:14px;top:12px;width:12px;height:12px}
.v6-illus{padding:4% 9% 11% 5%}
.v6-nv--scene{left:-5%;bottom:0;width:34%;animation:none}


/* VÒNG 42 — THẺ LIÊN HỆ: khớp nốt MÀU theo ảnh gốc
   Còn lệch hai chi tiết: ảnh đại diện (ảnh gốc là XANH LAM nhạt, bản tôi đã
   đổi cả bộ .avatar sang bạc hà ở vòng 6) và hai viên chip (viên đầu CHANH
   chữ đậm, viên sau xám tối chữ sáng). Khai riêng cho thẻ này, không đụng
   ảnh đại diện ở các khối khác. */
.v6-spn .avatar{background:#7FCDE8;color:#0B2016}
.v6-spn-facts i:first-child{background:#A9D83F;color:#16270B;font-weight:700}
.v6-spn-facts i{background:#263042;color:#E6EFE8}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 43 — THẺ LIÊN HỆ: CÙNG STYLE MÀN MÁY TÍNH, DẠNG CHỮ NHẬT NGANG
   Giữ đúng ngôn ngữ của màn máy tính: mặt tối, viền dày, nghiêng 3D, và có
   DẢI ĐẦU (header) chuyển sắc ở trên cùng. Khác: khổ NGANG — dải đầu chạy
   hết bề ngang, bên dưới chia hai cột: ảnh đại diện trái · tên · chức danh ·
   hai viên chip bên phải.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-scene--spn{width:42%;max-width:330px;right:-2%;bottom:3%}
.v6-spn{display:grid;grid-template-columns:78px minmax(0,1fr);
  grid-template-rows:auto auto auto auto;align-items:start;
  column-gap:0;row-gap:2px;padding:0 16px 14px 0;border-radius:20px}
.v6-spn-cover{grid-column:1/-1;grid-row:1;height:38px;
  background:linear-gradient(135deg,#E9A81C,#1F8F4A)}
.v6-spn .avatar{grid-column:1;grid-row:2/span 3;--c:54px;margin:-26px 0 0 14px;
  border:5px solid #141B26;box-sizing:content-box;font-size:16px}
.v6-spn b{grid-column:2;grid-row:2;padding:8px 0 0;font-size:14.5px;line-height:1.2}
.v6-spn small{grid-column:2;grid-row:3;padding:0;font-size:11.5px;line-height:1.35}
.v6-spn-facts{grid-column:2;grid-row:4;margin:8px 0 0}
.v6-spn::after{right:12px;top:10px;width:11px;height:11px}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 44 — THẺ LIÊN HỆ: NGANG THẬT + KHÔNG CHE CHỮ CỦA MÀN
   ① Khổ 42% của cụm minh hoạ chỉ ra 203px nên cột chữ còn 101px → chức danh
      xuống 3 dòng, hai chip xuống 2 hàng, thẻ cao lên thành gần vuông.
      Nay khai width:min(330px,74%) + cột chữ tối thiểu 186px, đệm phải dời
      vào CỘT CHỮ để dải đầu chạy hết bề ngang như ảnh.
   ② Thẻ đặt CHỜM XUỐNG DƯỚI mép dưới màn (top nằm dưới đáy bezel) nên không
      còn nằm trên cột tin nhắn — bốn cảnh chat không bị che chữ nào.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-scene--spn{width:min(330px,74%);max-width:330px;right:-4%;bottom:-6%}
.v6-spn{padding:0 0 12px 0;grid-template-columns:78px minmax(186px,1fr)}
.v6-spn-cover{grid-column:1/-1;height:36px}
.v6-spn b{padding:8px 16px 0 0}
.v6-spn small{padding:0 16px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-spn-facts{margin:8px 16px 0 0;flex-wrap:nowrap}

/* VÒNG 44c — đo thật: hộp chứa của thẻ kết thúc TRÊN đáy bezel, nên bottom
   càng ÂM thì thẻ càng xuống. bottom:0 → mép trên 317; cần ≥ 391 (đáy màn)
   nên lùi thêm 78px. */
.v6-scene--spn{bottom:-78px}

/* VÒNG 44d — CHỐT: thẻ về DÒNG CHẢY ngay dưới màn, căn phải.
   Mọi phương án đặt tuyệt đối đều hoặc che chữ của một trong bốn cảnh chat,
   hoặc chạm hàng nút / vượt đáy đầu trang. Trong dòng chảy thì không thể
   che, và vẫn đứng đúng góc dưới–phải cụm minh hoạ. Style tối · dải đầu ·
   khổ ngang · nghiêng 3D giữ nguyên. */
.v6-scene--spn{position:static;display:flex;justify-content:flex-end;
  width:100%;max-width:none;margin-top:12px;padding:0 12px 0 0;bottom:auto;right:auto}
.v6-spn{width:min(330px,100%)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 45 — BA VIỆC
   ① NÚT "Menu" lọt ra ở khổ máy tính: luật ẩn nó viết bằng @container app,
      mà vòng 39 đặt .nav thành position:fixed nên thanh ra khỏi hộp đo của
      container → luật không còn khớp. Thêm luật @media tương đương cho cả
      ba phần tử phụ thuộc điểm ngắt (nút Menu · thanh ngang · bộ ngôn ngữ),
      áp cho MỌI vai (khách · chờ duyệt · thành viên · admin) vì cùng markup.
   ② Dải đầu thẻ liên hệ bị cắt bên phải: hai cột của thẻ chỉ tổng 264px
      trong khi thẻ rộng 331px, dải đầu span 1/-1 nên dừng ở 264. Đổi cột
      chữ sang 1fr để hai cột phủ kín bề ngang.
   ③ Nút và trạng thái tiêu điểm đang giống nhau (quầng sáng thở quanh nút
      chính đọc ra như vòng focus). Bỏ quầng thở; nút chính phẳng đặc, nút
      phụ viền; TIÊU ĐIỂM là vòng 3px lệch 2px khác hẳn trạng thái thường.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① */
@media (min-width:860px){
  .v6 .nav .open-menu{display:none!important}
  .v6 .nav .nav-menu{display:flex!important}
  .v6 .nav .hide-mobile{display:block}
}
@media (max-width:859px){
  .v6 .nav .nav-menu{display:none!important}
  .v6 .nav .open-menu{display:inline-flex!important}
}

/* ② */
.v6-spn{grid-template-columns:78px 1fr}
.v6-spn-cover{grid-column:1/-1;width:100%}

/* ③ */
.v6-row-btn .v6-btn-main{animation:none}
.btn.v6-btn-main::after{display:none}
.btn.v6-btn-main{background:#1F8F4A;color:#fff;border:0;box-shadow:0 10px 24px -12px rgba(31,143,74,.55)}
.btn.v6-btn-main:hover{background:#15653D;box-shadow:0 14px 28px -12px rgba(31,143,74,.65)}
.btn.v6-btn-white{background:#FFFFFF;color:#0B2016;border:1px solid #CFE3D6;box-shadow:0 8px 20px -14px rgba(8,40,26,.35)}
.btn.v6-btn-white:hover{background:#F1F9EC;border-color:#1F8F4A}
.v6 :focus-visible{outline:3px solid #0F4D31;outline-offset:2px;border-radius:12px}
.v6 .btn:focus-visible{outline:3px solid #0F4D31;outline-offset:3px}


/* VÒNG 46 — NHÂN VẬT VẼ ĐÈ LÊN THẺ LIÊN HỆ (lỗi xếp lớp)
   SVG nhân vật là position:absolute z-index:4, thẻ liên hệ nằm trong dòng
   chảy (z-index:auto) → giao nhau 67×94px thì SVG thắng thứ tự vẽ, thân
   nhân vật phủ lên góc ảnh đại diện của thẻ. Chữa: cho hộp thẻ một ngữ cảnh
   xếp lớp cao hơn (relative + z-index:5), không dời toạ độ của bên nào. */
.v6-scene--spn{position:relative;z-index:5}


/* VÒNG 47 — THẺ LIÊN HỆ VỀ ĐÚNG DẠNG GỌN NHƯ ẢNH
   Khổ ngang 330×130 quá dẹt. Ảnh cho thấy thẻ GỌN: dải đầu chuyển sắc ~72px,
   ảnh đại diện chờm lên dải đầu, rồi tên · chức danh một dòng · hai chip —
   tức đúng dạng dọc gọn của bản gốc. Trả lại flex cột, bỏ lưới hai cột. */
.v6-scene--spn{width:min(288px,54%);max-width:288px}
.v6-spn{display:flex;flex-direction:column;grid-template-columns:none;
  width:100%;padding:0 0 14px;row-gap:0;column-gap:0;border-radius:22px}
.v6-spn-cover{grid-column:auto;height:72px;width:100%}
.v6-spn .avatar{grid-column:auto;grid-row:auto;--c:58px;margin:-30px 0 8px 14px;
  border:5px solid #141B26;box-sizing:content-box;font-size:17px}
.v6-spn b{grid-column:auto;grid-row:auto;padding:0 16px;font-size:15px;line-height:1.25}
.v6-spn small{grid-column:auto;grid-row:auto;padding:0 16px;font-size:11.5px;line-height:1.4;
  white-space:normal;overflow:visible;text-overflow:clip}
.v6-spn-facts{grid-column:auto;grid-row:auto;margin:10px 16px 0;flex-wrap:wrap}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 48 — THẺ LIÊN HỆ VỀ ĐÚNG CÁCH ĐẶT CỦA BẢN GỐC
   Đưa thẻ vào dòng chảy (các vòng 27→47) làm nó rơi xuống giữa cụm và chồng
   lên nhân vật ở một số khổ. Trả lại đúng gốc: đặt TUYỆT ĐỐI ở góc dưới phải
   của cụm minh hoạ, rộng 30%, nhưng z-index:5 để luôn vẽ trên nhân vật.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-scene--spn{position:absolute;right:0;bottom:4%;left:auto;top:auto;
  width:30%;max-width:none;display:block;justify-content:normal;
  margin:0;padding:0;z-index:5}
.v6-spn{width:100%}

/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 48b — NÚT VÀ TIÊU ĐIỂM PHẢI KHÁC NHAU RÕ RÀNG
   Trước: nút phụ là viên TRẮNG không viền + bóng mềm → đọc ra như một quầng
   tiêu điểm; nút chính và vòng tiêu điểm cùng sắc lục nên khó phân biệt.
   Nay:
     · nút CHÍNH  : nền lục bảo đặc, chữ trắng, KHÔNG quầng sáng
     · nút PHỤ    : nền trắng + VIỀN 1.5px lục, bóng rất nhẹ
     · TIÊU ĐIỂM  : vòng HỔ PHÁCH 3px + vành trắng 1px, lệch 3px — khác hẳn
                    cả hai trạng thái trên, không thể nhầm là nút
   ══════════════════════════════════════════════════════════════════════════ */
.btn.v6-btn-main,.v6 .nav .btn--gold{background:#1F8F4A;color:#FFFFFF;border:1.5px solid #1F8F4A;
  box-shadow:none}
.btn.v6-btn-main:hover,.v6 .nav .btn--gold:hover{background:#15653D;border-color:#15653D;box-shadow:none}
.btn.v6-btn-white,.v6 .nav .btn--outline-white{background:#FFFFFF;color:#0F4D31;
  border:1.5px solid #9FC7AC;box-shadow:0 2px 6px rgba(8,40,26,.08)}
.btn.v6-btn-white:hover,.v6 .nav .btn--outline-white:hover{background:#F1F9EC;border-color:#1F8F4A;color:#0C3B26}
.v6 .btn:focus-visible,.v6 a:focus-visible,.v6 button:focus-visible,
.v6 input:focus-visible,.v6 select:focus-visible{
  outline:3px solid #E9A81C;outline-offset:3px;box-shadow:0 0 0 1px #FFFFFF}
.v6-search:focus-within{outline:3px solid #E9A81C;outline-offset:3px}

/* VÒNG 48c — 30% của cột minh hoạ ra 158px (thẻ hoá cao lêu nghêu 158×245).
   Khai clamp để thẻ luôn ở khổ gọn như ảnh: 230–300px. */
.v6-scene--spn{width:clamp(230px,44%,300px)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 49 — HAI NÚT BÊN PHẢI THANH ĐIỀU HƯỚNG
   Đo được: "Đăng nhập" computed display:block + height:36px + line-height
   14.5px → chữ dồn lên đỉnh hộp, nhìn ra "bị đẩy tít lên trên".
   Sửa: cả hai nút thành inline-flex căn giữa hai chiều, line-height:1.
   Phân biệt NÚT với MENU: menu giữ nguyên viên tròn 999px (giữ đúng style
   hiện tại), hai nút dùng bo 12px + viền rõ → nhìn là biết đâu là nút.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .nav-btn{display:flex;align-items:center;gap:10px}
.v6 .nav .btn--outline-white,.v6 .nav .btn--gold{display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 20px;border-radius:12px;font-size:14.5px;font-weight:700;line-height:1;
  white-space:nowrap}
.v6 .nav .btn--gold{background:#1F8F4A;color:#FFFFFF;border:1.5px solid #1F8F4A}
.v6 .nav .btn--gold:hover{background:#15653D;border-color:#15653D}
.v6 .nav .btn--outline-white{background:#FFFFFF;color:#0F4D31;border:1.5px solid #9FC7AC}
.v6 .nav .btn--outline-white:hover{background:#F1F9EC;border-color:#1F8F4A;color:#0C3B26}
.v6 .nav .team{height:40px}


/* VÒNG 50 — THẺ LIÊN HỆ HẠ XUỐNG, CHỈ CHẠM GÓC DƯỚI–PHẢI MÀN
   Đo ở 1440: mép trên thẻ y=218, đáy màn y=386 → thẻ chồm lên 168px, che
   gần hết ruột màn. Hạ 123px (bottom 14.16px → -108px) thì mép trên thẻ về
   y≈341, chỉ còn chờm 45px đúng vùng góc dưới–phải, và đáy thẻ y≈576 vẫn
   cách hàng nút (y≈637). */
.v6-scene--spn{bottom:-108px}

/* VÒNG 50b — chặn trường hợp màn thấp: với khung nhìn < 700px, đầu trang chỉ
   cao bằng khung nhìn nên hạ 108px làm thẻ tràn xuống khối dưới. Ở khổ đó
   hạ ít hơn. */
@media (max-height:700px){.v6-scene--spn{bottom:-52px}}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 51 — THẺ LIÊN HỆ: NEO THEO ĐÁY KHUNG NỘI DUNG CỦA MÀN
   Đo lại cho thấy ràng buộc thật: bề ngang từ mép phải màn (x≈1356) tới mép
   khung .app (1440) chỉ còn 84px, nên KHÔNG THỂ đặt thẻ 240px ra ngoài bezel.
   Cách đúng: cho mép TRÊN của thẻ nằm ngay DƯỚI khung nội dung (.v6-app, đáy
   ở ~75.4% chiều cao cụm) — khi đó thẻ vẫn chờm góc dưới–phải của màn như
   yêu cầu, mà không có chữ nào của bốn cảnh chat nằm dưới thẻ.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-scene--spn{top:77%;bottom:auto;right:-2%;width:clamp(220px,42%,270px)}
@media (max-height:700px){.v6-scene--spn{top:77%;bottom:auto}}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 52 — PHÂN BIỆT MENU VỚI NÚT
   Vì sao nhìn không ra: mục "Trang chủ" đang là VIÊN ĐẶC lục bảo — đúng
   hình thức của nút "Tham gia" ngay bên phải. Nay mỗi loại một ngôn ngữ
   riêng, giữ nguyên viên kính bọc menu (phần bạn đang thích):
     · MENU  : chữ trần trong viên kính; mục đang xem = mực đậm + GẠCH CHÂN
               3px lục bảo; rê chuột = viên bạc hà rất nhạt. Không nền đặc.
     · NÚT   : có NỀN hoặc VIỀN, bo 12px (menu bo tròn 999px) — hình thức
               khác hẳn, nhìn là biết bấm.
     · Giữa hai nhóm có VẠCH CHỈ dọc + khoảng thở 18px để mắt tách hai vùng.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .nav-menu a[aria-current],.v6 .nav-menu a.active{
  background:transparent;color:#0B2016;box-shadow:none;font-weight:700}
.v6 .nav-menu a[aria-current]::after,.v6 .nav-menu a.active::after{
  display:block;content:"";position:absolute;left:16px;right:16px;bottom:6px;
  height:3px;border-radius:99px;background:#1F8F4A}
.v6 .nav-menu a{position:relative}
.v6 .nav-menu a:hover{background:rgba(31,143,74,.10);color:#15653D}
.v6 .nav-btn{margin-left:18px;padding-left:18px;border-left:1px solid rgba(12,59,38,.14);gap:10px}

/* VÒNG 52b — hạ thêm 3% (77% → 80%): ở 77% còn 3 nút chữ của cảnh chat nằm
   dưới mép trên thẻ. */
.v6-scene--spn{top:80%}

/* VÒNG 52c — hai dòng cuối của cảnh 1 và 2 còn lọt dưới mép trái thẻ (thẻ
   chỉ chờm bezel 5px, không hạ thêm được nữa nếu vẫn muốn "chạm góc").
   Chừa 30px lề phải trong ruột cảnh chat để chữ dừng trước thẻ. */
.v6-app-pn{padding-right:30px}

/* VÒNG 52d — chữ vươn xa nhất của các cảnh tới x=1263, mép trái thẻ ở 1198
   → thu thẻ 66px (230 → 164?) là quá nhỏ. Cách rẻ hơn: NGẮT chữ trong cảnh
   chat sớm hơn bằng lề phải thật trên .v6-app-info (không phải .v6-app-pn, vì
   dòng "Nhà sáng lập" nằm trong .v6-app-info). */
.v6-app-pn{padding-right:0}
.v6-app-info{padding-right:70px}

/* VÒNG 52e — còn hai viên chip của cảnh 3 và 4 lọt dưới góc trái thẻ. Thu
   thẻ 24px (mép trái dịch sang phải) là đủ, không cần bóp thêm ruột màn. */
.v6-scene--spn{width:clamp(196px,36%,212px)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 53 — KHỐI "NHU CẦU HỢP TÁC" ĐẬM VÀ CÓ ĐIỂM NHẤN
   Vì sao nhạt: cảnh nền lam rất nhạt + bong bóng trắng phẳng không viền,
   và hai viên nhãn (lĩnh vực · "Cần gấp") đang bị ẩn bởi luật màn thấp nên
   thẻ chỉ còn tên + tiêu đề + nút.
   Sửa trong đúng khối này: cảnh đậm thêm một nấc · bong bóng có VẠCH MÀU
   bên trái và bóng rõ · bật lại hai viên nhãn · nút Liên hệ đặc kèm mũi tên.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-scene-img--screen{background:linear-gradient(140deg,#A7D8F0 0%,#7FC3E4 55%,#9FD8C4 100%)}
.v6-chat-bubble{position:relative;border:1px solid rgba(12,59,38,.10);
  box-shadow:0 14px 30px -14px rgba(8,40,26,.34);padding-left:18px}
.v6-chat-bubble::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  border-radius:99px;background:linear-gradient(180deg,#1F8F4A,#8FE04A)}
.v6-chat-bubble:nth-child(2)::before{background:linear-gradient(180deg,#1668B0,#2FA9E0)}
.v6-chat-bubble:nth-child(3)::before{background:linear-gradient(180deg,#B07908,#E9A81C)}
.v6-chat-bubble:nth-child(4)::before{background:linear-gradient(180deg,#9C1C7A,#E23FB8)}
.v6-chat-label{display:flex!important}
.v6-chat-label i{padding:3px 10px;border-radius:999px;background:#EFF9E9;color:#15653D;
  font-size:11px;font-weight:700}
.v6-chat-label i.v6-urgent{background:#FFE7DE;color:#B93B12}
.v6-chat-bubble h3{font-size:15px;font-weight:800;line-height:1.3}
.v6-chat-bubble .btn.v6-btn-main{padding:8px 16px;font-size:13px;font-weight:700}
.v6-chat-channel span.active{box-shadow:0 4px 12px -6px rgba(8,40,26,.35)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 54 — TRẢ LẠI CÁC TRƯỜNG BỊ ẨN THEO CHIỀU CAO KHUNG NHÌN
   Rà lại các luật @media (max-height:…) của bản gốc: màn phổ biến 800–900px
   rơi vào ngưỡng 900/820/760 nên bị ẩn một loạt thông tin thật:
     · .v6-chat-open     mô tả nhu cầu hợp tác        (ẩn khi < 900)
     · .v6-chat-label   lĩnh vực + "Cần gấp"          (ẩn khi < 820)
     · .v6-st-type     loại tin ở danh sách tin      (ẩn khi < 900)
     · .v6-st-sum      tóm tắt tin nổi bật           (ẩn khi < 760)
     · .v6-glass-y      ba dòng ý của mỗi tấm kính    (ẩn khi < 700)
     · .v6-ev-last small  người đăng · nơi (sự kiện)  (ẩn khi < 700)
     · .v6-st-line small · .v6-st-slide small  người đăng · ngày
     · .v6-mem-head · .v6-mem-line small  nhãn khối + chức danh thành viên
     · .v6-sl-head .v6-glass-open  đoạn dẫn khối sản phẩm
   Nay CHỈ ẩn khi khung nhìn thật thấp (< 700px); từ 701px trở lên hiện đủ.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-height:701px){
  .v6-chat-open{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .v6-chat-label{display:flex!important}
  .v6-st-type{display:flex!important}
  .v6-st-sum{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .v6-glass-y{display:flex!important}
  .v6-ev-last small{display:block!important}
  .v6-st-line small,.v6-st-slide small{display:block!important}
  .v6-mem-head{display:block!important}
  .v6-mem-line small{display:block!important}
  .v6-sl-head .v6-glass-open{display:block!important}
  .v6-block--sl .v6-sl-open{-webkit-line-clamp:2}
}


/* VÒNG 55 — NÚT "XEM CHI TIẾT" / "XEM LẠI" TRONG THẺ SỰ KIỆN
   Hai nút này dùng .v6-btn-gray: nền xám #50555F chữ trắng — trên thẻ trắng
   thì thành mảng tối lệch tone và chữ khó đọc. Đổi sang cùng hệ nút phụ của
   trang: nền bạc hà, chữ lục đậm, viền lục nhạt (chữ #15653D trên #EFF9E9 =
   7.4 : 1), rê chuột thì đặc lên. */
.v6-ev-card .btn.v6-btn-gray,.btn.v6-btn-gray{
  background:#EFF9E9;color:#15653D;border:1.5px solid #9FC7AC;font-weight:700}
.v6-ev-card .btn.v6-btn-gray:hover,.btn.v6-btn-gray:hover{
  background:#1F8F4A;color:#FFFFFF;border-color:#1F8F4A}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 56 — BA CHỖ TRONG KHỐI "NHU CẦU HỢP TÁC"
   ① Viên "Cần gấp": nền đỏ đặc + chữ đậm → loá. Đổi sang nền đỏ RẤT NHẠT,
      chữ đỏ đậm (#B42318 trên #FFE7DE = 5.6 : 1), có viền mảnh.
   ② Thẻ quá to làm vỡ lưới 2×2: thu đệm, cỡ chữ, ảnh đại diện; mô tả cắt
      2 dòng; nút Liên hệ nhỏ lại.
   ③ Bỏ VẠCH MÀU bên trái (vòng 53) — thay bằng NỀN NHẠT theo lĩnh vực cho
      cả thẻ, nổi mà không cắt vụn bố cục.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-chat-label i.v6-urgent,.v6-urgent{background:#FFE7DE;color:#B42318;border:1px solid #F3C4B6;
  font-weight:700;text-shadow:none}
.v6-chat-bubble{padding:14px 16px;gap:10px;grid-template-columns:34px minmax(0,1fr);
  padding-left:16px}
.v6-chat-bubble::before{content:none;display:none}
.v6-chat-bubble:nth-child(1){background:linear-gradient(150deg,#FFFFFF,#EFF9E9)}
.v6-chat-bubble:nth-child(2){background:linear-gradient(150deg,#FFFFFF,#E4F2FB)}
.v6-chat-bubble:nth-child(3){background:linear-gradient(150deg,#FFFFFF,#FFF4DE)}
.v6-chat-bubble:nth-child(4){background:linear-gradient(150deg,#FFFFFF,#FBE9F5)}
.v6-chat-bubble .avatar{--c:32px;font-size:11px}
.v6-chat-ai{font-size:11.5px;line-height:1.35}
.v6-chat-ai b{font-size:12.5px}
.v6-chat-bubble h3{font-size:13.5px;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v6-chat-open{font-size:11.5px;line-height:1.4;-webkit-line-clamp:2}
.v6-chat-label i{padding:2px 8px;font-size:10.5px}
.v6-chat-bubble .btn.v6-btn-main{padding:6px 13px;font-size:12px;border-radius:9px}


/* VÒNG 57 — "CẦN GẤP": luật gốc .v6-urgent khai background/color kèm !important
   nên mọi override thường đều thua; thêm nữa color:var(--white) lại lấy
   --white đã bị khai thành MỰC (#0B2016) trong khối mặt sáng → đỏ đặc + chữ
   đen. Khai lại kèm !important và màu tuyệt đối.
   Kèm: tiêu đề nhu cầu clamp 2 dòng viết đúng cấp .v6-chat-bubble h3 của gốc. */
.v6-chat-label i.v6-urgent,.v6-chat-bubble .v6-urgent,.v6-urgent{
  background:#FFE7DE!important;color:#B42318!important;border:1px solid #F3C4B6!important;
  font-weight:700!important}
.v6-scene-img--screen .v6-chat-bubble h3{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}


/* VÒNG 58 — THẺ LIÊN HỆ: DẢI ĐẦU THẤP + KHỔ CHỮ NHẬT NGANG
   Dải đầu 72px chiếm gần một phần ba thẻ; thẻ lại đứng (206×233). Nay dải
   đầu 44px và thẻ chuyển sang lưới hai cột: ảnh đại diện chờm lên dải đầu ở
   trái · tên · chức danh · hai chip ở phải → khổ ngang, dễ đọc hơn. */
.v6-scene--spn{width:clamp(268px,52%,308px)}
.v6-spn{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto auto auto;
  align-items:start;column-gap:0;row-gap:1px;padding:0 0 12px;border-radius:18px}
.v6-spn-cover{grid-column:1/-1;grid-row:1;height:44px;width:100%;display:block}
.v6-spn .avatar{grid-column:1;grid-row:2/span 3;--c:52px;margin:-26px 0 0 14px;
  border:4px solid #141B26;box-sizing:content-box;font-size:15px}
.v6-spn b{grid-column:2;grid-row:2;padding:6px 14px 0 0;font-size:14px;line-height:1.2}
.v6-spn small{grid-column:2;grid-row:3;padding:0 14px 0 0;font-size:11px;line-height:1.35}
.v6-spn-facts{grid-column:2;grid-row:4;margin:6px 14px 0 0;flex-wrap:wrap}
.v6-spn-facts i{padding:2px 7px;font-size:10px}
.v6-spn::after{right:10px;top:9px;width:10px;height:10px}

/* VÒNG 59 — HẾT GIẬT KHI RÊ CHUỘT
   Thẻ sự kiện / sản phẩm có HAI nguồn cùng ghi transform: luật hover của tôi
   (translateY -6px) và script nghiêng theo con trỏ (transform nội tuyến).
   Nội tuyến thắng nên cú nhấc bị huỷ giữa đường → rung. Bỏ nhấc bằng
   transform ở hai thẻ đó, chỉ giữ bóng nở (không đụng tới transform). */
.v6-ev-card:hover,.v6-sl-card:hover{transform:none}
.v6-ev-card,.v6-sl-card{transition:box-shadow .34s var(--ease-in),border-color .34s var(--ease-in)}
.v6-ev-card:hover{box-shadow:0 28px 56px -22px rgba(8,40,26,.45)}
.v6-sl-card:hover{box-shadow:0 28px 56px -22px rgba(8,40,26,.42)}


/* VÒNG 60 — LÀM SÁNG NỀN TRONG ẢNH MÁY TÍNH VÀ THẺ LIÊN HỆ
   Hai khối này đang gần đen (#141B26 / #10231A) nên đập vào nền sáng của
   trang. KHÔNG đổi sang mặt trắng (đã thử, người dùng thấy rối) — chỉ nâng
   sắc lên tông LỤC RỪNG trung: sáng hơn khoảng 2 nấc, cùng họ màu thương
   hiệu, chữ vẫn trắng nên vẫn đọc rõ (trắng trên #16452F = 11.4 : 1).
   Bìa thẻ liên hệ đổi sang chuyển sắc lục bảo → chanh cho ăn với trang. */
.v6-mh{background:#123B28;
  box-shadow:0 0 0 1px rgba(143,224,74,.28),0 0 60px -16px rgba(31,143,74,.45),
    0 40px 84px -36px rgba(8,40,26,.45)}
.v6-app{background:#16452F}
.v6-app-channel{background:#113520}
.v6-app-chat{background:#16452F}
.v6-app-stick,.v6-app-need,.v6-app-hello,.v6-app-mem-card{background:#1D5338;border-color:rgba(143,224,74,.18)}
.v6-conn.active{background:#1D5338}
.v6-app-fld{background:linear-gradient(180deg,transparent,#16452F)}
.v6-spn{background:#123B28;border-color:#1E5538}
.v6-spn .avatar{border-color:#123B28}
.v6-spn-cover{background:linear-gradient(120deg,#1F8F4A,#8FE04A)}
.v6-spn-facts i{background:#1E5538;color:#EAF7DC}
.v6-spn::after{box-shadow:0 0 0 3px #123B28}


/* VÒNG 61 — CÂN LẠI KHOẢNG THỞ ĐẦU TRANG
   · Cụm minh hoạ (màn máy tính · thẻ liên hệ · nhân vật) nhấc LÊN 34px:
     khoảng trống giữa thanh điều hướng và nội dung đang quá rộng.
   · Cặp nút "Tìm hiểu thêm · Tham gia cộng đồng" hạ XUỐNG 22px: đang sát
     chân cụm minh hoạ. */
/* Đo lại: khoảng trống KHÔNG do lề, mà do lưới đầu trang căn GIỮA trục dọc
   (align-content:center) — cột chữ cao hơn cột minh hoạ nên cụm minh hoạ bị
   đẩy xuống giữa, chừa một mảng trống phía trên. Chữa bằng cho riêng cột
   minh hoạ neo lên MÉP TRÊN của hàng. Cặp nút hạ 22px. */
.v6-illus{align-self:start;margin-top:0}
.v6-row-btn{margin-top:22px}


/* VÒNG 62 — CẶP NÚT XUỐNG SÁT ĐÁY MÀN ĐẦU, VẪN FIT HD (1366×768)
   Lưới đầu trang có hai hàng (nội dung · cặp nút) và đang align-content
   center. Đổi sang space-between: hàng nội dung neo mép trên, cặp nút rơi
   xuống đáy vùng nội dung. Đệm đáy 20px để nút không dính mép.
   Fit HD: đầu trang min-height 100svh; ở 768px chiều cao thì thanh điều
   hướng 81px + nội dung ~560px + nút 44px + đệm ~40px = ~725px < 768. */
.v6-head>.container{align-content:space-between}
.v6-row-btn{margin-top:0;padding-bottom:20px}
.v6-head{padding-bottom:8px}
@media (max-height:780px){
  .v6-illus{margin-top:0}
  .v6-head{padding-top:calc(var(--height-nav) + 8px)}
  .v6-row-btn{padding-bottom:14px}
}


/* VÒNG 63 — CẶP NÚT ĐỪNG SÁT ĐÁY: chừa 20px là quá ít, nhấc lên cho cân.
   Đệm đáy 20 → 48px (màn thấp 14 → 32px), và đầu trang chừa thêm 8 → 16px. */
.v6-row-btn{padding-bottom:48px}
.v6-head{padding-bottom:16px}
@media (max-height:780px){.v6-row-btn{padding-bottom:32px}}


/* VÒNG 64 — CỤM MINH HOẠ HẠ XUỐNG CHÚT
   Vòng 61 neo cụm lên mép trên hàng (align-self:start) nên nó lên cao quá,
   lệch với cột chữ. Nay vẫn neo mép trên nhưng chừa 44px (màn thấp 24px). */
.v6-illus{margin-top:44px}
@media (max-height:780px){.v6-illus{margin-top:24px}}


/* ══════════════════════════════════════════════════════════════════════════
   ĐỒNG BỘ MÀU NÚT VỚI CÁC MÀN TRONG (22/09/2026)

   Sau khi các màn trong dùng --green-btn #1A8245, Trang chủ vẫn giữ #1F8F4A ở
   nút "Tham gia" và viên VI/EN đang chọn — hai mặt lục lệch nhau một nấc khi
   người xem bấm qua lại, mà đó đúng là thứ CLAUDE.md §4 bắt phải giống nhau
   ("thanh điều hướng MỌI màn phải y hệt trang chủ").

   Chọn kéo Trang chủ theo màn trong chứ không ngược lại, vì #1F8F4A với chữ
   trắng chỉ đo được 4.13:1 — KHÔNG đạt AA cho chữ thường (cần 4.5); #1A8245
   đo được 4.86:1. Tối hơn đúng một nấc, nhìn vẫn là lục bảo cũ.
   #1F8F4A GIỮ NGUYÊN ở mọi chỗ không có chữ trắng đè lên (mảng trang trí,
   viền, gạch chân, quầng sáng) — tỉ lệ đó không áp dụng ở đấy.

   Đặt ở CUỐI file: _home.css nạp SAU _unify.css nên phải sửa tại
   đây; và phải nằm sau luật gốc, không thì luật gốc đè ngược (bẫy §8).
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .nav .btn--gold{background:var(--green-btn);border-color:var(--green-btn)}
.btn.v6-btn-main:hover,.v6 .nav .btn--gold:hover{background:var(--green-btn-hover);border-color:var(--green-btn-hover)}
.v6 .nav .team button[aria-pressed="true"]{background:var(--green-btn);border-color:var(--green-btn)}
.v6 .nav-menu a[aria-current],.v6 .nav-menu a.active{background:var(--green-btn)}
.btn.v6-btn-main{background:var(--green-btn)}

/* ── ĐIỆN THOẠI: TRẢ LẠI LUẬT ẨN "Đăng nhập" + VI/EN ──────────────────────
   `.v6 .nav .btn--outline-white,.v6 .nav .btn--gold{display:inline-flex}` ở trên
   có đặc trưng (0,3,0), cao hơn luật ẩn `.nav .hide-mobile{display:none}` của
   _common.css (0,2,0) — nên ở khổ điện thoại nút "Đăng nhập" KHÔNG ẩn nữa.
   Đo ở khung nhìn 390: thanh điều hướng dài 437px, nút "Menu" bị đẩy ra ngoài
   mép và CẮT MẤT — trên điện thoại là mất sạch lối điều hướng, mà phần lớn
   thành viên đọc trên điện thoại (CLAUDE.md, mở đầu).

   Khai lại ở ĐÂY (cuối file, sau luật gốc — bẫy §8) với cùng đặc trưng (0,3,0)
   nên thắng nhờ thứ tự. Ngưỡng 859px, KHÔNG phải 1023px: Trang chủ cố ý cho
   hiện lại cụm này từ 860px (khối ① ở trên), lấy 1023 là đổi cả khổ máy tính
   bảng — ngoài phạm vi lỗi đang sửa.                                        */
@container app (max-width:859px){
  .v6 .nav .hide-mobile{display:none}
}

/* ── KHỐI TRANG CHỦ PHẢI CẮT PHẦN TRÀN NGANG ──────────────────────────────
   Khối tin và bong bóng chat vào sân bằng hoạt ảnh "trượt từ phải"
   (`v6-self-right`). Trong lúc trượt, phần tử còn nằm BÊN PHẢI chỗ đứng cuối —
   ở khung nhìn 390 nó thò ra 5–13px ngoài mép và làm CẢ TRANG cuộn ngang
   trong suốt thời gian hoạt ảnh chạy. Trên điện thoại, trang tự nhích ngang
   lúc đang cuộn đọc là lỗi khó chịu hơn nhiều so với cái lợi của hiệu ứng.

   Dùng `overflow-x:clip` chứ KHÔNG dùng `hidden`: `hidden` biến khối thành
   khung cuộn, làm hỏng `position:sticky` bên trong; `clip` thì không.
   Chiều dọc để `visible` nên bóng đổ và quầng sáng vẫn tràn ra như cũ.     */
.v6-block{overflow-x:clip}

/* ── NHÃN "ƯU ĐÃI CHO THÀNH VIÊN" DÍNH LIỀN VÀO NỘI DUNG ƯU ĐÃI ───────────
   Khối băng thẻ đặt `.v6-block--sl .v6-sl-pri{display:-webkit-box;
   -webkit-line-clamp:2}` để gói ưu đãi trong hai dòng. Nhưng `-webkit-box`
   HUỶ `flex-direction:column` của luật gốc, nên <small> trở lại inline và
   dính liền chữ phía sau — trên trang đọc ra:
       "ƯU ĐÃI CHO THÀNH VIÊNGiảm 15% và miễn phí in logo…"
   Ba thẻ đầu băng đều bị, nhìn ra như lỗi biên tập chứ không ra thiết kế.

   Trả <small> về block cho nó đứng riêng một dòng, và nới clamp lên 3 để
   phần ưu đãi vẫn còn đủ hai dòng như ý ban đầu. Đo lại: khối 53px → 50px,
   tức KHÔNG cao thêm, băng thẻ giữ nguyên nhịp.                            */
.v6-block--sl .v6-sl-pri{-webkit-line-clamp:3}
.v6-block--sl .v6-sl-pri small{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 63 — BĂNG "SẢN PHẨM VÀ DỊCH VỤ": THUMBNAIL CAO LÊN, ĐÚNG TÔNG
   Người dùng 23/09: "mấy thumbnail này tăng độ cao lên chứ, sao để lệch tone vậy".

   Đo trước khi sửa (khổ 1440): khối .v6-block--sl cao 835px nhưng băng thẻ chỉ
   chiếm 322px — thừa hơn 500px chiều dọc. Thẻ 547×322, ô hình chỉ 120×320 nên
   đọc ra một DẢI HẸP dựng đứng chứ không ra cái thumbnail. Mô tả lại bị cắt
   còn 2 dòng (scrollHeight 78 / hiện 39) vì thẻ thấp.

   ① Cao: cho băng một chiều cao thật, lấy bớt phần thừa của khối.
   ② Rộng: cột hình 120px → ~150–190px, đủ để hình là một mảng chứ không là vạch.
   ③ Tông: ô hình đang là dải lục ĐẬM (var(--c) → #0F4D31) trong khi thẻ trắng
      và nền khối lục nhạt — lệch hẳn một bậc sáng. Kéo về dải lục vừa, cùng
      họ với ảnh bìa sự kiện đã nhạt hoá hôm 22/09; biểu tượng giữ mặt trắng
      mờ nên vẫn nổi (trắng trên #4E9E63 = 4.6 : 1).
   ④ Thẻ cao thêm thì mô tả trả lại 3 dòng.
   ══════════════════════════════════════════════════════════════════════════ */
.v6-block--sl .v6-sl-of{height:clamp(340px,46vh,430px)}
.v6-block--sl .v6-sl-card{grid-template-columns:clamp(150px,26%,190px) minmax(0,1fr)}
.v6-block--sl .v6-sl-open,.v6-sl-card .v6-sl-open{-webkit-line-clamp:3}
.v6-sl-pic{background:linear-gradient(150deg,
  color-mix(in srgb,var(--c) 34%,#FFFFFF) 0%,
  color-mix(in srgb,var(--c) 72%,#FFFFFF) 48%,
  color-mix(in srgb,var(--c) 96%,#FFFFFF) 100%)}
.v6-sl-pic span{background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.72)}
.v6-sl-pic svg{color:#FFFFFF}
/* Vòng tròn mờ trang trí sau biểu tượng: hạ xuống cho nền nhạt khỏi bị rối. */
.v6-sl-pic::before{opacity:.5}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 64 — MÔ PHỎNG GIAO DIỆN Ở ĐẦU TRANG: SÁNG HƠN, CÓ THÊM SẮC
   Người dùng 23/09: "thumbnail máy tính, contact này xanh đậm quá, hãy phối
   thêm màu sao cho tươi sáng hơn".

   ⚑ ĐI NGƯỢC CLAUDE.md §2B — mục đó chốt "khối mô phỏng giao diện GIỮ NỀN TỐI,
     là điểm neo tối duy nhất trong thân trang". Người dùng xem trực tiếp và
     yêu cầu đổi, nên làm theo; GIỮ nguyên tinh thần "đọc ra như ảnh chụp sản
     phẩm" bằng cách vẫn để nó là mặt ĐẬM HƠN nền trang, chỉ nhấc lên 2–3 nấc
     và thêm sắc, chứ không lật sang mặt trắng (bản trắng đã thử ở vòng 60,
     người dùng thấy rối).

   Tỉ lệ đã đo lại với chữ trắng: #1C5A3C 8.15 · #24694A 6.57 · #2C7A55 5.22 —
   đều đạt AA thoải mái.
   ⚠ Chữ phụ trong mô phỏng ĐỔI khỏi xám: --v6-gray #9AA1AB trên các mặt sáng
     hơn này chỉ còn ~3.2. Đây đúng bẫy §8 ("chữ xám trên nền màu — text mờ
     tịt, lẫn vào nhau"). Thay bằng lục rất nhạt #CFE4D2 (4.95 trên #24694A).
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠ CHỈ hai khối THẬT SỰ tối: cửa sổ ứng dụng .v6-mh và thẻ liên hệ .v6-spn.
   Lượt đầu tôi liệt kê cả .v6-mem · .v6-ev-card · .v6-chat-bubble — ba thứ đó nằm
   trên nền TRẮNG của khối khác, nên bộ mực-cho-nền-tối theo vào là chữ lục
   nhạt trên nền trắng: đo được 1.07–1.26 ở 18 chỗ. Token kế thừa xuống con,
   nên chỉ khai ở gốc hai khối tối là đủ. */
.v6-mh,.v6-spn{
  --v6-gray:#E4F1E6;--v6-mist:#EDF6EE;--dark-text:#EDF6EE;--dark-label:#EDF6EE;--dark-sub:#EDF6EE}
.v6-mh{background:#1C5A3C;
  box-shadow:0 0 0 1px rgba(143,224,74,.34),0 0 64px -16px rgba(31,143,74,.46),
    0 40px 84px -36px rgba(8,40,26,.40)}
.v6-app{background:#24694A}
.v6-app-channel{background:#1A5236}
.v6-app-chat{background:#24694A}
.v6-app-stick,.v6-app-need,.v6-app-hello,.v6-app-mem-card{background:#2C7A55;border-color:rgba(143,224,74,.26)}
.v6-app-fld{background:linear-gradient(180deg,transparent,#24694A)}
/* Kênh đang mở: viên HỔ PHÁCH thay vì lục đậm — một điểm ấm giữa mảng lục,
   đây là chỗ "phối thêm màu" rẻ nhất mà đọc ra ngay. Chữ mực đậm trên hổ
   phách đo 8.9 : 1. */
.v6-conn.active{background:#E9A81C;color:#2A1D02}
.v6-conn.active .v6-conn-ic{color:#2A1D02}
.v6-spn{background:#1C5A3C;border-color:#2C7A55}
.v6-spn .avatar{border-color:#1C5A3C}
.v6-spn-facts i{background:#2C7A55;color:#EDF8E2}
.v6-spn::after{box-shadow:0 0 0 3px #1C5A3C}

/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 65 — MÔ PHỎNG GIAO DIỆN: PHỐI THÊM SẮC, THÔI ĐƠN ĐIỆU MỘT MÀU LỤC
   Người dùng 23/09: "cái này để màu xanh quá, phối thêm màu ntn cho hiện
   đại, hấp dẫn".

   Vòng 64 mới nhấc SÁNG chứ chưa thêm SẮC, nên cả cửa sổ vẫn là một mảng lục
   từ khung ra tới từng viên nhãn. Nay đưa bốn sắc nhấn --s1..--s4 vào đúng
   vai CLAUDE.md §3 cho phép: "chấm chuyên mục, vòng avatar" — tức là các
   CHẤM và VIÊN NHỎ, không phải mảng lớn. Mỗi loại thẻ một sắc, nên nhìn vào
   thấy ngay đây là nhiều loại nội dung khác nhau chứ không phải một danh sách.

   Kèm sửa tương phản đo được sau vòng 64 (đo bằng điểm ảnh thật):
     · chữ phụ #CFE4D2 trên #2C7A55 → 4.03, chưa đạt → dùng #E4F1E6 (4.58)
     · chữ tắt trong vòng ảnh đại diện đang là MỰC ĐẬM trên vòng lục → 2.80
       → đổi sang trắng
     · viên nhãn trắng trên #48A858 → 2.99 → viên đổi sang mặt đặc sắc nhấn,
       chữ mực đậm
     · nút nhỏ trong mô phỏng #288850 + chữ trắng → 4.44 → về --green-btn (4.86)
   ══════════════════════════════════════════════════════════════════════════ */
/* ① Vòng ảnh đại diện trong mô phỏng: chữ tắt TRẮNG trên mặt sắc nhấn. */
.v6-mh .avatar,.v6-spn .avatar{color:#FFFFFF;font-weight:700}
.v6-mh .avatar.a1{background:#1F8F4A}
.v6-mh .avatar.a2{background:#0E7C9B}   /* lục ngọc — lấy từ --s2 hạ sáng cho đạt chữ trắng */
.v6-mh .avatar.a3{background:#9C1C7A}   /* mận  — --s1 hạ sáng, 6.9 với chữ trắng */
.v6-mh .avatar.a4{background:#8A5A05}   /* hổ phách đậm — --s3 hạ sáng */

/* ② Viên nhãn trong thẻ nội dung: mỗi loại một sắc, chữ mực đậm trên mặt nhạt. */
.v6-mh .v6-channel-label{background:#E9A81C;color:#2A1D02}
.v6-mh .v6-ev-label,.v6-mh .v6-card-label{background:#D6F0FA;color:#0E5A74}
.v6-mh .v6-need-label{background:#FBE7F5;color:#9C1C7A}
.v6-mh .v6-mem-label{background:#E4F6EB;color:#15653D}
.v6-spn .v6-spn-facts i{background:#D6F0FA;color:#0E5A74}
.v6-spn .v6-spn-facts i+i{background:#FDF2DC;color:#8A5A05}

/* ③ Chấm trạng thái ở danh sách kênh — bốn sắc, đây là chỗ §3 dành riêng. */
.v6-mh .v6-conn .v6-conn-dot:nth-of-type(1),.v6-mh .v6-conn-dot--1{background:#2FC4F5}
.v6-mh .v6-conn-dot--2{background:#E23FB8}
.v6-mh .v6-conn-dot--3{background:#F2B417}
.v6-mh .v6-conn-dot--4{background:#5CD97E}

/* ④ Nút nhỏ trong mô phỏng về màu nút chuẩn (chữ trắng đạt AA). */
.v6-mh .btn.v6-btn-main,.v6-mh .v6-btn-mini{background:var(--green-btn);color:#FFFFFF}
.v6-mh .btn.v6-btn-main:hover,.v6-mh .v6-btn-mini:hover{background:var(--green-btn-hover)}

/* ⑤ Một vệt lục ngọc ở mép trên cửa sổ — điểm màu lạnh duy nhất, đủ để cả
      khối thôi đọc ra "một mảng lục". */
.v6-mh{box-shadow:0 0 0 1px rgba(143,224,74,.34),
  0 -2px 0 0 #2FC4F5 inset,
  0 0 64px -16px rgba(31,143,74,.46),
  0 40px 84px -36px rgba(8,40,26,.40)}

/* ── VÒNG 65B — TOKEN MỰC PHẢI PHỦ CẢ CON CHÁU TRONG MÔ PHỎNG ─────────────
   Khai token ở gốc .v6-mh là chưa đủ: từng component con (.v6-app-channel,
   .v6-app-chat, .v6-ev-card, .v6-chat-bubble…) TỰ KHAI LẠI `--v6-gray:#9AA1AB`
   ở khối 1149–1160, mà khai trên chính nó thì thắng giá trị kế thừa từ cha.
   Nên 15 chỗ chữ phụ vẫn là xám #9AA1AB trên nền lục (đo 2.07–3.62) — đúng
   bẫy §8 "chữ xám trên nền màu, mờ tịt".
   Phủ bằng `.v6-mh *` / `.v6-spn *`: cùng đặc trưng (0,1,0) với các lớp kia
   nhưng nằm sau nên thắng, và chỉ ăn BÊN TRONG hai khối tối.               */
.v6-mh,.v6-mh *,.v6-spn,.v6-spn *{
  --v6-gray:#E4F1E6;--v6-mist:#EDF6EE;--dark-text:#EDF6EE;--dark-label:#EDF6EE;--dark-sub:#EDF6EE}
/* Vòng ảnh đại diện: thẻ liên hệ cũng dùng, không riêng cửa sổ ứng dụng. */
.v6-mh .avatar,.v6-spn .avatar{color:#FFFFFF;font-weight:700}
.v6-mh .avatar.a1,.v6-spn .avatar.a1{background:#1F8F4A}
.v6-mh .avatar.a2,.v6-spn .avatar.a2{background:#0E7C9B}
.v6-mh .avatar.a3,.v6-spn .avatar.a3{background:#9C1C7A}
.v6-mh .avatar.a4,.v6-spn .avatar.a4{background:#8A5A05}
/* Hai viên thẻ liên hệ ("DBA" · "Sản xuất") — mặt nhạt, mực đậm cùng sắc. */
.v6-spn .v6-spn-facts i{background:#D6F0FA;color:#0E5A74;font-style:normal}
.v6-spn .v6-spn-facts i+i{background:#FDF2DC;color:#8A5A05}

/* ── BỎ HẲN GẠCH NGANG TRÊN MỤC MENU (Trang chủ) ──────────────────────────
   Người dùng nhắc lần thứ hai: "chỗ menu, khi focus vẫn có thanh gạch chân
   ngang là sao, tôi bảo sửa đi mà".

   Lần trước tôi chỉ tắt ở _unify.css `.nav-menu a[aria-current]::after`
   (đặc trưng 0,2,1). Trang chủ có `.v6 .nav-menu a[aria-current]::after`
   (0,3,1) ở khối 2017 và 2670, vừa CAO HƠN vừa nạp SAU — nên nó bật lại.
   Đo trên DOM: a::after vẫn display:block, nền #1F8F4A, cao 3px, top:27px —
   tức vạch nằm VẮT NGANG trong lòng viên lục chứ không phải gạch chân, nhìn
   ra như chữ bị gạch bỏ.

   Tắt tại đây (cuối file, sau cả hai khối kia) và dùng `content:none` cho
   chắc — `display:none` còn có thể bị một luật display khác bật lại.        */
.v6 .nav-menu a::after,
.v6 .nav-menu a:hover::after,
.v6 .nav-menu a:focus::after,
.v6 .nav-menu a:focus-visible::after,
.v6 .nav-menu a[aria-current]::after,
.v6 .nav-menu a[aria-current="page"]::after,
.v6 .nav-menu a.active::after{content:none;display:none}

/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 66 — MÔ PHỎNG GIAO DIỆN: LẬT VÙNG NỘI DUNG SANG MẶT SÁNG
   Người dùng 23/09, lần thứ hai: "cái thumbnail máy tính, contact này phối
   màu thêm cho đỡ xanh nè xanh nẹt thế được ko, phối màu sao cho tươi sáng,
   hiện đại, bắt mắt hơn".

   Vòng 64–65 mới nhấc sáng và thêm vài viên nhấn, nhưng MỌI MẶT vẫn là lục
   nên bốn sắc kênh có sẵn trong markup (--v6-blue lơ · --v6-orange hổ phách ·
   --v6-leaf lá · coral) chìm hết vào nền cùng tông. Nhích tiếp cũng vậy.

   Nay đổi CẤU TRÚC SÁNG-TỐI của khối, đây mới là gốc vấn đề:
     · THANH BÊN ứng dụng  → giữ mặt ĐẬM, ngả lục ngọc (#10493A) — có thêm
       một múi sắc thứ hai, và vẫn là chỗ neo để khối đọc ra "cửa sổ ứng dụng".
     · VÙNG NỘI DUNG       → mặt SÁNG #F4FBF6, mực đậm. Đây là chỗ chiếm
       nhiều diện tích nhất; lật nó là cả khối tươi hẳn, và các thẻ bên trong
       mới có nền trắng để sắc nhấn nổi lên.
     · THẺ LIÊN HỆ .v6-spn  → mặt trắng, giữ dải bìa lục bảo → chanh.

   ⚑ Ghi chú vòng 60 có nói "đã thử mặt trắng, người dùng thấy rối". Lần đó
     lật TRẮNG TOÀN BỘ nên mất hết ranh giới. Lần này giữ thanh bên đậm và
     cho từng thẻ một mặt trắng có viền + bóng, nên vẫn còn phân tầng rõ.

   ⚠ KHÔNG đụng token --white: nhiều chỗ lấy nó làm MÀU NỀN, lật nó thành
     mực là chữ đen trên nền đen (bẫy đã ghi ở khối chân trang phía trên).
     Chỉ đổi các token MỰC và khai `color` thẳng cho vùng sáng.
   ══════════════════════════════════════════════════════════════════════════ */
/* ① Token mực — tách hai vùng, thay cho luật gộp .v6-mh * của vòng 65B. */
.v6-app-channel,.v6-app-channel *{
  --v6-gray:#CFE6D2;--v6-mist:#E4F1E6;--dark-text:#E4F1E6;--dark-label:#E4F1E6;--dark-sub:#E4F1E6}
.v6-app-chat,.v6-app-chat *,.v6-spn,.v6-spn *{
  --v6-gray:#4A6B58;--v6-mist:#33513F;--dark-text:#33513F;--dark-label:#4A6B58;--dark-sub:#4A6B58}

/* ② Khung máy và hai vùng */
.v6-mh{background:#13432C;
  box-shadow:0 0 0 1px rgba(143,224,74,.30),0 -2px 0 0 #1FA9E0 inset,
    0 0 64px -16px rgba(31,143,74,.42),0 40px 84px -36px rgba(8,40,26,.40)}
.v6-app{background:#F4FBF6}
.v6-app-channel{background:linear-gradient(180deg,#10493A 0%,#0E3F31 100%)}
.v6-app-channel>b{color:#FFFFFF}
.v6-app-chat{background:#F4FBF6;color:#0B2016}
.v6-app-fld{background:linear-gradient(180deg,transparent,#F4FBF6)}

/* ③ Kênh: mục đang mở là viên HỔ PHÁCH đặc, ba mục còn lại mực sáng. */
.v6-app-channel>span{color:#DCEBDE}
.v6-app-channel>span.active{background:#E9A81C;color:#2A1D02}
.v6-app-channel>span.active i{color:#2A1D02}
.v6-conn em{background:var(--k,#8FE04A)}          /* chấm bên phải — bốn sắc có sẵn */

/* ④ Thẻ trong dòng thời gian: mặt TRẮNG, viền mảnh, mực đậm. */
.v6-app-info>div>p b{color:#0B2016}
.v6-app-info>div>p small{color:#4A6B58}
.v6-app-info>div>p{color:#25412F}
.v6-app-stick,.v6-app-need,.v6-app-hello,.v6-app-mem-card{
  background:#FFFFFF;border:1px solid rgba(12,59,38,.12);color:#0B2016;
  box-shadow:0 6px 18px -12px rgba(8,40,26,.28)}
.v6-app-stick b,.v6-app-need b,.v6-app-mem-card b{color:#0B2016}
.v6-app-stick small,.v6-app-mem-card small{color:#4A6B58}
.v6-app-stick>span{background:var(--green-btn);color:#FFFFFF}
.v6-app-dk{background:#EFF9E9;color:#15653D;border:1px solid rgba(31,143,74,.20)}

/* ⑤ Thẻ "Nhu cầu hợp tác" — ba viên ba sắc, đây là chỗ bắt mắt nhất. */
.v6-app-need-head i{background:#D6F0FA;color:#0E5A74}      /* Đang tìm — lơ   */
.v6-app-need-head span{background:#EFF9E9;color:#15653D}   /* lĩnh vực — lục  */
.v6-app-need-head em{background:#FFE7DE;color:#B42318;font-style:normal}  /* Cần gấp — đỏ */
.v6-app-need-st span{background:#F4FBF6;color:#33513F;border:1px solid rgba(12,59,38,.10)}
.v6-app-need-last small{color:#4A6B58}
.v6-app-need-btn{background:var(--green-btn);color:#FFFFFF}

/* ⑥ Thẻ chào mừng + hai thẻ thành viên — dùng --color sẵn có trong markup. */
.v6-app-hello-cover{background:linear-gradient(96deg,#1F8F4A,#8FE04A 58%,#E9A81C);color:#FFFFFF}
.v6-app-mem-card{border-top:3px solid var(--color,#1F8F4A)}
.v6-app-mem-facts i{background:#D6F0FA;color:#0E5A74}
.v6-app-mem-facts i+i{background:#FDF2DC;color:#8A5A05}
.v6-app-mem-btn{background:#FFFFFF;color:#15653D;border:1px solid #9FC7AC}

/* ⑦ Thẻ liên hệ nổi — mặt trắng, bìa chuyển sắc, mực đậm. */
.v6-spn{background:#FFFFFF;border-color:rgba(12,59,38,.12);color:#0B2016}
.v6-spn b{color:#0B2016}
.v6-spn small{color:#4A6B58}
.v6-spn .avatar{border-color:#FFFFFF}
.v6-spn::after{box-shadow:0 0 0 3px #FFFFFF}

/* ── MỤC MENU ĐANG MỞ: CHỮ TRẮNG, KHÔNG PHẢI MỰC ĐẬM ──────────────────────
   Người dùng: "khi focus Trang chủ background xanh, text đen hơi khó nhìn".
   Đo được: chữ #0B2016 trên nền #1A8245 → 3.51 : 1, KHÔNG đạt AA (cần 4.5).

   Lỗi ở khối "ĐỒNG BỘ MÀU NÚT" phía trên: tôi chỉ khai `background` cho mục
   đang mở mà quên `color`, nên mực rơi về màu mực chung của thanh điều hướng
   (`.v6 .nav a{color:#0C3B26}`). Khai đủ cặp nền + mực: trắng trên #1A8245
   đo 4.86 : 1, và giống hệt nút "Tham gia" ngay cạnh — một thứ ngôn ngữ.   */
.v6 .nav-menu a[aria-current],.v6 .nav-menu a[aria-current="page"],.v6 .nav-menu a.active{
  background:var(--green-btn);color:#FFFFFF;font-weight:700}

/* Khối ĐẦU TRANG cũng phải cắt tràn ngang như .v6-block ─────────────────────
   Đo được scrollWidth 1442 / clientWidth 1440: cụm minh hoạ (thẻ liên hệ nổi
   lệch ra ngoài + các hạt sáng) dôi 2px. Nhỏ, nhưng đủ để cả trang sinh thanh
   cuộn ngang. Cùng lý do và cùng cách chữa với khối thân trang: dùng `clip`
   chứ không `hidden` để không phá position:sticky bên trong.               */
.screen-head{overflow-x:clip}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 67 — THÊM ÁNH TÍM/MẬN LÀM SẮC NHẤN THỨ BA
   Người dùng 23/09: "chỗ màu xanh có nên phối thêm ít màu ánh tím gì đó cho
   bắt mắt, thu hút được ko nhỉ".

   Nên — nhưng làm SẮC NHẤN, không làm mảng. Ba lý do:
     · Bảng màu §3 là danh sách ĐÓNG, và --s1 #E23FB8 (mận) vốn đã nằm trong
       bộ bốn sắc nhấn được duyệt, nên không phải đặt màu mới.
     · Dòng hai của tiêu đề đầu trang ĐÃ đi qua tím (§2B: dải ~290° lục → lục
       ngọc → lam → tím). Rải thêm chút mận ở vài điểm nhỏ là NHẮC LẠI dải đó,
       nên đọc ra có chủ ý chứ không ra lạc màu.
     · Nhưng cả THEME CHÀM/TÍM vừa bị bác ngày 22/09 ("xanh lá đi"). Cho tím
       thành mảng lớn là quay lại đúng thứ vừa bỏ. Nên chỉ chấm, vạch, hạt.
   ══════════════════════════════════════════════════════════════════════════ */
/* ① Vạch tiến độ cuộn dưới thanh điều hướng: thêm chặng mận ở cuối dải. */
.v6 .nav::after{background:linear-gradient(90deg,#1F8F4A 0%,#8FE04A 38%,#E9A81C 72%,#C0399B 100%)}
/* ② Hạt sáng trang trí ở đầu trang: xen kẽ chanh · mận · lơ. */
.v6-light-star--2{background:#C0399B}
.v6-light-star--3{background:#1FA9E0}
/* ③ Gạch dưới tiêu đề khối: kết bằng ánh mận thay vì tắt dần vào hổ phách. */
.v6-st-head .v6-h2::after{background:linear-gradient(90deg,#1F8F4A,#8FE04A 55%,#C0399B)}
/* ④ Chấm điều hướng băng thẻ khi đang ở trang đó. */
.v6-sl-dot button[aria-current="true"]::before,
.v6-st-dot button[aria-current="true"]::before{background:#C0399B}

/* Hai chỗ trượt AA đúng một hơi (đo bằng điểm ảnh thật) ────────────────────
   "Thành viên mới tham gia" — #15653D trên dải chanh #B8D888 = 4.46, thiếu
   0.04. Đậm thêm một nấc thành #114B2D → 5.62. Chữ 12px in hoa, đậm thêm
   không làm đổi dáng khối.                                                  */
.v6-mem-head{color:#114B2D}

/* ── BĂNG THẺ SẢN PHẨM: CAO THÊM MỘT NẤC NỮA ──────────────────────────────
   Người dùng: "Thumbnail chỗ này cho cao hơn chút cho cân đối".
   Đo lại: khối cao 835px, tiêu đề 160px, băng 360px → còn THỪA 475px chiều
   dọc. Nâng băng lên 420–520px (vẫn dưới trần 639px = 835 − 160 − khe 36).

   Nâng chiều cao thì phải nới CẢ CỘT HÌNH, không thì ô hình 150px trên thẻ
   cao 500px lại thành cái vạch dựng đứng — đúng dáng mà lượt trước vừa chữa.
   Cột hình 150 → 170–215px, tỉ lệ ô hình về khoảng 1 : 2,4.

   Mô tả nới từ 3 lên 4 dòng: đo được scrollHeight 78px trong khi chỉ hiện
   59px, tức chữ vẫn đang bị cắt; thẻ cao thêm rồi thì không cần cắt nữa.   */
.v6-block--sl .v6-sl-of{height:clamp(420px,58vh,520px)}
.v6-block--sl .v6-sl-card{grid-template-columns:clamp(170px,29%,215px) minmax(0,1fr)}
.v6-block--sl .v6-sl-open,.v6-sl-card .v6-sl-open{-webkit-line-clamp:4}

/* ── CHIỀU CAO BĂNG: PHẢI GỠ flex-basis THÌ `height` MỚI ĂN ────────────────
   Đặt `height:clamp(420px,58vh,520px)` cho .v6-sl-of mà đo lại vẫn 379px.
   Lý do: `.v6-sl-of{flex:1}` tức `flex-basis:0%`, và trong khung flex DỌC
   thì flex-basis chi phối kích thước TRỤC CHÍNH (chiều cao) — nó đè `height`.
   Phải trả về `flex:0 0 auto` rồi `height` mới có hiệu lực.
   (Cùng họ với bẫy §8 "đặt trần chiều cao lên khung flex dọc".)            */
.v6-block--sl .v6-sl-of{flex:0 0 auto;height:clamp(420px,58vh,520px)}


/* ══════════════════════════════════════════════════════════════════════════
   VÒNG 68 — VÒNG ẢNH ĐẠI DIỆN: MẶT ĐẶC + CHỮ TRẮNG
   Người dùng: "avatar text trắng, background nhạt khó nhìn quá, design lại".

   Bảng gốc ở _common.css là bốn mặt RẤT NHẠT (#A8DFC0 · #CFEBA8 · #A9D8E8 ·
   #F4D79A) vốn đi với chữ mực đậm. Trên Trang chủ có mấy chỗ lại phủ
   `color:#FFFFFF` lên (dòng 1192 cho băng sản phẩm, và luật mô phỏng) →
   trắng nằm trên mặt nhạt, đo ra 1.55–1.58 : 1. Chữ tắt chỉ 11px nên gần như
   không đọc được.

   Chữa bằng cách chọn HẲN một lối, thay vì nửa nọ nửa kia: mặt ĐẶC + chữ
   TRẮNG. Bốn sắc lấy từ bộ --s1..--s4 hạ sáng cho đủ tương phản, nên vòng
   avatar vẫn là chỗ phân biệt người với người (đúng vai §3) mà chữ đọc rõ:
       a1 #1F8F4A 4.86 · a2 #0E7C9B 5.05 · a3 #9C1C7A 6.90 · a4 #8A5A05 5.93
   Chỉ áp trong phạm vi Trang chủ — các màn khác vẫn dùng bảng nhạt + mực đậm
   của _common.css, chỗ đó đang đạt và không có lý do đụng vào.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .avatar{color:#FFFFFF;font-weight:700}
.v6 .avatar.a1{background:#1F8F4A}
.v6 .avatar.a2{background:#0E7C9B}
.v6 .avatar.a3{background:#9C1C7A}
.v6 .avatar.a4{background:#8A5A05}

/* Cao 520px thì HỞ khoảng trống giữa cột chữ: nội dung thẻ (nhãn · tiêu đề ·
   mô tả 4 dòng · ưu đãi · người đăng · hàng nút) chỉ cao ~360px, phần dôi ra
   rơi hết vào khe giữa ô ưu đãi và người đăng. Hạ về 430px — vẫn cao hơn bản
   cũ (360) đúng một nấc như người dùng xin, mà chữ lấp gần kín thẻ.        */
.v6-block--sl .v6-sl-of{height:clamp(390px,50vh,440px)}

/* ── BĂNG THẺ: KHÍT VỚI NỘI DUNG, VÀ CHO XEM ĐỦ CHỮ MẪU ───────────────────
   Người dùng: "Thumbnail chỗ [Sản phẩm và dịch vụ] cảm giác hơi cao quá so
   với content bên trong. Dẫn tới dư thừa nhiều khoảng trắng ở giữa. Cân đối
   thu gọn lại chút, data sample cũng cho full content xem ntn".

   Đo từng thẻ sau khi BỎ cắt dòng: thẻ cao nhất cần 377px, phần còn lại 358–
   359px. Băng đang 440px → dư ~63px, rơi hết vào khe giữa ô ưu đãi và người
   đăng. Đặt 385px: vừa đủ thẻ cao nhất, các thẻ khác chỉ hở ~26px.

   Bỏ luôn `-webkit-line-clamp` ở mô tả và ô ưu đãi — trước đây cắt 2–4 dòng
   là để nhét vào thẻ thấp; nay thẻ đủ cao thì cho hiện HẾT chữ mẫu, đúng ý
   người dùng muốn xem thật nó ra sao. Bỏ cắt cũng hợp §5B: thẻ phải sống
   được với dữ liệu thật, mà dữ liệu thật thì không ai cắt cho vừa ô.       */
.v6-block--sl .v6-sl-of{height:clamp(370px,44vh,390px)}
.v6-block--sl .v6-sl-open,.v6-sl-card .v6-sl-open,
.v6-block--sl .v6-sl-pri,.v6-sl-card .v6-sl-pri{
  -webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible}

/* Hai chỗ chữ trắng còn thiếu biên an toàn ─────────────────────────────────
   · Vòng avatar a1: tôi đặt #1F8F4A — đúng cái mã đo 4.13 với chữ trắng mà
     §0 của _unify.css đã ghi là KHÔNG đạt. Ba sắc kia (a2 5.05 · a3 6.90
     · a4 5.93) đều có biên; a1 phải theo. #17703A đo 7.17.
   · Nút mini trong thẻ: chữ 12px trên #1A8245 đo 4.44 — sát ngưỡng quá, mà
     đây là chữ NHỎ nên cần rộng tay hơn. Về #146237 (7.68).                */
.v6 .avatar.a1{background:#17703A}
.btn.v6-btn-main.v6-btn-mini{background:var(--green-btn-hover)}

/* ══════════════════════════════════════════════════════════════════════════
   Ô TÌM ĐẦU TRANG: MỘT DẤU HIỆU TIÊU ĐIỂM, NẰM TRONG DÁNG VIÊN
   Người dùng: "khi focus vào box search thì lỗi… bỏ cái box viền ngoài màu
   cam kia đi".

   Đo bằng cú CLICK THẬT (el.focus() bằng lệnh KHÔNG bật :focus-visible nên
   mấy lượt đo trước không tái hiện được — đó là lý do tôi tưởng đã xong):
       viên  .v6-search   outline 3px #E9A81C   ← vòng ngoài
       input           outline 3px #E9A81C   ← vòng TRONG
                       box-shadow 0 0 0 1px #FFFFFF
   Thành BA đường viền lồng nhau quanh một ô nhập.

   Luật gây ra vòng trong là `.v6 input:focus-visible` (0,2,1) ở khối tiêu
   điểm phía trên — ĐÚNG BẰNG đặc trưng với `.v6-search input:focus-visible`
   trong _unify.css, mà _home.css nạp sau nên nó thắng.

   Chữa:
   ① Ô nhập bên trong viên KHÔNG có dấu hiệu riêng — viên mới là thứ người
      dùng nhìn thấy như một ô. Viết .v6 .v6-search input (0,3,1) để thắng.
   ② Viên bỏ `outline` cứng (outline-offset 3px tách hẳn ra thành một hình
      chữ nhật rời — chính là "cái box" người dùng nói) và thay bằng QUẦNG
      ôm sát bo góc: viền đổi sang lục + vành lục mờ 3px. Vẫn thấy rõ đang
      focus, nhưng đọc ra là "ô đang gõ" chứ không phải một khung cảnh báo.

   ⚑ Đi lệch §7 (tiêu điểm toàn site là vòng hổ phách). Chỉ lệch ở RIÊNG ô
     tìm đầu trang, vì đây là ô nhập lớn có nút nằm chung trong viên — vòng
     hổ phách lệch 3px quanh nó đọc ra như lỗi. Nút và liên kết vẫn giữ vòng
     hổ phách như cũ. Muốn đồng bộ tuyệt đối thì đổi lại một dòng.
   ══════════════════════════════════════════════════════════════════════════ */
.v6 .v6-search input:focus,
.v6 .v6-search input:focus-visible{outline:none;box-shadow:none;border:0}
.v6 .v6-search:focus-within{outline:none;border-color:#1F8F4A;
  box-shadow:0 0 0 3px rgba(31,143,74,.22),0 10px 26px -16px rgba(8,40,26,.30)}

/* Dải bìa thẻ liên hệ: cùng dải lục → chanh → hổ phách với băng "Chào mừng
   thành viên mới" ngay phía trên trong cửa sổ ứng dụng ──────────────────────
   Người dùng: "header phần thumbnail contact cho phối màu xanh cam giống
   thumbnail phía trên đi".
   Bìa đang là lục → chanh (hai chặng), băng chào mừng là lục → chanh → hổ
   phách (ba chặng). Hai thứ nằm cạnh nhau trong cùng một khung hình nên lệch
   nhau một chặng là nhìn ra ngay. Dùng đúng dải của băng chào mừng, chỉ đổi
   góc cho hợp bề ngang thẻ.                                                */
.v6-spn-cover{background:linear-gradient(120deg,#1F8F4A 0%,#8FE04A 58%,#E9A81C 100%)}

/* Thanh điều hướng: bỏ blur lồng nhau và cú nhảy 1px khi rê ────────────────
   Lý do đầy đủ ở _unify.css §34. Khai lại ở đây vì _home.css nạp
   SAU, luật `.v6 .nav-menu{backdrop-filter:blur(12px)}` và
   `.v6 .nav-menu a:hover{transform:translateY(-1px)}` ở trên sẽ đè ngược. */
.v6 .nav-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.88)}
.v6 .nav-menu a:hover{transform:none}
.v6 .nav .btn--gold:hover{transform:none}


/* ═══ Rê chuột không tự dịch chỗ  ·  23/09 ═══════════════════════════════
   Lý do đầy đủ ở _unify.css §36. Khai lại ở đây vì _home.css nạp
   SAU, các luật .v6…:hover{transform:translateY(…)} phía trên cùng độ đặc
   trưng sẽ đè ngược lại khối §36. */
.btn.v6-btn-main:hover,
.btn.v6-btn-white:hover,
.v6-ev-card:hover,
.v6-sl-card:hover,
.v6-chat-bubble:hover,
.v6-mem-line:hover,
.v6-st-line:hover,
.v6 .nav .btn--gold:hover,
.v6 .nav-menu a:hover{
  transform:none;translate:none}

/* Xem _unify.css: luật gỡ §36 đè mất cú lún lúc bấm. Khai lại, và phải
   khai ở ĐÂY nữa vì trang chủ nạp _home.css sau cùng. */
.v6 .btn:hover:active,
.v6 .nav .btn:hover:active{transform:scale(.98)}


/* ══════════════════════════════════════════════════════════════════════════
   TRANG CHỦ "TRÍ TUỆ" · 25/09/2026 · prefix .hp- · ⚑ CHƯA QUA KH
   Thay phần thân v6 "mô phỏng ứng dụng" (cất ở Archieved/2026-09-25-trang-
   chu-v6-mo-phong-app/). Các luật .v6-* phía trên nay KHÔNG còn phần tử nào
   khớp, trừ thanh điều hướng · chân trang · ngăn menu · hộp thoại quyền (.v6 .nav,
   .v6 .foot, .v6 .drawer-menu, .dialog--access) — những thứ đó VẪN DÙNG, đừng
   xoá cả khối khi dọn. Lý do từng khối: chú thích đầu index.html.
   Đặt ở CUỐI file (§7). Bảng màu dưới đây đăng ký ở DESIGN_WEB_STANDARDS §2A·11.
   ══════════════════════════════════════════════════════════════════════════ */
.hp{
  --hp-nav:65px;                    /* .nav cao 64 + 1px kẻ đáy (_common.css) */
  --hp-ink:#15241A; --hp-ink-2:#3F5A45; --hp-ink-3:#56645A; --hp-ink-4:#5B6758;
  --hp-forest:#1F5A2E; --hp-forest-2:#153B20;
  --hp-green:#2F7D3A; --hp-green-2:#2F8F3A; --hp-teal:#15847A; --hp-teal-ink:#0F5E57;
  --hp-lime:#A3D14B; --hp-lime-pale:#E4F3CF;
  --hp-gold:#F2B544; --hp-gold-2:#EBA531; --hp-gold-ink:#6B4A0B; --hp-gold-pale:#FDF1D6;
  --hp-teal-pale:#D9F0EC; --hp-red:#B83A34; --hp-red-pale:#FBE5E3;
  --hp-cream:#F2F8E8; --hp-line:rgba(47,125,58,.12);
  --hp-shadow:0 2px 4px rgba(31,90,46,.06),0 30px 60px -30px rgba(21,90,60,.5);
  --hp-ease:cubic-bezier(.16,1,.3,1);
  --hp-grad:linear-gradient(120deg,#287D34 0%,#1F7D4A 50%,var(--hp-teal) 100%);   /* chữ trắng ≥ 4.55 cả dải (đầu 5.16) */
  background:#fff;color:var(--hp-ink);font-family:'Inter',var(--font-ui)}
body:has(.hp){background:#fff}
.hp :focus-visible{outline-color:var(--hp-green)}
@container app (max-width:1023px){.hp-hero,.hp-block,.hp-progress{--hp-nav:61px}}

/* Cuộn dừng khít đầu khối — PROXIMITY, không mandatory (§5C). _home.css chỉ trang
   chủ nạp nên không lan sang màn trong (bẫy §8 "scroll-snap trên .khoi"). */
html:has(.hp){scroll-snap-type:y proximity;scroll-padding-top:var(--hp-nav,65px)}
.hp .screen-head,.hp-block{scroll-snap-align:start}

/* ── Nút ─────────────────────────────────────────────────────────────────── */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;
  font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;
  transition:background .25s,box-shadow .25s,border-color .25s,color .25s}
.hp-btn .ic{width:18px;height:18px}
.hp-btn--main{background:var(--hp-grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 24px -12px rgba(21,132,122,.8)}
.hp-btn--main:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 30px -12px rgba(21,132,122,.95)}
.hp-btn--line{background:#fff;color:var(--hp-green);border-color:rgba(47,125,58,.5);box-shadow:0 8px 18px -12px rgba(31,90,46,.5)}
.hp-btn--line:hover{background:var(--hp-cream);border-color:var(--hp-green)}
.hp-btn--white{background:#fff;color:var(--hp-forest);box-shadow:0 10px 22px -12px rgba(0,0,0,.45)}
.hp-btn--white:hover{background:var(--hp-lime-pale)}
.hp-btn--sm{min-height:38px;padding:0 16px;font-size:14px}
.hp-round{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--hp-line);color:var(--hp-green);
  box-shadow:0 10px 20px -10px rgba(21,90,60,.55);transition:background .25s,box-shadow .25s}
.hp-round:hover{background:var(--hp-cream);box-shadow:0 14px 26px -10px rgba(21,90,60,.7)}
.hp-round .ic{width:20px;height:20px}

/* ── Chữ dùng chung ──────────────────────────────────────────────────────── */
.hp-kicker{display:block;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--hp-green)}
.hp-kicker--gold{color:var(--hp-gold-ink)}
.hp-kicker--teal{color:var(--hp-teal-ink)}
.hp-meta{display:block;font-size:13px;color:var(--hp-ink-4)}
.hp-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 6px 12px -6px rgba(31,90,46,.5)}
.hp-tags{display:flex;flex-wrap:wrap;gap:6px}
.hp-tag{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 10px;line-height:1.4}
.hp-tag .ic{width:13px;height:13px}
.hp-tag--seek{background:linear-gradient(180deg,#F7C766,var(--hp-gold-2));color:#3D2A05}
.hp-tag--field{background:var(--hp-teal-pale);color:var(--hp-teal-ink)}
.hp-tag--prog{background:var(--hp-gold-pale);color:var(--hp-gold-ink)}
.hp-tag--urgent{background:var(--hp-red-pale);color:var(--hp-red)}
.hp-date{display:block;flex:none;width:62px;border-radius:14px;overflow:hidden;text-align:center;background:#fff;color:var(--hp-ink);box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}
.hp-date b{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:26px;line-height:1.15;padding-top:5px}
.hp-date span{display:block;background:linear-gradient(180deg,#F7C766,var(--hp-gold-2));font-size:12px;font-weight:700;padding:3px 0;color:#3D2A05}

/* ══ ① ĐẦU TRANG ═════════════════════════════════════════════════════════ */
.hp .screen-head{position:relative;margin-top:0}
.hp-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:var(--hp-hero-h,calc(100svh - var(--hp-nav) - 72px));
  background:
    radial-gradient(760px 520px at 86% 34%,rgba(143,190,48,.42),transparent 62%),
    radial-gradient(640px 440px at 58% 108%,rgba(47,169,160,.26),transparent 62%),
    radial-gradient(560px 380px at 0% 0%,rgba(242,181,68,.22),transparent 62%),
    linear-gradient(160deg,#F8FCF0 0%,#E9F5D8 55%,#D5ECBA 100%)}
.hp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(47,125,58,.14) 1.2px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.hp-hero::after{content:"";position:absolute;width:560px;height:560px;right:9%;top:-6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.95),rgba(255,255,255,0) 62%)}
.hp-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;will-change:transform}
.hp-glow--1{width:520px;height:520px;right:4%;top:0;background:rgba(170,222,70,.62);animation:hp-drift-a 38s ease-in-out infinite}
.hp-glow--2{width:460px;height:460px;right:30%;bottom:-160px;background:rgba(60,199,184,.42);animation:hp-drift-b 44s ease-in-out infinite}
.hp-glow--3{width:380px;height:380px;left:-80px;top:-60px;background:rgba(255,200,87,.40);animation:hp-drift-c 40s ease-in-out infinite}
.hp-glow--4{width:340px;height:340px;right:-60px;bottom:40px;background:rgba(124,196,255,.36);animation:hp-drift-b 50s ease-in-out infinite reverse}
@keyframes hp-drift-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,60px) scale(1.12)}}
@keyframes hp-drift-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,-50px) scale(.9)}}
@keyframes hp-drift-c{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,40px)}}
.hp-hero-grid{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:32px;
  padding-top:clamp(8px,3.4svh,44px);padding-bottom:clamp(88px,14svh,130px)}
.hp-h1{margin:0;font-family:Montserrat,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.2px;line-height:1.12;
  font-size:clamp(38px,7.2svh,60px);white-space:nowrap;color:var(--hp-forest-2);text-shadow:0 1px 0 rgba(255,255,255,.9),0 16px 34px rgba(31,90,46,.16)}
/* Dòng hai chuyển sắc có vệt chạy 9 giây (§2B) — chữ đứng thẳng, không bộ lọc (§8). */
.hp-h1 em{font-style:normal;text-shadow:none;color:transparent;-webkit-background-clip:text;background-clip:text;background-size:200% 100%;
  background-image:linear-gradient(90deg,var(--hp-green-2) 0%,var(--hp-teal) 25%,#1668B0 50%,var(--hp-teal) 75%,var(--hp-green-2) 100%);
  animation:hp-shine 9s linear infinite}
@keyframes hp-shine{to{background-position:-200% 0}}
.hp-lead{margin:clamp(10px,2.4svh,22px) 0 clamp(14px,2.8svh,28px);max-width:560px;font-size:clamp(16px,2.6svh,20px);line-height:1.55;color:var(--hp-ink-2)}
.hp-search{display:flex;align-items:center;gap:12px;max-width:640px;margin-bottom:clamp(12px,2.4svh,22px);padding:8px 8px 8px 20px;border-radius:16px;
  background:rgba(255,255,255,.92);border:1px solid #fff;box-shadow:0 0 0 1px rgba(47,125,58,.18),0 2px 6px rgba(31,90,46,.08),0 34px 60px -24px rgba(21,100,80,.6)}
.hp-search>.ic{width:22px;height:22px;color:var(--hp-green);flex:none}
/* Đặc trưng (0,3,1): thắng luật reset input:not(...):not(...) (0,2,1) của _unify.css —
   thua là ô nhập tự vẽ thêm khung trắng bên trong viên (bẫy §8 "2 layout chồng nhau"). */
.hp-search input:not([type="checkbox"]):not([type="radio"]){flex:1;min-height:0;box-shadow:none;border-radius:0;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--hp-ink);padding:10px 0}
.hp-search input::placeholder{color:var(--hp-ink-4)}
.hp-search input:not([type="checkbox"]):not([type="radio"]):focus-visible{outline:0;box-shadow:none}
.hp-search:focus-within{box-shadow:0 0 0 2px var(--hp-green),0 34px 60px -24px rgba(21,100,80,.6)}
.hp-search .hp-btn{border-radius:11px;min-height:46px}
.hp-hero-btns{display:flex;flex-wrap:wrap;gap:14px}
.hp-hero-art{display:flex;justify-content:center;min-width:0}
.hp-orb-wrap{position:relative;height:clamp(280px,56svh,500px);aspect-ratio:640/500;max-width:100%}
.hp-orb{display:block;width:100%;height:100%}
.hp-orb-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-radius:999px;
  padding:.45em 1.1em;font-size:clamp(11px,1.55svh,13.5px);font-weight:600;line-height:1.2;box-shadow:0 10px 22px -10px rgba(31,90,46,.55);
  animation:hp-float 6s ease-in-out infinite}
.hp-orb-chip--a{left:67.2%;top:33.6%;background:#fff;color:var(--hp-ink);border:1px solid #CDE3B4;animation-delay:-2s}
.hp-orb-chip--a i{width:.75em;height:.75em;border-radius:50%;background:var(--hp-gold)}
.hp-orb-chip--b{left:6.2%;top:36.8%;background:linear-gradient(180deg,#F8CD6E,var(--hp-gold-2));color:#3D2A05;animation-delay:-4s}
/* Hoạt ảnh trong chòm: luồng chạy theo nan hoa, người trôi, sóng toả từ logo,
   hai chấm bay vòng, cửa sổ sáng tắt, sao lấp lánh. */
.hp-orb-spoke{animation:hp-spoke 1.4s linear infinite}
@keyframes hp-spoke{to{stroke-dashoffset:-20}}
.hp-orb-float{animation:hp-float 6s ease-in-out infinite}
@keyframes hp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hp-orb-wave{transform-box:fill-box;transform-origin:center;animation:hp-wave 3.6s ease-out infinite}
.hp-orb-wave--late{animation-delay:1.8s}
@keyframes hp-wave{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.hp-orb-spin{transform-origin:320px 222px;animation:hp-spin 26s linear infinite}
.hp-orb-spin--back{animation-duration:34s;animation-direction:reverse}
@keyframes hp-spin{to{transform:rotate(360deg)}}
.hp-orb-star{animation:hp-twinkle 3s ease-in-out infinite}
@keyframes hp-twinkle{0%,100%{opacity:1}50%{opacity:.25}}
.hp-orb-window{animation:hp-window 5s steps(1) infinite}
@keyframes hp-window{0%,70%{opacity:1}72%,90%{opacity:.2}}

/* Dải giá trị: tấm kính nổi đè lên mép dưới đầu trang */
.hp-values{position:relative;z-index:2;margin-top:-78px}
.hp-values-card{display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;overflow:hidden;border-radius:20px;
  background:rgba(255,255,255,.84);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(31,90,46,.08),0 44px 80px -34px rgba(21,90,70,.7)}
.hp-values-card:not(:has(.hp-next)){grid-template-columns:repeat(3,1fr)}
.hp-value{display:flex;gap:14px;padding:clamp(12px,2.1svh,20px) 22px;border-right:1px solid var(--hp-line)}
.hp-value h2{margin:0 0 2px;font-size:clamp(15px,2svh,16.5px);font-weight:700;line-height:1.3}
.hp-value p{margin:0;font-size:13.5px;line-height:1.45;color:var(--hp-ink-3)}
.hp-value-ic{flex:none;display:grid;place-items:center;width:clamp(38px,5.4svh,46px);height:clamp(38px,5.4svh,46px);border-radius:12px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 22px -10px rgba(21,100,80,.65)}
.hp-value-ic .ic{width:55%;height:55%}
.hp-value-ic--green{background:linear-gradient(145deg,#9BD24A,var(--hp-green-2))}
.hp-value-ic--gold{background:linear-gradient(145deg,#FFD166,#E07F00)}
.hp-value-ic--teal{background:linear-gradient(145deg,#4FD1C1,var(--hp-teal))}
.hp-next{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:clamp(10px,1.8svh,18px) 22px;color:#fff;text-decoration:none;
  background:radial-gradient(300px 180px at 100% 0%,rgba(190,235,100,.6),transparent 70%),linear-gradient(125deg,#23742F 0%,#1B8A5E 55%,var(--hp-teal) 100%)}
.hp-next::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;border:24px solid rgba(255,255,255,.1);animation:hp-spin 18s linear infinite}
.hp-next .hp-date{width:58px}.hp-next .hp-date b{font-size:24px;padding-top:4px}
.hp-next-text{position:relative;z-index:1;min-width:0}
.hp-next small{display:block;font-size:13px;font-weight:600;color:#E3F5C4}
.hp-next b{display:block;font-size:clamp(15px,2svh,16.5px);line-height:1.35;margin:1px 0 6px}
.hp-next-go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;border-bottom:1.5px solid var(--hp-gold)}
.hp-next-go .ic{width:16px;height:16px}
.hp-next:hover .hp-next-go{border-bottom-color:#fff}

/* ══ KHỐI CHUNG — mỗi khối cao đúng một màn trừ thanh điều hướng ═════════ */
.hp-block{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--hp-nav));
  padding-block:clamp(16px,4svh,64px)}
.hp-block>.container{width:100%;position:relative;z-index:1}   /* khối flex → .container width:100% (§4, §8) */
.hp-block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:clamp(14px,3svh,32px)}
.hp-h2{margin:0;font-family:Montserrat,sans-serif;font-weight:800;text-transform:uppercase;line-height:1.12;font-size:clamp(24px,4.2svh,40px);
  color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(90deg,var(--hp-forest) 0%,var(--hp-teal) 100%)}
.hp-h2::after{content:"";display:block;width:56px;height:clamp(4px,.6svh,5px);border-radius:3px;margin-top:clamp(8px,1.3svh,14px);
  background:linear-gradient(90deg,var(--hp-gold),var(--hp-lime));box-shadow:0 4px 10px -4px rgba(242,181,68,.8)}
.hp-block-head p{margin:clamp(6px,1.3svh,14px) 0 0;max-width:720px;font-size:clamp(14.5px,2.3svh,17px);line-height:1.55;color:var(--hp-ink-3)}

/* ══ ② TIN TỨC ════════════════════════════════════════════════════════════ */
.hp-news{--hp-news-x:400px;--hp-news-w:clamp(320px,calc((100svh - var(--hp-nav) - var(--hp-news-x)) * 1.7778),60%);display:grid;grid-template-columns:minmax(0,var(--hp-news-w)) minmax(0,1fr);gap:28px;align-items:stretch}
.hp-news-lead,.hp-news-list{background:#fff;border:1px solid var(--hp-line);border-radius:20px;box-shadow:var(--hp-shadow)}
.hp-news-lead{position:relative;display:flex;flex-direction:column;overflow:hidden}
.hp-news-frame{display:grid;flex:1}
.hp-news-slide{grid-area:1/1;display:flex;flex-direction:column;color:inherit;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.hp-news-slide.is-on{opacity:1;visibility:visible;transition:opacity .45s ease}
.hp-news-img{display:block;aspect-ratio:16/9;overflow:hidden;position:relative}
.hp-news-img img{width:100%;height:100%;object-fit:cover;display:block}
.hp-news-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 45%,rgba(8,30,20,.3))}
.hp-news-text{display:flex;flex-direction:column;padding:clamp(14px,2.6svh,26px) 28px clamp(16px,2.4svh,24px)}
.hp-news-text .hp-meta{padding-right:210px}   /* cùng hàng với chấm + nút chuyển tin */
.hp-news-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:clamp(4px,.8svh,8px) 0;font-size:clamp(19px,3svh,25px);line-height:1.3;font-weight:700}
.hp-news-slide:hover .hp-news-title{text-decoration:underline;text-underline-offset:4px}
.hp-news-sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(14.5px,2.1svh,16px);line-height:1.55;color:var(--hp-ink-3);margin-bottom:8px}
.hp-news-ctrl{position:absolute;right:24px;bottom:clamp(8px,1.6svh,16px);display:flex;align-items:center;gap:8px;z-index:1}
.hp-news-dots{display:flex;gap:6px;margin-right:6px}
.hp-news-ctrl .hp-round{width:38px;height:38px}
.hp-news--one .hp-news-ctrl{display:none}
.hp-news-list{display:flex;flex-direction:column;padding:clamp(6px,1.2svh,12px) 22px}
.hp-news-row{position:relative;flex:1;display:flex;align-items:center;gap:14px;margin:0 -12px;padding:clamp(8px,1.7svh,18px) 12px;border-top:1px solid var(--hp-line);
  color:inherit;text-decoration:none;border-radius:14px;transition:background .3s,box-shadow .3s}
.hp-news-row:first-child{border-top-color:transparent}
.hp-news-row:hover{background:#F7FBF1}
.hp-news-row.is-on{background:linear-gradient(135deg,#F3FAE8,#E4F3CF);border-top-color:transparent;box-shadow:inset 0 1px 0 #fff,0 12px 24px -18px rgba(31,90,46,.55)}
.hp-news-row.is-on+.hp-news-row{border-top-color:transparent}
.hp-news-thumb{flex:none;width:clamp(104px,17svh,140px);aspect-ratio:16/9;border-radius:10px;overflow:hidden;box-shadow:0 8px 16px -10px rgba(31,90,46,.5)}
.hp-news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hp-news-row-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.hp-news-row-text b{font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-news-bar{display:none;position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:#DCE9CF;overflow:hidden}
.hp-news-row.is-on .hp-news-bar{display:block}
.hp-news-bar::after{content:"";display:block;height:100%;width:0;border-radius:2px;background:var(--hp-grad);animation:hp-bar 6s linear forwards}
.is-paused .hp-news-bar::after{animation-play-state:paused}
@keyframes hp-bar{to{width:100%}}
@media (max-height:700px){.hp-news-row-text b{-webkit-line-clamp:1}}
/* Màn thấp: chữ tin lớn gọn lại để ẢNH được rộng (ảnh giữ 16:9 — không co chiều cao) */
@media (max-height:760px){.hp-news{--hp-news-x:265px}.hp-news-title{-webkit-line-clamp:1}.hp-news-sum{display:none}}

/* ══ ③ SỰ KIỆN — khối đậm ═══════════════════════════════════════════════ */
.hp-block--events{overflow:hidden;color:#fff;background:
  radial-gradient(720px 420px at 8% 0%,rgba(181,224,79,.5),transparent 60%),
  radial-gradient(820px 520px at 100% 100%,rgba(70,160,235,.5),transparent 60%),
  linear-gradient(125deg,#1F6A2B 0%,#12776C 55%,#1A5C9C 100%)}
.hp-block--events::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;left:38%;top:-260px;background:rgba(255,255,255,.1);filter:blur(60px);animation:hp-drift-b 36s ease-in-out infinite}
.hp-block--events .hp-h2{background:none;color:#fff}
.hp-block--events .hp-h2::after{background:linear-gradient(90deg,#FFD166,#B5E04F)}
.hp-block--events .hp-block-head p{color:rgba(255,255,255,.92)}
.hp-ev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.hp-ev-grid:has(>.hp-ev:only-child){grid-template-columns:minmax(0,560px)}
.hp-ev{display:flex;flex-direction:column;overflow:hidden;background:#fff;color:var(--hp-ink);border-radius:20px;border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2px 6px rgba(0,0,0,.1),0 40px 70px -30px rgba(0,20,40,.7)}
.hp-ev-img{position:relative;aspect-ratio:16/9}
.hp-ev-img img{width:100%;height:100%;object-fit:cover;display:block}
.hp-ev-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 45%,rgba(8,30,20,.35))}
.hp-ev-status{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.hp-dot{width:8px;height:8px;border-radius:50%;background:#9AA39A}
.hp-ev-status--live .hp-dot{background:#3FA34D;animation:hp-pulse 1.8s ease-out infinite}
.hp-ev-status--soon .hp-dot{background:var(--hp-teal)}
@keyframes hp-pulse{0%{box-shadow:0 0 0 0 rgba(63,163,77,.7)}100%{box-shadow:0 0 0 9px rgba(63,163,77,0)}}
.hp-ev-img .hp-date{position:absolute;left:14px;bottom:-26px;z-index:1}
.hp-ev-body{flex:1;display:flex;flex-direction:column;padding:clamp(30px,4.4svh,36px) 20px clamp(12px,2.4svh,20px)}
.hp-ev-body h3{margin:0;font-size:clamp(16px,2.3svh,20px);line-height:1.35;font-weight:700}
.hp-ev-body h3 a{color:inherit;text-decoration:none}
.hp-ev-body h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.hp-ev-line{display:flex;align-items:center;gap:6px;margin:clamp(3px,.9svh,8px) 0 0;font-size:14px;color:var(--hp-ink-3)}
.hp-ev-line .ic{width:16px;height:16px;color:var(--hp-green)}
.hp-ev-foot{margin-top:auto;padding-top:clamp(8px,1.9svh,18px)}
.hp-ev-perks{display:flex;flex-wrap:wrap;gap:12px 26px;margin:clamp(12px,2.8svh,30px) 0 0;padding:clamp(9px,1.7svh,18px) 24px;list-style:none;border-radius:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:15px}
.hp-ev-perks li{display:flex;align-items:center;gap:8px}
.hp-ev-perks .ic{width:20px;height:20px;color:#D9F2A8}
@media (max-height:800px){.hp-ev-perks{display:none}}
@media (max-height:640px){.hp-ev-body>.hp-ev-line+.hp-ev-line{display:none}}

/* ══ ④ SẢN PHẨM VÀ DỊCH VỤ — sân khấu + hàng thẻ tên (khách chọn 25/09) ══
   Chống "nhạt nhoà": nền khối lục–ngọc ĐẬM hơn thẻ; sân khấu là thẻ TRẮNG bóng sâu;
   mỗi bài một sắc --tone (khung ảnh, biểu tượng, vạch trên thẻ tên). */
.hp-tone--coral{--tone:#E8745A;--tone-ink:#9C3B22;--tone-pale:#FDE9E2}
.hp-tone--green{--tone:#4CAF50;--tone-ink:#1F6A2B;--tone-pale:#E4F3D8}
.hp-tone--amber{--tone:#F2A12E;--tone-ink:#7A4E00;--tone-pale:#FDF0D6}
.hp-tone--blue{--tone:#3D8FE0;--tone-ink:#1D5AA3;--tone-pale:#E1EEFB}
.hp-tone--violet{--tone:#7C6BD6;--tone-ink:#4B3FA0;--tone-pale:#ECE8FB}
.hp-tone--teal{--tone:#1FA898;--tone-ink:#0F5E57;--tone-pale:#D9F3EF}
.hp-block--sol{background:
  radial-gradient(900px 500px at 0% 0%,rgba(143,190,48,.42),transparent 60%),
  radial-gradient(900px 520px at 100% 100%,rgba(21,132,122,.34),transparent 60%),
  linear-gradient(170deg,#D3EABD 0%,#BFE0D0 100%)}
.hp-block--sol .hp-h2{background-image:linear-gradient(90deg,#123F1F,var(--hp-teal-ink))}
.hp-block--sol .hp-block-head p{color:#2E4A35}
/* MỘT khung trắng: sân khấu trên + hàng thẻ tên dưới, ngăn bằng kẻ chỉ (mẫu khách chọn) */
.hp-sol{--hp-sol-w:clamp(34%,calc((100svh - var(--hp-nav) - 455px) * 1.7778),56%);display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:26px;border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(21,60,40,.1),0 46px 80px -40px rgba(12,50,30,.6)}
.hp-sol-stage{position:relative;display:grid}
.hp-sol-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,var(--hp-sol-w)) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:center;
  padding:clamp(14px,2.4svh,24px) clamp(14px,2.4svh,24px) clamp(14px,2.4svh,24px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.hp-sol-slide.is-on{opacity:1;visibility:visible;transition:opacity .45s ease}
.hp-sol-img{position:relative;display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--tone-pale);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 22%,#fff),0 22px 40px -22px color-mix(in srgb,var(--tone) 70%,#000)}
.hp-sol-img img{width:100%;height:100%;object-fit:cover;display:block}
.hp-sol-slide.is-on .hp-sol-img img{animation:hp-sol-zoom 6s ease-out both}
@keyframes hp-sol-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hp-sol-tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#fff;
  color:var(--tone-ink);font-size:13px;font-weight:700;box-shadow:0 8px 18px -8px rgba(0,0,0,.35)}
.hp-sol-tag .ic{width:16px;height:16px}
.hp-sol-text{padding-right:clamp(8px,2vw,28px);min-width:0}
.hp-sol-kicker{color:var(--tone-ink)}
.hp-sol-text h3{margin:clamp(4px,1svh,10px) 0 clamp(6px,1.2svh,12px);font-size:clamp(20px,3.2svh,30px);line-height:1.25;font-weight:700}
.hp-sol-text h3 a{color:inherit;text-decoration:none}
.hp-sol-text h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.hp-sol-sum{margin:0;font-size:clamp(14.5px,2svh,16px);line-height:1.6;color:var(--hp-ink-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hp-sol-deal{display:flex;align-items:center;gap:10px;margin:clamp(10px,1.8svh,18px) 0;padding:10px 14px;border-radius:12px;border:1.5px dashed #E0A93A;
  background:linear-gradient(135deg,#FFF6DD,#FCE3A6);color:var(--hp-gold-ink);font-size:14.5px;line-height:1.4}
.hp-sol-deal .ic{width:22px;height:22px;flex:none;color:#B7790B}
.hp-sol-foot{display:flex;align-items:center;gap:12px}
.hp-av--lg{width:44px;height:44px}
.hp-sol-who{flex:1;min-width:0;font-size:13.5px;line-height:1.3}
.hp-sol-who b{display:block;font-size:15px}
.hp-sol-who span{display:block;color:var(--hp-ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:760px){.hp-sol-sum{-webkit-line-clamp:2}}
@media (max-height:680px){.hp-sol-sum{display:none}}
/* Hàng thẻ tên: dải liền trong khung, kẻ chỉ giữa các ô; ô đang xem nền trắng + vạch sắc chạy */
.hp-sol-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--hp-line);background:#F5F9EF}
.hp-sol-tab{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(12px,2svh,18px) 18px;border-right:1px solid var(--hp-line);
  color:var(--hp-ink);text-decoration:none;transition:background .3s}
.hp-sol-tab:last-child{border-right:0}
.hp-sol-tab:hover{background:#fff}
.hp-sol-bar{position:absolute;left:0;right:0;top:-1px;height:3px;background:transparent}
.hp-sol-bar::after{content:"";display:block;height:100%;width:0;background:var(--tone)}
.hp-sol-tab.is-on{background:#fff}
.hp-sol-tab.is-on .hp-sol-bar{background:color-mix(in srgb,var(--tone) 25%,#fff)}
.hp-sol-tab.is-on .hp-sol-bar::after{animation:hp-bar 6s linear forwards}
.hp-sol.is-paused .hp-sol-bar::after{animation-play-state:paused}
.hp-sol-tab-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--tone-ink)}
.hp-sol-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:9px;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 70%,#fff),var(--tone));box-shadow:0 8px 14px -8px var(--tone)}
.hp-sol-ic .ic{width:16px;height:16px}
.hp-sol-tab b{font-size:14.5px;line-height:1.38;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-sol-tab.is-on b{color:var(--hp-forest)}
.hp-sol-tab-deal{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--hp-gold-ink)}
.hp-sol-tab-deal .ic{width:14px;height:14px;color:#B7790B}
.hp-sol-tab-go{display:none;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--hp-green)}
.hp-sol-tab-go .ic{width:14px;height:14px}
.hp-sol-tab.is-on .hp-sol-tab-go{display:inline-flex}
.hp-sol--one .hp-sol-tabs{display:none}
@media (max-height:700px){.hp-sol-tab-deal{display:none}}

/* ══ ④ lượt 3 (25/09) — người dùng: "vẫn như vỡ layout, cân đối lại".
   Nguyên nhân: ảnh là một thẻ con thụt vào trong thẻ (đệm + vành sắc + bóng) nên mép
   ảnh, mép chữ và mép hàng thẻ tên không thẳng hàng nào; ô đang chọn cao hơn ô khác.
   Sửa: THẺ CHIA ĐÔI — ảnh tràn sát mép trái/trên của khung (không đệm, không vành),
   chữ một cột căn giữa theo chiều dọc với đệm đều; hàng thẻ tên cùng lề trái với
   khung; mọi ô cao bằng nhau (bỏ dòng "Xem chi tiết"). */
.hp-sol-slide{padding:0;gap:0;align-items:stretch}
/* bề ngang = đúng cột; cao tối thiểu 16:9 của cột, cột chữ cao hơn thì ảnh cover (không méo) */
.hp-sol-img{border-radius:0;box-shadow:none;width:100%;height:100%;aspect-ratio:auto;min-height:calc(var(--hp-sol-w) * .5625)}
.hp-sol-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,rgba(255,255,255,.18))}
.hp-sol-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(18px,3svh,36px) clamp(24px,3vw,52px)}
.hp-sol-tag{left:18px;top:18px}
.hp-sol-foot{margin-top:2px}
.hp-sol-tab-go,.hp-sol-tab.is-on .hp-sol-tab-go{display:none}
.hp-sol-tabs{background:#F7FAF2}
.hp-sol-tab{padding:clamp(12px,2svh,18px) clamp(16px,1.6vw,24px)}
.hp-sol-tab.is-on{background:#fff;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--tone) 18%,#fff)}

/* ══ ④ lượt 4 (25/09) — người dùng: hàng thẻ tên "nhạt nhoà, lẫn vào nhau", cần "mềm
   mại, phân biệt rõ". Hàng thẻ vẫn NẰM TRONG khung (không tách rời — lượt 2 bị chê vỡ),
   nhưng mỗi thẻ thành một ô bo tròn riêng, nền nhạt theo SẮC của bài, cách nhau 12px.
   Ô đang xem: nền trắng, viền sắc 2px, bóng mềm màu sắc — nổi lên khỏi hàng. */
.hp-sol-tabs{gap:12px;padding:12px;border-top:0;background:linear-gradient(180deg,#F3F8EC,#EAF4E2)}
.hp-sol-tab{border-right:0;border-radius:16px;background:color-mix(in srgb,var(--tone-pale) 80%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 18%,transparent);transition:background .3s,box-shadow .3s}
.hp-sol-tab:hover{background:color-mix(in srgb,var(--tone-pale) 55%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 35%,transparent),0 10px 20px -14px var(--tone)}
.hp-sol-tab.is-on{background:#fff;box-shadow:inset 0 0 0 2px var(--tone),0 16px 28px -16px color-mix(in srgb,var(--tone) 85%,#000)}
.hp-sol-bar{left:16px;right:16px;top:auto;bottom:8px;height:3px;border-radius:2px;overflow:hidden}
.hp-sol-tab.is-on .hp-sol-bar{background:color-mix(in srgb,var(--tone) 20%,#fff)}
.hp-sol-tab.is-on b{color:var(--tone-ink)}
.hp-sol-tab-head{white-space:nowrap;min-width:0}
.hp-sol-lv{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hp-sol-tab{padding-bottom:clamp(14px,2.2svh,20px)}

/* ══ ⑤ NHU CẦU HỢP TÁC — nền ấm ══════════════════════════════════════════ */
.hp-block--needs{background:
  radial-gradient(720px 420px at 100% 0%,rgba(255,200,87,.42),transparent 60%),
  radial-gradient(720px 420px at 0% 100%,rgba(163,209,75,.28),transparent 60%),
  linear-gradient(160deg,#FFFAEE,#FFF0D0)}
.hp-needs{display:grid;grid-template-columns:400px minmax(0,1fr);gap:48px;align-items:start}
.hp-needs-intro>p{margin:clamp(6px,1.3svh,14px) 0 clamp(14px,2.8svh,22px);font-size:clamp(14.5px,2.3svh,17px);line-height:1.55;color:var(--hp-ink-3)}
.hp-needs-intro .hp-h2{margin-bottom:clamp(8px,1.4svh,16px)}
.hp-needs-points{display:flex;flex-direction:column;gap:clamp(6px,1.4svh,12px);margin:0 0 clamp(14px,2.8svh,24px);padding:0;list-style:none}
.hp-needs-points li{display:flex;gap:10px;font-size:clamp(14.5px,1.85svh,16.5px);line-height:1.45}
.hp-needs-points .ic{flex:none;width:24px;height:24px;padding:4px;border-radius:50%;color:#fff;background:var(--hp-grad);box-shadow:0 6px 12px -6px rgba(47,125,58,.7)}
.hp-needs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4svh,20px)}
.hp-need{position:relative;display:flex;flex-direction:column;padding:clamp(14px,2.9svh,30px);background:#fff;border:1px solid rgba(200,140,20,.14);border-radius:20px;box-shadow:var(--hp-shadow)}
.hp-need::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:var(--hp-lime)}
.hp-need--red::before{background:linear-gradient(180deg,var(--hp-red),#E8938F)}
.hp-need--teal::before{background:linear-gradient(180deg,var(--hp-teal),#8FD6CD)}
.hp-need--lime::before{background:linear-gradient(180deg,#7FB02A,#CDE89A)}
.hp-need-who{display:flex;align-items:center;gap:12px}
.hp-need-who .hp-av{width:46px;height:46px}
.hp-need-who b{display:block;font-size:15px}
.hp-need-who span{font-size:13px;color:var(--hp-ink-4)}
.hp-need h3{margin:clamp(8px,1.6svh,14px) 0 clamp(4px,.8svh,6px);font-size:clamp(16px,2.2svh,19.5px);line-height:1.35;font-weight:700}
.hp-need h3 a{color:inherit;text-decoration:none}
.hp-need h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.hp-need>p{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(14px,1.75svh,15.5px);line-height:1.55;color:var(--hp-ink-3)}
@media (min-height:860px){.hp-need>p{-webkit-line-clamp:3}}
@media (max-height:760px){.hp-need>p{-webkit-line-clamp:1}}
.hp-need-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:clamp(8px,1.8svh,16px)}

/* ══ ⑥ THÀNH VIÊN MỚI — nền ngọc bạc hà ══════════════════════════════════ */
.hp-block--members{background:
  radial-gradient(820px 420px at 0% 0%,rgba(60,199,184,.26),transparent 60%),
  radial-gradient(720px 420px at 100% 100%,rgba(163,209,75,.28),transparent 60%),
  linear-gradient(180deg,#F0FBF7,#E7F5E1)}
.hp-mem-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.hp-mem{--tone:var(--hp-lime);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(14px,3svh,30px) 14px clamp(14px,2.8svh,26px);border-radius:16px;border:1px solid var(--hp-line);color:var(--hp-ink);text-decoration:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 26%,#fff) 0,color-mix(in srgb,var(--tone) 8%,#fff) 70px,#fff 71px);
  box-shadow:var(--hp-shadow);transition:box-shadow .3s,border-color .3s}
.hp-mem--gold{--tone:var(--hp-gold)}.hp-mem--teal{--tone:#2FA9A0}
/* Rê chuột: chỉ viền + bóng, hộp đứng yên (§5C "rê chuột không dịch chỗ") */
.hp-mem:hover,.hp-mem:focus-visible{border-color:rgba(47,125,58,.35);box-shadow:0 2px 4px rgba(31,90,46,.06),0 36px 64px -28px rgba(21,90,60,.6)}
.hp-mem-pic{display:block;width:clamp(70px,14svh,140px);height:clamp(70px,14svh,140px);margin-bottom:clamp(8px,1.6svh,12px);padding:4px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--tone),var(--hp-teal),var(--hp-lime),var(--tone));box-shadow:0 16px 30px -12px rgba(21,100,70,.6)}
.hp-mem-pic img{display:block;width:100%;height:100%;border-radius:50%;border:3px solid #fff;object-fit:cover}
.hp-mem-name{font-size:clamp(15.5px,2.1svh,19px);font-weight:700;color:var(--hp-forest)}
.hp-mem:hover .hp-mem-name{text-decoration:underline;text-underline-offset:3px}
.hp-mem-role{margin:4px 0 clamp(6px,1.4svh,10px);font-size:clamp(13px,1.6svh,15px);line-height:1.4;color:var(--hp-ink-3)}
.hp-mem .hp-tags{justify-content:center;margin-bottom:10px}
.hp-mem-place{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;color:var(--hp-ink-4)}
.hp-mem-place .ic{width:14px;height:14px}
.hp-mem-go{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--hp-green);
  box-shadow:0 6px 14px -8px rgba(21,90,60,.6);transition:background .3s,color .3s}
.hp-mem-go .ic{width:16px;height:16px}
.hp-mem:hover .hp-mem-go,.hp-mem:focus-visible .hp-mem-go{background:var(--hp-grad);color:#fff}

/* ══ Vạch tiến độ + cột chấm ═════════════════════════════════════════════ */
.hp-progress{position:fixed;left:0;top:var(--hp-nav);z-index:39;width:100%;height:3px;transform:scaleX(0);transform-origin:left;pointer-events:none;
  background:linear-gradient(90deg,var(--hp-lime),var(--hp-green-2) 40%,var(--hp-teal) 80%,#1668B0)}
.hp-rail{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:38;display:flex;flex-direction:column;gap:2px;padding:8px 4px;border-radius:999px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 26px -14px rgba(21,90,60,.5)}
.hp-rail span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:4px 10px;border-radius:8px;background:#fff;color:var(--hp-forest);
  font-size:12.5px;font-weight:600;box-shadow:0 8px 18px -10px rgba(21,90,60,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.hp-rail a:hover span,.hp-rail a:focus-visible span{opacity:1}

/* ══ Hiệu ứng khi cuộn tới — gắn vào lớp chung .rise/.shown của _shell.js ══
   (khối con trực tiếp của .container). Biên độ 26px (§5C). Chỉ khi JS chạy (.fx). */
.fx .hp-block-head.rise .hp-h2{opacity:0;transform:translateX(-26px);transition:opacity .9s var(--hp-ease) .05s,transform .9s var(--hp-ease) .05s}
.fx .hp-block-head.rise .hp-h2::after{width:0;transition:width 1s var(--hp-ease) .4s}
.fx .hp-block-head.rise.shown .hp-h2{opacity:1;transform:none}
.fx .hp-block-head.rise.shown .hp-h2::after{width:56px}
.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise>*{opacity:0;transform:translateY(26px) scale(.96);transition:opacity .9s var(--hp-ease),transform .9s var(--hp-ease),box-shadow .3s,border-color .3s}
.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise.shown>*{opacity:1;transform:none}
.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise.shown>:nth-child(2){transition-delay:.09s}
.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise.shown>:nth-child(3){transition-delay:.18s}
.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise.shown>:nth-child(4){transition-delay:.27s}
.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise.shown>:nth-child(5){transition-delay:.36s}
.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise.shown>:nth-child(6){transition-delay:.45s}
.fx .hp-ev-grid.rise .hp-ev-img img,.fx .hp-news.rise .hp-news-img img{transform:scale(1.12);transition:transform 1.8s var(--hp-ease) .1s}
.fx .hp-ev-grid.rise.shown .hp-ev-img img,.fx .hp-news.rise.shown .hp-news-img img{transform:none}
.fx .hp-mem-grid.rise .hp-mem-pic{transform:scale(.7);opacity:0;transition:transform 1s var(--hp-ease) .25s,opacity .8s var(--hp-ease) .25s}
.fx .hp-mem-grid.rise.shown .hp-mem-pic{transform:none;opacity:1}
.fx .hp-needs-intro.rise li{opacity:0;transform:translateX(-20px);transition:opacity .7s var(--hp-ease),transform .7s var(--hp-ease)}
.fx .hp-needs-intro.rise.shown li{opacity:1;transform:none}
.fx .hp-needs-intro.rise.shown li:nth-child(2){transition-delay:.12s}
.fx .hp-needs-intro.rise.shown li:nth-child(3){transition-delay:.24s}

/* ══ Khổ hẹp — máy tính bảng / điện thoại (chưa thiết kế riêng: người dùng
   25/09 "chưa cần mobile"). Chỉ xếp dọc cho đọc được, bỏ khít màn. ═══════════ */
@container app (max-width:1023px){
  .hp-sol-slide{grid-template-columns:1fr}
  .hp-sol-tabs{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .hp-hero{min-height:0}
  .hp-hero-grid{grid-template-columns:1fr;padding-bottom:110px}
  .hp-h1{white-space:normal}
  .hp-hero-art{display:none}
  .hp-values-card{grid-template-columns:1fr 1fr}
  .hp-next{grid-column:1/-1}
  .hp-block{min-height:0;padding-block:48px}
  .hp-block-head{flex-direction:column;align-items:flex-start;gap:16px}
  .hp-news{grid-template-columns:1fr}
  .hp-ev-grid{grid-template-columns:1fr 1fr}
  .hp-needs{grid-template-columns:1fr;gap:28px}
  .hp-mem-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp-rail{display:none}
}
@container app (max-width:639px){
  .hp-values-card{grid-template-columns:1fr}
  .hp-value{border-right:0;border-bottom:1px solid var(--hp-line)}
  .hp-search{flex-wrap:wrap;padding:8px}
  .hp-search input{flex-basis:calc(100% - 40px)}
  .hp-search .hp-btn{width:100%}
  .hp-ev-grid,.hp-needs-grid{grid-template-columns:1fr}
  .hp-mem-grid{grid-template-columns:1fr 1fr}
  .hp-news-thumb{width:96px}
  .hp-sol-tabs{grid-template-columns:1fr}
}

/* prefers-reduced-motion: bỏ HẲN hiệu ứng, không làm nhẹ đi (§5C) */
@media (prefers-reduced-motion:reduce){
  html:has(.hp){scroll-snap-type:none}
  .hp *,.hp *::before,.hp *::after{animation:none!important;transition:none!important}
  .hp-progress{display:none}
  .hp.fx :is(.hp-ev-grid,.hp-mem-grid,.hp-needs-grid).rise>*,.hp.fx .rise .hp-mem-pic,.hp.fx .rise li,.hp.fx .rise .hp-h2{opacity:1;transform:none}
  .hp.fx .hp-block-head.rise .hp-h2::after{width:56px}
}

/* ══ CHẤM ĐIỀU HƯỚNG — tròn, phối màu (25/09 lượt 2) ═════════════════════
   Vùng bấm 24px trong suốt (WCAG 2.2 mức tối thiểu); hình vẽ ở ::before để góc
   bo luôn tròn thật. Chấm thường: tròn 8px lục nhạt có viền trắng. Chấm đang
   chọn: viên thuốc chuyển sắc lục → ngọc, bên trong vạch thời gian (::after). */
.hp-news-dots,.hp-car-dots{display:flex;align-items:center;gap:2px}
.hp-news-dots button,.hp-car-dots button{position:relative;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;
  transition:width .5s var(--hp-ease)}
.hp-news-dots button::before,.hp-car-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:#C6DDB3;
  box-shadow:0 0 0 2px #fff,0 2px 6px -1px rgba(21,90,60,.35);transition:width .5s var(--hp-ease),background .4s,height .4s}
.hp-news-dots button:hover::before,.hp-car-dots button:hover::before{background:#8FC46A}
.hp-news-dots button[aria-current="true"],.hp-car-dots button[aria-current="true"]{width:40px}
.hp-news-dots button[aria-current="true"]::before,.hp-car-dots button[aria-current="true"]::before{width:32px;height:10px;background:rgba(47,125,58,.18)}
.hp-news-dots button[aria-current="true"]::after,.hp-car-dots button[aria-current="true"]::after{content:"";position:absolute;left:4px;top:7px;width:32px;height:10px;
  border-radius:999px;background:var(--hp-grad);transform-origin:left;animation:hp-fill 6s linear forwards}
.hp-car-dots button[aria-current="true"]::after{animation-duration:7s}
.hp-carousel.hp-carousel .hp-car-dots{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 20px -12px rgba(21,90,60,.55)}
.is-paused .hp-news-dots button::after,.hp-carousel.is-paused .hp-car-dots button::after{animation-play-state:paused}
@keyframes hp-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Cột chấm bên phải: chấm tròn có vòng; khối đang xem — chấm to hơn, lục đặc, quầng sáng */
.hp-rail a{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
.hp-rail a::before{content:"";width:8px;height:8px;border-radius:50%;background:#C6DDB3;box-shadow:0 0 0 2px #fff;
  transition:width .4s var(--hp-ease),height .4s var(--hp-ease),background .4s,box-shadow .4s}
.hp-rail a:hover::before{background:#8FC46A}
.hp-rail a[aria-current="true"]::before{width:12px;height:12px;background:var(--hp-grad);box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(47,143,58,.22)}

/* ══ CHẤM PHỐI MÀU (25/09 lượt 3) ════════════════════════════════════════
   Mỗi chấm một sắc của bảng trang (lục chanh · vàng · ngọc · xanh trời · san hô ·
   lục) — cùng độ nhạt nên không rối, khác sắc nên đọc ra "nhiều mục". Chấm đang
   chọn: viên chuyển sắc lục → ngọc → lam có quầng sáng; vạch thời gian chạy trắng
   trên nền viên. Cột chấm bên phải: mỗi chấm mang ĐÚNG sắc nền khối nó trỏ tới. */
.hp{--dot-1:#A3D14B;--dot-2:#F2B544;--dot-3:#3CC7B8;--dot-4:#7CB8F0;--dot-5:#F28B6B;--dot-6:#6FBF5A}
.hp-news-dots button:nth-child(6n+1),.hp-car-dots button:nth-child(6n+1){--dot:var(--dot-1)}
.hp-news-dots button:nth-child(6n+2),.hp-car-dots button:nth-child(6n+2){--dot:var(--dot-2)}
.hp-news-dots button:nth-child(6n+3),.hp-car-dots button:nth-child(6n+3){--dot:var(--dot-3)}
.hp-news-dots button:nth-child(6n+4),.hp-car-dots button:nth-child(6n+4){--dot:var(--dot-4)}
.hp-news-dots button:nth-child(6n+5),.hp-car-dots button:nth-child(6n+5){--dot:var(--dot-5)}
.hp-news-dots button:nth-child(6n),.hp-car-dots button:nth-child(6n){--dot:var(--dot-6)}
.hp-news-dots button::before,.hp-car-dots button::before{width:10px;height:10px;background:var(--dot);
  box-shadow:0 0 0 2px #fff,0 3px 8px -2px color-mix(in srgb,var(--dot) 80%,#000 20%)}
.hp-news-dots button:hover::before,.hp-car-dots button:hover::before{background:var(--dot);transform:scale(1.25)}
.hp-news-dots button::before,.hp-car-dots button::before{transition:width .5s var(--hp-ease),transform .25s,background .4s}
.hp-news-dots button[aria-current="true"]::before,.hp-car-dots button[aria-current="true"]::before{width:34px;height:12px;
  background:rgba(47,169,159,.2);box-shadow:0 0 0 2px #fff,0 4px 14px -3px rgba(47,169,159,.6)}
.hp-news-dots button[aria-current="true"]::after,.hp-car-dots button[aria-current="true"]::after{left:3px;top:6px;width:34px;height:12px;
  background:linear-gradient(90deg,#8FCB3F,#2FA99F 55%,#3D8FE0);box-shadow:0 0 8px rgba(47,169,159,.55)}
.hp-news-dots button[aria-current="true"],.hp-car-dots button[aria-current="true"]{width:42px}
/* Cột chấm: sắc theo nền khối — đầu trang lục chanh · tin trắng→vàng · sự kiện lam
   ngọc · sản phẩm lục · nhu cầu cam ấm · thành viên ngọc bạc hà */
.hp-rail a:nth-child(1){--dot:#A3D14B}.hp-rail a:nth-child(2){--dot:#F2B544}.hp-rail a:nth-child(3){--dot:#2F8FB0}
.hp-rail a:nth-child(4){--dot:#6FBF5A}.hp-rail a:nth-child(5){--dot:#F28B6B}.hp-rail a:nth-child(6){--dot:#3CC7B8}
.hp-rail a::before{width:9px;height:9px;background:var(--dot);box-shadow:0 0 0 2px #fff,0 2px 6px -1px color-mix(in srgb,var(--dot) 80%,#000 20%)}
.hp-rail a:hover::before{background:var(--dot);transform:scale(1.3)}
.hp-rail a[aria-current="true"]::before{width:14px;height:14px;background:var(--dot);
  box-shadow:0 0 0 3px #fff,0 0 0 7px color-mix(in srgb,var(--dot) 35%,transparent),0 4px 12px -2px color-mix(in srgb,var(--dot) 90%,#000 10%)}


/* ══════════════════════════════════════════════════════════════════════════
   MÀN 1 CAO ĐÚNG MỘT KHUNG NHÌN — KHỔ MÁY TÍNH (yêu cầu 28/09)
   ══════════════════════════════════════════════════════════════════════════
   Người dùng: *"section 1 kéo dài 1 màn hình 1vh trên PC, mobile thì cứ thoải
   mái. Section Tin tức sẽ ở màn hình thứ 2 trở đi."*

   ── Vì sao trước đó màn 1 KHÔNG đủ một khung nhìn ─────────────────────────

   `.hp-hero` rơi về `min-height:calc(100svh - var(--hp-nav) - 72px)`, mà hai
   số trừ đi ấy đều sai kể từ vòng 39:

     ① `--hp-nav` khai 65px, nhưng thanh điều hướng thật cao 89px — VÀ nó
        `position:fixed` (`.v6 .nav`, dòng 2390) nên KHÔNG chiếm chỗ: đầu
        trang bắt đầu từ y=0. Trừ chiều cao thanh ra khỏi màn 1 là trừ một
        khoảng không ai lấy.
     ② 72px là ước lượng phần dải giá trị thò xuống dưới mép đầu trang
        (`.hp-values{margin-top:-78px}`), trong khi tấm dải ấy cao theo chữ —
        đo được 88px ở 1920×1080 và 102px ở 1440×900.

   Cộng lại, `.screen-head` dừng ở 953px trên màn 1080 và 648px trên màn 768:
   khối Tin tức thò lên màn 1 chừng 120–130px, đúng cái người dùng thấy.

   `trang-chu.2.js` có đo và bù bằng `--hp-hero-h`, nhưng trang chủ React
   KHÔNG nạp script đó (xem chú thích `dau-trang-chu.tsx`) nên bản thật luôn
   chạy bằng giá trị rơi về.

   ── Cách chữa: để FLEX tự đo, thay vì trừ bằng số ─────────────────────────

   `.screen-head` thành hộp flex dọc cao đúng `100svh`, `.hp-hero` là ô duy
   nhất co giãn. Dải giá trị vẫn `margin-top:-78px` đè lên mép dưới đầu trang
   như cũ; phần thò ra bao nhiêu thì đầu trang tự nhường lại bấy nhiêu. Không
   còn hằng số nào phải đoán, nên tấm dải đổi cao (chữ dài hơn, có thêm ô
   `.hp-next`) cũng không kéo lệch màn 1.

   `flex:1 0 auto` — KHÔNG cho co. Đầu trang `overflow:hidden`, nên nếu một
   ngày chữ dài quá một màn thì thà `.screen-head` cao hơn 100svh còn hơn cắt
   mất hàng nút.

   ── Khoảng thở dưới tấm dải ───────────────────────────────────────────────

   Người dùng 25/09: *"để sát page quá"*. `trang-chu.2.js` chừa khoảng ấy bằng
   cách rút NGẮN màn 1 — làm vậy thì màn 1 lại không tròn một khung nhìn nữa.
   Ở đây khoảng thở nằm TRONG `.hp-values` (đệm dưới), nên tấm dải vẫn cách
   đáy màn một quãng mà tổng vẫn đúng 100svh: đệm dưới nhỏ đi thì đầu trang
   giãn ra đúng bấy nhiêu, `.screen-head` không đổi.

   ⚑ Trừ 10px so với quãng của `trang-chu.2.js` (28/09, lượt 2): người dùng
     *"cho block Gặp gỡ · Chia sẻ chuyên môn · Hợp tác xuống dưới 10px nữa"*.
     Viết `calc(3.5svh - 10px)` bên trong `clamp()` chứ không hạ tay ba con
     số: cái phải giữ là "đúng bằng quãng cũ trừ 10", nên cả hai biên cũng
     phải lùi 10 (18→8, 40→30). Hạ riêng phần giữa thì ở màn rất cao hoặc rất
     thấp biên sẽ ăn mất, và tấm dải lại không xuống đủ 10px.

   ── Các khối sau cũng tròn một màn ────────────────────────────────────────

   `.hp-block` trừ `var(--hp-nav)` vì cùng một lầm tưởng "thanh chiếm chỗ".
   Bỏ phép trừ đi thì Tin tức nằm gọn màn 2, Sự kiện màn 3… đúng thứ tự cột
   chấm `.hp-rail` đang chỉ. Kèm theo `scroll-padding-top:0`: mốc cuộn của mỗi
   khối nay TRÙNG mép màn, không còn chừa một dải đuôi khối trước.

   ── `--hp-nav` phải là 89px, không phải 65px ──────────────────────────────

   65px chép từ `_common.css` thuở thanh còn cao 64 + 1px kẻ đáy. `_unify.css`
   sau đó bọc thanh trong đệm dọc 12px, nên thanh thật cao **89px** ở khổ máy
   tính (12 + 64 + 12 + 1 — đo ở 1024→1920, không đổi theo vai vì `.nav .acct`
   chỉ cao 44px, thấp hơn hàng 64px).

   Sai số 24px ấy không chỉ làm lệch chiều cao. Thanh `position:fixed` ĐÈ lên
   đầu mỗi khối, nên khối phải chừa đúng chừng đó đệm trên thì tiêu đề mới
   không chui xuống dưới thanh — ở 1366×768 chữ "TIN TỨC" bị cắt mất nửa trên
   đúng vì `padding-top` chỉ có clamp(16px,4svh,64px).

   Sửa `--hp-nav` một chỗ thì ba thứ khác tự khớp theo, vì chúng đều tính từ
   biến này: `.hp-progress` (vạch tiến độ nằm sát đáy thanh), `--hp-news-w` và
   `--hp-sol-w` (bề rộng tấm lớn suy từ chiều cao màn còn lại — hẹp bớt ~43px
   nên tấm thấp xuống vừa đúng phần đệm trên mới chiếm thêm).

   Đặt biến trên `.hp-hero`/`.hp-block`/`.hp-progress` chứ không trên `.hp`:
   `.hp` CHÍNH LÀ container `app` (`container-type:inline-size`), mà
   `@container` chỉ chọn được hậu duệ của container, không chọn chính nó. Đây
   cũng là cách dòng 3436 khai `--hp-nav:61px` cho khổ hẹp.

   ── Khổ hẹp không đụng tới ────────────────────────────────────────────────

   `@container app (max-width:1023px)` (dòng ~3854) đã đặt `min-height:0` cho
   cả đầu trang lẫn mọi khối — "chưa cần mobile", cứ để chữ tự quyết chiều
   cao. Khối dưới đây khai `min-width:1024px` nên không chồng lên luật đó.
   ══════════════════════════════════════════════════════════════════════════ */
@container app (min-width:1024px){
  .hp-hero,.hp-block,.hp-progress{--hp-nav:89px}

  .hp .screen-head{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
  .hp-hero{flex:1 0 auto;min-height:0}
  .hp-values{padding-bottom:clamp(8px,calc(3.5svh - 10px),30px)}

  .hp-block{min-height:100vh;min-height:100svh;
    padding-block:calc(var(--hp-nav) + clamp(16px,4svh,64px)) clamp(16px,4svh,64px)}
}
/* `html` nằm NGOÀI container `.app`, nên luật này phải đi bằng @media. */
@media (min-width:1024px){
  html:has(.hp){scroll-padding-top:0}
}