/* Chuyển động giao diện (docs/chuyen_dong/SPEC.md). Nạp sau mọi CSS của màn.
   Bộ thông số mục 2 chép nguyên; thời gian nhân với --nhip để chỉnh nhịp chung một chỗ.
   Thông số lấy từ Animate UI (chỉ giá trị thời gian và đường cong); lò xo quy ra linear(). */

:root {
  --nhip: 1;
  --e-ra:    cubic-bezier(0.23, 1, 0.32, 1);      /* vào hoặc ra màn */
  --e-mem:   cubic-bezier(0.215, 0.61, 0.355, 1); /* mở menu, mở khối, nền tối, ngăn tựa mép */
  --e-ngan:  cubic-bezier(0.34, 1.2, 0.64, 1);    /* ngăn hồ sơ trượt vào, hơi lố */
  --e-di:    cubic-bezier(0.33, 0.17, 0.67, 0.5); /* hộp thoại, thông báo đóng */
  --e-roi:   cubic-bezier(0.4, 0, 1, 1);          /* ngăn đóng, vụt ra mép */
  --e-mau:   cubic-bezier(0.25, 0.1, 0.25, 1);    /* đổi màu, nháy nền */
  --e-giua:  cubic-bezier(0.77, 0, 0.175, 1);     /* thanh trái thu gọn */
  --lx-nhan:  linear(0,0.088,0.279,0.504,0.703,0.86,0.969,1.035,1.065,1.072,1.064,1.05,1.034,1.02,1.009,1.001,0.997,0.995,0.995,0.996,0.997,0.998,0.999,0.999,1); /* lò xo 550/30, 470 ms */
  --lx-noi:   linear(0,0.056,0.184,0.337,0.496,0.641,0.763,0.859,0.928,0.977,1.009,1.027,1.034,1.036,1.033,1.028,1.022,1.017,1.012,1.008,1.004,1.002,1,0.999,1); /* 400/29, 430 ms */
  --lx-chon:  linear(0,0.051,0.167,0.304,0.441,0.569,0.676,0.764,0.834,0.887,0.925,0.954,0.973,0.986,0.995,1,1.002,1.004,1.004,1.004,1.003,1.003,1.002,1.002,1); /* 300/30, 480 ms */
  --lx-luot:  linear(0,0.035,0.115,0.218,0.332,0.44,0.54,0.628,0.704,0.768,0.823,0.866,0.9,0.927,0.947,0.963,0.975,0.984,0.99,0.994,0.997,0.999,1,1.001,1); /* 500/40, 300 ms */
  --lx-hop:   linear(0,0.055,0.173,0.307,0.437,0.552,0.648,0.729,0.791,0.841,0.879,0.909,0.931,0.948,0.961,0.971,0.978,0.984,0.988,0.991,0.993,0.995,0.996,0.997,1); /* 150/25, 730 ms */
  --t-nhan:    calc(470ms * var(--nhip));
  --t-mau:     calc(200ms * var(--nhip));
  --t-dong:    calc(150ms * var(--nhip));
  --t-menu:    calc(220ms * var(--nhip));
  --t-man:     calc(300ms * var(--nhip));
  --t-mo:      calc(350ms * var(--nhip));
  --t-noi:     calc(430ms * var(--nhip));
  --t-chon:    calc(480ms * var(--nhip));
  --t-luot:    calc(300ms * var(--nhip));
  --t-ngan:    calc(400ms * var(--nhip));
  --t-ngan-ra: calc(160ms * var(--nhip));
  --t-hop:     calc(730ms * var(--nhip));
  --t-di:      calc(200ms * var(--nhip));
  --t-nhay:    calc(760ms * var(--nhip));
  --t-thu:     calc(280ms * var(--nhip));
  --t-chu-thu: calc(140ms * var(--nhip));
  /* Thêm ngoài mục 2 (CD1), cho các chỗ đang có mà bảng thời gian không ghi. */
  --t-vao:       calc(420ms * var(--nhip));  /* tấm vào màn khi đổi màn (C2) */
  --t-quay:      calc(800ms * var(--nhip));  /* biểu tượng đang tải xoay một vòng */
  --t-cho:       calc(1300ms * var(--nhip)); /* vệt sáng ô chờ (C15) */
  --t-nhip-vang: calc(2600ms * var(--nhip)); /* nhịp gợi chú ý nút "Theo dõi" (CAU_HOI_MO 9) */
  /* CD2: màn mở đầu và tấm vào màn (C1, C2). Bản đổi màn ở đây; lần tải đầu đè trong html.cd-dau. */
  --t-hao:     calc(1600ms * var(--nhip)); /* quầng sáng nền vùng làm việc hiện dần */
  --t-que:     calc(1300ms * var(--nhip)); /* vệt sáng mép dưới dải chỉ số */
  --cd-i: 0;
  --cd-dy: 10px;
  --cd-co: 1;
  --cd-mo: 4px;
  --t-vao-tam: var(--t-vao);
  --cd-tre: 0ms;
  --cd-lech: calc(60ms * var(--nhip));
  --cd-goc-tre: calc(460ms * var(--nhip));
  --cd-trai-lech: calc(45ms * var(--nhip));
  --cd-rail-tre: calc(100ms * var(--nhip));
  --cd-que-tre: calc(1150ms * var(--nhip));
  /* CD4: mũi tên cạnh giá bảng giá (C13), lệch của sóng ô bản đồ nhiệt và thanh mọc (C16). */
  --t-mui:        calc(900ms * var(--nhip));
  /* docs/bang_gia/nhip_nhanh SPEC mục 6: nháy theo ô của bảng giá, ngắn hơn --t-nhay vì nhịp 1,5 giây. */
  --t-nhay-o:     calc(450ms * var(--nhip));
  --cd-song-lech: calc(22ms * var(--nhip));
  --cd-moc-lech:  calc(45ms * var(--nhip));
}

/* C1, C2: tấm vào màn và màn mở đầu
   Lần tải trang đầu: index.html gắn html.cd-dau trước khi vẽ, chuyen_dong.js gỡ khi màn mở đầu xong
   hoặc khi đổi màn. Chỉ đổi biến, không đổi tên hiệu ứng, nên gỡ lớp không làm hiệu ứng chạy lại.
   backwards, không both: transform giữ lại sau hiệu ứng làm khối cha neo position:fixed, lớp phủ
   phóng to bị kẹt trong khối; filter cũng về none khi xong vì cùng lý do. */
html.cd-dau {
  --cd-dy: 14px;
  --cd-co: .985;
  --cd-mo: 6px;
  --t-vao-tam: calc(640ms * var(--nhip));
  --cd-tre: calc(300ms * var(--nhip));
  --cd-lech: calc(80ms * var(--nhip));
}
@keyframes cd-len {
  from { opacity: 0; transform: translateY(var(--cd-dy)) scale(var(--cd-co)); filter: blur(var(--cd-mo)); }
}
.view.on > * {
  animation: cd-len var(--t-vao-tam) var(--e-ra) backwards;
  animation-delay: calc(var(--cd-tre) + var(--cd-lech) * var(--cd-i));
}
.view.on > :nth-child(2) { --cd-i: 1; }
.view.on > :nth-child(3) { --cd-i: 2; }
.view.on > :nth-child(4) { --cd-i: 3; }
.view.on > :nth-child(5) { --cd-i: 4; }
.view.on > :nth-child(6) { --cd-i: 5; }
/* Chỉ 6 tấm đầu có mờ nét (SPEC mục 6). */
.view.on > :nth-child(n + 7) { --cd-i: 6; --cd-mo: 0px; }

/* Góc vàng vẽ ra từ 20% sau khi tấm đứng. */
@keyframes cd-goc {
  from { opacity: 0; transform: scale(.2); }
}
.view.on .pn::before,
.view.on .pn::after {
  animation: cd-goc var(--t-noi) var(--lx-noi) backwards;
  animation-delay: calc(var(--cd-tre) + var(--cd-lech) * var(--cd-i) + var(--cd-goc-tre));
}
.view.on .pn::before { transform-origin: top left; }
.view.on .pn::after { transform-origin: bottom right; }

/* Dải chỉ số và thanh trái: từng ô trượt từ trái 8 px, mờ dần, 420 ms, lệch 45 ms; thanh trái
   bắt đầu sau 100 ms. Đánh số bằng nth-of-type để span .que, .rail-chi chèn thêm không đổi số. */
@keyframes cd-trai {
  from { opacity: 0; transform: translateX(-8px); }
}
html.cd-dau .strip > div,
html.cd-dau .rail > * {
  animation: cd-trai var(--t-vao) var(--e-ra) backwards;
  animation-delay: calc(var(--cd-trai-lech) * var(--cd-i));
}
html.cd-dau .rail > * {
  animation-delay: calc(var(--cd-rail-tre) + var(--cd-trai-lech) * var(--cd-i));
}
.strip > div:nth-of-type(2) { --cd-i: 1; }
.strip > div:nth-of-type(3) { --cd-i: 2; }
.strip > div:nth-of-type(4) { --cd-i: 3; }
.strip > div:nth-of-type(5) { --cd-i: 4; }
.strip > div:nth-of-type(6) { --cd-i: 5; }
.strip > div:nth-of-type(n + 7) { --cd-i: 6; }
.rail > button:nth-of-type(1) { --cd-i: 1; }
.rail > button:nth-of-type(2) { --cd-i: 2; }
.rail > button:nth-of-type(3) { --cd-i: 3; }
.rail > button:nth-of-type(4) { --cd-i: 4; }
.rail > button:nth-of-type(5) { --cd-i: 5; }
.rail > button:nth-of-type(6) { --cd-i: 6; }
.rail > button:nth-of-type(7) { --cd-i: 7; }
.rail > button:nth-of-type(8) { --cd-i: 8; }
.rail > button:nth-of-type(n + 9) { --cd-i: 9; }
.rail > .day,
.rail > .chan { --cd-i: 10; }
/* Vạch chọn và nền lướt không trượt theo mục: chỉ mờ dần cùng thanh. */
html.cd-dau .rail > .rail-chi,
html.cd-dau .rail > .rail-luot {
  animation-name: cd-moDan;
  --cd-i: 2;
}

/* Trong màn mở đầu, thanh trái đặt bề rộng đã nhớ ngay, không chạy thu gọn lúc tải trang. */
html.cd-dau .khung,
html.cd-dau .rail > button > * {
  transition: none;
}

/* Quầng sáng nền vùng làm việc hiện dần 1,6 s: hệ số --cd-hao nhân vào độ đậm hai quầng của .lam. */
@property --cd-hao {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@keyframes cd-hao {
  from { --cd-hao: 0; }
}
html.cd-dau .lam {
  animation: cd-hao var(--t-hao) var(--e-mem) backwards;
}

/* Vệt sáng vàng chạy dọc mép dưới dải chỉ số một lần, bắt đầu ở 1.150 ms. Khung .que cắt phần
   tràn để vệt sáng không làm dải cuộn ngang. */
.que {
  display: none;
}
html.cd-dau .que {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
html.cd-dau .que::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dong), transparent);
  box-shadow: 0 0 12px rgba(200, 162, 75, .9);
  opacity: 0;
  animation: cd-que var(--t-que) var(--e-mem) backwards;
  animation-delay: var(--cd-que-tre);
}
@keyframes cd-que {
  0% { transform: translateX(-120%); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(420%); opacity: 0; }
}

/* C3: soi sáng viền tấm theo con trỏ
   chuyen_dong.js gắn span.pn-soi vào tấm khi con trỏ vào, đặt --mx, --my theo con trỏ.
   .pn có overflow:hidden nên viền sáng nằm ngay trong viền tấm. */
.pn-soi {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-mau) var(--e-mau);
}
.pn-soi.on {
  opacity: 1;
}
.pn-soi::before,
.pn-soi::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.pn-soi::before {
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(200, 162, 75, .07), rgba(200, 162, 75, 0) 60%);
}
.pn-soi::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(200, 162, 75, .75), rgba(200, 162, 75, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* C4: thanh trái, vạch chọn và nền lướt
   Một .rail-chi trượt tới mục đang chọn, một .rail-luot đi theo mục đang rê. Vị trí do
   chuyen_dong.js đặt bằng transform theo offsetTop của nút. Nền và vạch giống hệt kiểu .on cũ. */
.rail-chi,
.rail-luot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}
.rail-chi {
  background: linear-gradient(90deg, rgba(200, 162, 75, .16), rgba(200, 162, 75, 0) 78%);
  transition: transform var(--t-chon) var(--lx-chon), opacity var(--t-mau) var(--e-mau);
}
.rail-chi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: var(--dong);
  box-shadow: 0 0 9px rgba(200, 162, 75, .8);
}
.rail-chi.trong {
  opacity: 0;
}
.rail-luot {
  left: 8px;
  right: 8px;
  border-radius: 8px;
  background: rgba(var(--phu-rgb), .05);
  opacity: 0;
  transition: transform var(--t-luot) var(--lx-luot), opacity var(--t-mau) var(--e-mau);
}
.rail-luot.on {
  opacity: 1;
}
/* Đặt chỗ lần đầu hoặc nền lướt hiện lại: không trượt từ chỗ cũ. */
.rail-chi.cd-dat,
.rail-luot.cd-dat {
  transition-property: opacity;
}

/* C17: đổi sáng tối
   Vòng tròn lan từ chỗ bấm do chuyen_dong.js chạy trên ::view-transition-new(root). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
#nutGiaoDien .bieu-tuong {
  position: relative;
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
#nutGiaoDien .bieu-tuong svg {
  position: absolute;
  inset: 0;
  transition: opacity var(--t-man) var(--e-ra), transform var(--t-man) var(--e-ra), filter var(--t-man) var(--e-ra);
}
#nutGiaoDien .bieu-tuong svg.an {
  opacity: 0;
  transform: rotate(90deg) scale(.5);
  filter: blur(2px);
}

/* CD3: thành phần (C6 tới C12, C15, C18)
   Ngăn, hộp, thông báo, ô gợi ý, menu ẩn bằng thuộc tính hidden: hidden vẫn là cờ trạng thái mà mã
   các màn đọc, nhưng thứ đang đóng còn trong luồng vẽ tới khi hiệu ứng ra xong (display chuyển rời
   rạc allow-discrete, visibility có trễ), vào bằng @starting-style. chuyen_dong.js gắn inert khi
   đóng và bỏ hiệu ứng vào màn của tấm cha khi ngăn mở (transform ở tổ tiên làm position:fixed bám
   theo tấm). Trình duyệt cũ không có allow-discrete thì đóng mở ngay như trước. */

/* C10: ngăn trượt từ mép phải 400 ms --e-ngan (hơi lố); đóng 160 ms --e-roi. */
.rs-ngan,
.bg-ct {
  transform: none;
  visibility: visible;
  transition: transform var(--t-ngan) var(--e-ngan), visibility 0s, display var(--t-ngan) allow-discrete;
}
.rs-ngan[hidden],
.bg-ct[hidden] {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-ngan-ra) var(--e-roi), visibility 0s linear var(--t-ngan-ra), display var(--t-ngan-ra) allow-discrete;
}
.hd-ngan.hd-mo {
  visibility: visible;
  transition: transform var(--t-ngan) var(--e-ngan), visibility 0s;
}
.hd-ngan:not(.hd-mo) {
  visibility: hidden;
  transition: transform var(--t-ngan-ra) var(--e-roi), visibility 0s linear var(--t-ngan-ra);
}
@starting-style {
  .rs-ngan,
  .bg-ct {
    transform: translateX(100%);
  }
}

/* C10: nền tối vào 400 ms --e-mem, ra 200 ms. */
.rs-mangChe,
.bg-phu,
.hd-nen {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-ngan) var(--e-mem), visibility 0s, display var(--t-ngan) allow-discrete;
}
.rs-mangChe[hidden],
.bg-phu[hidden],
.hd-nen[hidden] {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-di) var(--e-mem), visibility 0s linear var(--t-di), display var(--t-di) allow-discrete;
}
/* Nền tối ngăn đọc M19 màn hẹp: giữ kiểu phủ ở cả lúc đóng để mờ đi được. */
.bc-vo .bc-mangDoc {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--mang);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-di) var(--e-mem), visibility 0s linear var(--t-di), display var(--t-di) allow-discrete;
}
.bc-vo .bc-mangDoc[data-mo='1'] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-ngan) var(--e-mem), visibility 0s, display var(--t-ngan) allow-discrete;
}
@starting-style {
  .rs-mangChe,
  .bg-phu,
  .hd-nen,
  .bc-vo .bc-mangDoc[data-mo='1'] {
    opacity: 0;
  }
}
/* Bộ lọc M19 màn hẹp nằm trong dòng chảy, không phải ngăn tựa mép: hiện như mở khối. */
@container bc (max-width: 820px) {
  .bc-loc[data-mo='1'] {
    transition: opacity var(--t-mo) var(--e-mem), transform var(--t-mo) var(--e-mem), filter var(--t-mo) var(--e-mem);
  }
  @starting-style {
    .bc-loc[data-mo='1'] {
      opacity: 0;
      transform: translateY(-6px);
      filter: blur(2px);
    }
  }
}

/* C11: hộp tùy chọn M22. Nền như C10; khung hiện từ 97%, mờ nét 4 px, lò xo hộp (lớp cd-hop do
   chuyen_dong.js gắn lúc mở, vì khung dựng lại mỗi lần đổi tùy chọn); đóng 200 ms --e-di về 98%. */
.bg-hop {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-ngan) var(--e-mem), visibility 0s, display var(--t-ngan) allow-discrete;
}
.bg-hop[hidden] {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-di) var(--e-di), visibility 0s linear var(--t-di), display var(--t-di) allow-discrete;
}
.bg-hop[hidden] > * {
  transform: scale(.98);
  transition: transform var(--t-di) var(--e-di);
}
@starting-style {
  .bg-hop {
    opacity: 0;
  }
}
@keyframes cd-hop {
  from { opacity: 0; transform: scale(.97); filter: blur(4px); }
}
.cd-hop {
  animation: cd-hop var(--t-hop) var(--lx-hop) backwards;
}
/* C11: phóng to tấm. Thu nhỏ do trình duyệt thoát toàn màn hình ngay, không có hiệu ứng ra. */
[data-phong-to]:fullscreen,
[data-phong-to].bd-phongTo {
  animation: cd-hop var(--t-hop) var(--lx-hop) backwards;
}
[data-phong-to]::backdrop {
  animation: cd-moDan var(--t-ngan) var(--e-mem) backwards;
}

/* C12: thông báo nổi từ góc dưới: từ 96%, lệch 10 px, mờ nét 4 px, lò xo nổi; ra 200 ms --e-di. */
.bc-toast {
  transform-origin: 50% 100%;
  visibility: visible;
  transition: opacity var(--t-noi) var(--e-mem), transform var(--t-noi) var(--lx-noi), filter var(--t-noi) var(--e-mem), visibility 0s, display var(--t-noi) allow-discrete;
}
.bc-toast[hidden] {
  opacity: 0;
  transform: translateY(10px) scale(.96);
  filter: blur(4px);
  visibility: hidden;
  transition: opacity var(--t-di) var(--e-di), transform var(--t-di) var(--e-di), filter var(--t-di) var(--e-di), visibility 0s linear var(--t-di), display var(--t-di) allow-discrete;
}
@starting-style {
  .bc-toast {
    opacity: 0;
    transform: translateY(10px) scale(.96);
    filter: blur(4px);
  }
}

/* C8: ô gợi ý đi theo con trỏ bung từ 70%, lò xo nổi, chỉ lúc ẩn sang hiện; ra 150 ms. */
.bc-tip,
.hs-dgO {
  transform-origin: 0 0;
  visibility: visible;
  transition: opacity var(--t-mau) var(--e-mau), transform var(--t-noi) var(--lx-noi), visibility 0s, display var(--t-noi) allow-discrete;
}
.bc-tip[hidden],
.hs-dgO[hidden] {
  opacity: 0;
  transform: scale(.7);
  visibility: hidden;
  transition: opacity var(--t-dong) var(--e-ra), transform var(--t-dong) var(--e-ra), visibility 0s linear var(--t-dong), display var(--t-dong) allow-discrete;
}
@starting-style {
  .bc-tip,
  .hs-dgO {
    opacity: 0;
    transform: scale(.7);
  }
}
/* .dr-doc, .dt-docSo ẩn hiện bằng style.visibility của mã màn: bám theo giá trị đó. */
.dr-doc,
.dt-docSo {
  opacity: 0;
  transform: scale(.7);
  transform-origin: 0 0;
  transition: opacity var(--t-dong) var(--e-ra), transform var(--t-dong) var(--e-ra), visibility 0s linear var(--t-dong);
}
.dr-doc[style*="visibility: visible"],
.dt-docSo[style*="visibility: visible"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-mau) var(--e-mau), transform var(--t-noi) var(--lx-noi), visibility 0s;
}

/* C9: menu, ô chọn xổ xuống bung từ phía mở, từ 90%, 220 ms; đóng 150 ms. */
.bc-goiY {
  transform-origin: 50% 0;
  visibility: visible;
  transition: opacity var(--t-menu) var(--e-mem), transform var(--t-menu) var(--e-mem), visibility 0s, display var(--t-menu) allow-discrete;
}
.bc-goiY[hidden] {
  opacity: 0;
  transform: scale(.9);
  visibility: hidden;
  transition: opacity var(--t-dong) var(--e-ra), transform var(--t-dong) var(--e-ra), visibility 0s linear var(--t-dong), display var(--t-dong) allow-discrete;
}
@starting-style {
  .bc-goiY {
    opacity: 0;
    transform: scale(.9);
  }
}
/* Menu dựng lại khi bấm (.lk-them ul): chuyen_dong.js gắn cd-bung cho đúng menu vừa mở. */
@keyframes cd-bung {
  from { opacity: 0; transform: scale(.9); }
}
.cd-bung {
  transform-origin: 0 0;
  animation: cd-bung var(--t-menu) var(--e-mem) backwards;
}

/* C18: mở khối. details: chiều cao 0 tới auto 350 ms --e-mem (đóng 150 ms), nội dung rõ dần từ mờ
   nét 2 px. Nội dung cắt theo khối nhưng chừa 8 px cho viền tiêu điểm. */
details.dt-cach,
details.bc-ld,
details.mrf-truyVet {
  interpolate-size: allow-keywords;
}
details.dt-cach::details-content,
details.bc-ld::details-content,
details.mrf-truyVet::details-content {
  height: 0;
  overflow: clip;
  overflow-clip-margin: 8px;
  filter: blur(2px);
  transition: height var(--t-dong) var(--e-mem), filter var(--t-dong) var(--e-mem), content-visibility var(--t-dong) allow-discrete;
}
details.dt-cach[open]::details-content,
details.bc-ld[open]::details-content,
details.mrf-truyVet[open]::details-content {
  height: auto;
  filter: none;
  transition: height var(--t-mo) var(--e-mem), filter var(--t-mo) var(--e-mem), content-visibility var(--t-mo) allow-discrete;
}
.bc-ld summary::before {
  transition: transform var(--t-mo) var(--e-mem);
}
/* Khối dựng lại khi bấm (.bc-dpMo mở .bc-dpDv): chuyen_dong.js gắn cd-moKhoi cho khối vừa mở,
   cd-xoay, cd-xoayVe cho mũi tên. */
@keyframes cd-moKhoi {
  from { opacity: 0; transform: translateY(-4px); filter: blur(2px); }
}
.cd-moKhoi {
  animation: cd-moKhoi var(--t-mo) var(--e-mem) backwards;
}
@keyframes cd-xoay {
  from { transform: rotate(0deg); }
}
@keyframes cd-xoayVe {
  from { transform: rotate(180deg); }
}
.cd-xoay {
  animation: cd-xoay var(--t-mo) var(--e-mem) backwards;
}
.cd-xoayVe {
  animation: cd-xoayVe var(--t-mo) var(--e-mem) backwards;
}

/* C6: nền nút đang chọn trượt. chuyen_dong.js tạo .tab-nen mang kiểu nền, viền của nút cũ, trượt
   sang nút mới bằng transform (lò xo chọn), rồi gỡ: lúc đứng yên nhóm nút giữ nguyên kiểu cũ, kể cả
   khi màn dựng lại nhóm. Trong lúc trượt, nút mới tạm bỏ nền, viền để nền trượt lộ ra. */
.cd-nen-dang {
  isolation: isolate;
}
.tab-nen {
  position: absolute;
  z-index: -1;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: 0 0;
}
.cd-nen-dang .cd-nen-dich {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* C15: ô chờ có vệt sáng 1,3 s như .tai; có số thì hiện mờ dần 300 ms tại chỗ (lớp cd-hien do
   trang_thai.js gắn khi khối đổi từ đang tải sang có số). */
.cho-so {
  background: linear-gradient(90deg, rgba(var(--phu-rgb), .06) 0%, rgba(var(--phu-rgb), .12) 50%, rgba(var(--phu-rgb), .06) 100%);
  background-size: 200% 100%;
  animation: tai var(--t-cho) linear infinite;
}
.cd-hien {
  animation: cd-moDan var(--t-man) var(--e-mau) backwards;
}

/* C14: số trên dải chỉ số nháy nền một lần khi đổi (760 ms, từ 30% màu tăng hoặc giảm về 0).
   Bóng lan 3 px thay cho lề trong để ô không đổi kích thước; ô số dựng lại ở lần cập nhật sau. */
@keyframes cd-nhayLen {
  from {
    background-color: color-mix(in srgb, var(--len) 30%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--len) 30%, transparent);
  }
  to { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}
@keyframes cd-nhayXuong {
  from {
    background-color: color-mix(in srgb, var(--xuong) 30%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--xuong) 30%, transparent);
  }
  to { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}
.strip .cs-so {
  border-radius: 3px;
}
.strip .cs-so.cd-nhayLen {
  animation: cd-nhayLen var(--t-nhay) var(--e-mau);
}
.strip .cs-so.cd-nhayXuong {
  animation: cd-nhayXuong var(--t-nhay) var(--e-mau);
}

/* C16: lần đầu hiện, ô bản đồ nhiệt bật theo sóng chéo (trễ (hàng + cột) x 22 ms, từ 40%, lò xo
   nổi; chỉ transform và opacity), thanh RS mọc từ trái lệch 45 ms. chuyen_dong.js lanDau() gắn
   .cd-song và --cd-k cho tối đa 400 ô đang thấy rồi gỡ khi xong; lần dựng lại sau gắn .cd-yen để
   thanh không mọc lại. */
@keyframes cd-song {
  from { opacity: 0; transform: scale(.4); }
}
.cd-song {
  animation: cd-song var(--t-noi) var(--lx-noi) backwards;
  animation-delay: calc(var(--cd-song-lech) * var(--cd-k, 0));
}
circle.cd-song {
  transform-box: fill-box;
  transform-origin: center;
}
.rs-rsRay i {
  animation-delay: calc(var(--cd-moc-lech) * var(--cd-k, 0));
}
.cd-yen .rs-rsRay i {
  animation: none;
}

/* Mờ dần thuần: hiệu ứng vào màn dùng khi máy bật giảm chuyển động. */
@keyframes cd-moDan {
  from { opacity: 0; }
}

/* Giảm chuyển động (SPEC mục 5): bỏ trượt, phóng, xoay, mờ nét, lăn số; giữ mờ dần và nháy màu.
   Tệp nạp cuối nên luật ở đây thắng luật cùng độ ưu tiên của các màn. */
@media (prefers-reduced-motion: reduce) {
  /* Vào màn chỉ còn mờ dần (C1, C2, C10, C16). */
  .view.on > *,
  .pn::before,
  .pn::after,
  .view.on .pn::before,
  .view.on .pn::after,
  html.cd-dau .strip > div,
  html.cd-dau .rail > *,
  .rs-mangChe,
  .rs-ngan,
  .rs-rsRay i,
  .bdo {
    animation-name: cd-moDan;
  }

  /* Bỏ trượt, phóng, xoay; giữ đổi màu và mờ dần (C4 tới C12, C16, C18). */
  .rail-chi,
  .rail-luot,
  .tab-nen {
    transition-property: opacity, background-color;
  }
  .cham i,
  .kham .c,
  .pop,
  .doc-khung {
    transition-property: opacity;
  }
  .rs-oMt {
    transition-property: border-color;
  }
  .ho,
  .bc-dpMo svg {
    transition: none;
  }

  /* C8 tới C12: ngăn, nền tối, hộp, thông báo, ô gợi ý, menu chỉ mờ dần; không trượt, không phóng,
     không mờ nét (CD3). */
  .rs-ngan,
  .bg-ct,
  .hd-ngan.hd-mo,
  .bc-vo .bc-doc[data-mo='1'] {
    transform: none;
    opacity: 1;
    transition: opacity var(--t-ngan) var(--e-mem), visibility 0s, display var(--t-ngan) allow-discrete;
  }
  .rs-ngan[hidden],
  .bg-ct[hidden],
  .hd-ngan:not(.hd-mo),
  .bc-vo .bc-doc {
    transform: none;
    opacity: 0;
    transition: opacity var(--t-di) var(--e-mem), visibility 0s linear var(--t-di), display var(--t-di) allow-discrete;
  }
  .bg-hop[hidden] > *,
  .bc-toast[hidden],
  .bc-tip[hidden],
  .hs-dgO[hidden],
  .dr-doc,
  .dt-docSo,
  .bc-goiY[hidden] {
    transform: none;
    filter: none;
  }
  .bc-toast,
  .bc-toast[hidden],
  .bc-tip,
  .bc-tip[hidden],
  .hs-dgO,
  .hs-dgO[hidden],
  .bc-goiY,
  .bc-goiY[hidden],
  .dr-doc,
  .dt-docSo,
  .dr-doc[style*="visibility: visible"],
  .dt-docSo[style*="visibility: visible"] {
    transition-property: opacity, visibility, display;
  }
  @starting-style {
    .rs-ngan,
    .bg-ct,
    .bc-toast,
    .bc-tip,
    .hs-dgO,
    .bc-goiY {
      transform: none;
      filter: none;
      opacity: 0;
    }
  }
  .cd-hop,
  .cd-bung,
  .cd-moKhoi,
  [data-phong-to]:fullscreen,
  [data-phong-to].bd-phongTo {
    animation-name: cd-moDan;
  }
  .cd-xoay,
  .cd-xoayVe {
    animation: none;
  }
  @container bc (max-width: 820px) {
    @starting-style {
      .bc-loc[data-mo='1'] {
        transform: none;
        filter: none;
      }
    }
  }

  /* C18: mở khối không đổi chiều cao dần, không mờ nét; chỉ hiện mờ dần. */
  details.dt-cach::details-content,
  details.bc-ld::details-content,
  details.mrf-truyVet::details-content {
    height: auto;
    filter: none;
    opacity: 0;
    transition: opacity var(--t-dong) var(--e-mem), content-visibility var(--t-dong) allow-discrete;
  }
  details.dt-cach[open]::details-content,
  details.bc-ld[open]::details-content,
  details.mrf-truyVet[open]::details-content {
    opacity: 1;
    transition: opacity var(--t-mo) var(--e-mem), content-visibility var(--t-mo) allow-discrete;
  }

  /* Thanh trái thu gọn đổi bề rộng ngay (C5); chữ chỉ mờ dần, không mờ nét. */
  .khung {
    transition: none;
  }
  .khung.rail-an .rail .rail-chu,
  .khung.rail-an .rail > button .mm,
  .khung.rail-an .rail > button .chua,
  .khung.rail-an .rail .nh,
  .khung.rail-an .rail .chan {
    filter: none;
  }

  /* Tắt soi sáng viền (C3), vệt sáng màn mở đầu (C1), mũi tên bảng giá (C13). */
  .pn-soi,
  .que,
  html.cd-dau .que {
    display: none;
  }
  /* Lớp mũi tên nằm trên ô giá bảng giá: chỉ tắt giả phần tử, ô và nháy nền giữ nguyên
     (CAU_HOI_MO 10). bang_gia.js không gắn lớp này khi giảm chuyển động. */
  .bg-r > td.tick-a::before,
  .bg-r > td.tick-b::before {
    animation: none;
    display: none;
  }

  /* C16: ô bản đồ nhiệt chỉ mờ dần theo sóng, không phóng. */
  .cd-song {
    animation-name: cd-moDan;
  }

  /* Ô chờ và biểu tượng đang tải đứng yên (C15); nút "Theo dõi" không nhịp (CAU_HOI_MO 9). */
  .tai,
  .cho-so,
  .rs-xuong2,
  .lam-moi[aria-busy="true"] svg,
  .rs-tab button[data-noi='1']:not(:disabled):not([aria-pressed='true']) {
    animation: none;
  }

  /* Biểu tượng mặt trời, mặt trăng chỉ mờ dần, không xoay, không phóng (C17). */
  #nutGiaoDien .bieu-tuong svg,
  #nutGiaoDien .bieu-tuong svg.an {
    transform: none;
    filter: none;
    transition-property: opacity;
  }

  /* Đổi sáng tối đổi ngay (C17). */
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}