/* GHÉP PHÒNG TẬP (QĐ-20 hướng A) VÀO TRAINING ZONE — tệp VIẾT TAY của trang này (không chép từ phong-a).
   Nạp SAU tz.css và phong/pt-phong.css (pt-phong.css do dung_trang.mjs chép nguyên từ phong-a/tai-nguyen mỗi lần dựng,
   đừng sửa bản chép). Cách ghép: viec-dang-lam/ari-rewards/qd18/phong/GHEP-VAO-TRANG.md mục 5.

   (1) Bố cục hai vùng (= phong-a/ghep-tz.css). Ở bản phong-a, cột trái của .pt-san còn chứa thẻ nhân vật và "Còn lại hôm
   nay" tạm. Ở đây HUD thật (section.hud#hanh-trinh: thẻ trùm + đặt cược, trùm sống, "Còn lại hôm nay", "Đã xong hôm nay")
   đứng NGAY SAU .pt-san, cả bề ngang, nên .pt-san chỉ còn: đầu trang (kèm nút Tìm) và căn phòng. */
.pt-san { grid-template-areas: "dau" "phong"; padding-bottom: 8px; }
@media (min-width: 960px) {
  .pt-san { grid-template-areas: "dau phong"; grid-template-rows: auto; align-items: center; }
  .pt-khung { position: relative; top: auto; }
}
/* HUD của tz.css kéo lên 40 px để đè mép màn đầu cũ (sân đảo). Căn phòng thì mép dưới là khu Giấc ngủ: không được đè. */
.hud { margin-top: 18px; }
@media (min-width: 960px) { .hud { margin-top: 26px; } }

/* (2) Khách (QĐ-23): không nhiệm vụ, không điểm → HUD thay danh sách việc bằng lời mời "Đăng nhập để nhận điểm".
   Bé Sao (.khach-khoi của tz.css) chỉ là linh vật dẫn đường; nhân vật giữa phòng là nhân vật cơ bản (pt-phong.css). */
[data-vai="khach"]:not([data-o="tools"]) .moi-ba, [data-vai="khach"]:not([data-o="tools"]) .con-lai,
[data-vai="khach"]:not([data-o="tools"]) .hud-chan { display: none; }   /* trang tổng thật: xem mục (5) */
.pt-moi-diem { margin-top: 16px; padding: 18px; border-radius: var(--r-lon);
  background: linear-gradient(135deg, rgb(245 139 175 / .14), rgb(185 163 240 / .1)), var(--mat-dac); border: 1px solid var(--vien-2); }
.pt-moi-diem h3 { margin: 0 0 6px; font: 800 1.4rem/1.15 var(--f-hien); }
.pt-moi-diem p { margin: 0 0 10px; font-size: .92rem; color: var(--chu-2); max-width: 64ch; }
.pt-moi-diem ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pt-moi-diem li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.pt-moi-diem li .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--hong-chu); }
.pt-moi-hang { display: flex; flex-wrap: wrap; gap: 10px; }
.pt-moi-diem .nut { white-space: normal; }

/* (3) QĐ-36: khu Âm nhạc nay có việc "Tìm tên một bài hát" nên có dấu "còn 1" (ở phong-a khu này không có dấu). Chỗ mặc định
   (trên-phải lõi) đè nhãn khu Bài tập trên điện thoại 360–390 px và bảng tên nhân vật ở 1024 px → dời sang giữa-phải lõi. */
.pt-goc.con-phai .pt-con { left: calc(50% + var(--co) * .38); top: calc(50% - 10px); }
@container (max-width: 359px) { .pt-goc.con-phai .pt-con { left: calc(50% + var(--co) * .36); top: calc(50% - 7px); } }

/* (4) QĐ-42: nút gọn "Nghe Ari giới thiệu" (bài giọng 800, ~2 phút) ngay dưới lời mở, trên nút Tìm. Kiểu nút + khung "Lời Ari" là của
   ../giong-ari.css (mô-đun giọng chung với trang Công cụ; nạp trước tệp này). Ở đây chỉ: ẩn khi không có JS (nút cần giong-ari.js),
   màu hợp nền tím của trang, lời 7 đoạn xuống dòng theo đoạn và cuộn trong khung (không đẩy phòng tập đi xa), chữ nhỏ nhất ≥ 12 px. */
.pt-gt { display: none; margin: 16px 0 0; }
.co-js .pt-gt:not([hidden]) { display: block; }
.pt-gt .giong-nut { font-size: .9rem; color: var(--chu); border-color: var(--vien-2); background: rgb(245 139 175 / .1); }
.pt-gt .giong-nut.dang-bat { border-color: var(--hong); background: rgb(245 139 175 / .2); }
.pt-gt .giong-khung { max-width: none; background: var(--mat-dac); border-color: var(--vien-2); }
.pt-gt .giong-loi { white-space: pre-line; max-height: min(17em, 42vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.pt-gt .giong-ghi, .pt-gt .giong-khung-gio { font-size: .78rem; }
.pt-gt .giong-an { min-width: 44px; padding: 0 10px; }   /* "Ẩn lời": ô chạm đủ 44 × 44 px (giong-ari.css để rộng ~43 px) */
.pt-gt .giong-chan { margin-top: 8px; }
@media (min-width: 960px) { .pt-gt .giong-loi { max-height: min(11em, 30vh); } }

/* (5) QĐ-78a (27/09): TRANG TỔNG THẬT /tools/ = Khu Huấn Luyện (<body data-o="tools">, dung_trang.mjs --that). Chỉ các lớp dưới đây
   là mới; bố cục, màu, chữ của Phòng tập giữ nguyên như bản cô duyệt (QĐ-73 bổ sung).
   - Khách thấy "Còn lại hôm nay" (Sổ CH-168 A): không điểm cộng, mỗi việc chỉ một dòng "Có tài khoản, mỗi việc này được +N điểm";
     nút i mở hộp cách tính. Dấu ✓ do ../hom-nay.js điền vào li[data-viec] (mục 6). "Đã xong hôm nay" trống thì kèm một dòng gợi ý.
   - Tên khu trong danh sách #ds là <h2> (máy đọc), cùng cỡ chữ với <h3> của bản xem trước; emoji công cụ trước tên trạm (TL8).
   - Nút "Sắp mở tài khoản" (REWARDS_MO tắt) mờ, không bấm được. Bản tin Ari (../bang-tin.css) mượn biến màu của trang tối. */
[data-o="tools"] .tq-diem-khach { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.35; color: var(--chu-2); }
[data-o="tools"] .hoi-nut { padding: 0; width: var(--cham); display: inline-grid; place-items: center; }
[data-o="tools"] .hoi-nut .ic { width: 20px; height: 20px; color: var(--chu-2); }
[data-o="tools"] .con-lai-trong { margin: 10px 2px 2px; font-size: .86rem; color: var(--chu-2); }
.pt-nhom-dau h2 { margin: 0; font: 800 1.2rem/1.2 var(--f-hien); }
.pt-tram-emo { margin-right: .3em; font-style: normal; }
.neo-phu { display: block; width: 0; height: 0; }   /* html đã có scroll-padding-top 96px (tz.css): thêm scroll-margin là lùi đôi */
[data-o="tools"] .nut:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
[data-o="tools"] .pt-tat-ca-ghi { font-size: .84rem; color: var(--chu-3, var(--chu-2)); }
[data-o="tools"] .xem-ds-nhan { margin: 26px 0 10px; font: 600 .8rem var(--f-hien); font-stretch: 118%; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hong-chu, var(--hong)); }
.pt-ban-tin { --canvas: var(--nen-4); --panel: var(--mat-dac); --accent: var(--hong); --text-primary: var(--chu);
  --text-secondary: var(--chu-2); --flow: cubic-bezier(.2, .8, .2, 1); margin-top: 40px; }
.pt-ban-tin .btn.ghost { background: transparent; color: var(--chu); border: 1px solid var(--vien-2); box-shadow: none; }
/* Thanh điều hướng của trang tổng thật có đủ 8 mục như mọi trang (khuon_chung): chữ gọn hơn một chút để vừa một hàng từ 1024 px. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  [data-o="tools"] .topnav .links { gap: 0; }
  [data-o="tools"] .topnav .links a { padding-left: 8px; padding-right: 8px; font-size: .86rem; }
}

/* (6) Đợt 1 bước 4 (27/09): PHẦN HẰNG NGÀY của trang tổng thật (../hom-nay.js; KE-HOACH-GOP-CONG-CU.md §5.2 G1–G8, Sổ CH-168 A).
   Chỉ trang /tools/ (<body data-o="tools">). Mượn lớp sẵn có của bản xem trước cô đã duyệt (.so-luoi/.so-o ba ô số, .tq-tt "Xong 1/2
   lượt", .nv-vu "Đã xong", .pt-nhan.xong trên trạm, .tr-kicker/.tr-loi/.tr-cau/.chip-viec của thẻ trùm); tz.css ẩn mấy lớp đó với
   khách (vì ở bản xem trước là số mẫu), ở đây là số THẬT trên máy nên hiện lại. Lớp mới: hn-*, tk-*, .trum-khach. */
[data-o="tools"] #hanh-trinh [hidden] { display: none !important; }   /* .tq, .nv-vu-luoi… đặt display riêng: thuộc tính hidden phải thắng */
[data-o="tools"][data-vai="khach"] .so-luoi.hn-so { display: grid; }
[data-o="tools"][data-vai="khach"] .con-lai-so.hn-dem { display: inline; }
[data-o="tools"][data-vai="khach"] .tq-tt.hn-tt-do { display: inline-flex; }
[data-o="tools"][data-vai="khach"] .nv-vu .tt.hn-tt { display: inline-flex; }
[data-o="tools"][data-vai="khach"] .nv-vu.xong { background: color-mix(in srgb, var(--bac-ha) 9%, transparent); }
[data-o="tools"] .con-lai-so b { font-weight: 700; }
/* Bé Sao bên trái, ba ô số bên phải (màn rộng); dưới 900 px xếp chồng như tz.css */
@media (min-width: 900px) {
  [data-o="tools"] .hud-luoi { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  [data-o="tools"][data-vai="khach"] .khach-khoi { grid-column: 1; }
  [data-o="tools"] .hn-so { grid-column: 2; align-self: start; }
}
[data-o="tools"] .hn-bao { margin: 0; font: 600 .86rem/1.4 var(--f-hien); color: #A6ECD6; }
[data-o="tools"] .hn-bao:empty { display: none; }
[data-o="tools"] .khach-khoi .hn-chao { margin-top: -4px; color: var(--chu); }
[data-o="tools"] .hn-chao a { color: var(--hong-chu, var(--hong)); text-underline-offset: 3px; }
/* việc vừa xong kể từ lần ghé trước sáng lên hai nhịp (G3); giảm chuyển động: chỉ viền */
@keyframes hn-sang {
  0%, 100% { box-shadow: 0 0 0 0 rgb(166 236 214 / 0); }
  45% { box-shadow: 0 0 0 3px rgb(166 236 214 / .6), 0 0 26px 2px rgb(166 236 214 / .35); }
}
[data-o="tools"] .nv-vu.hn-moi, [data-o="tools"] li.hn-moi .pt-tram { animation: hn-sang 1.5s ease-in-out 2; }
[data-o="tools"] li.hn-moi .pt-tram { border-radius: 18px; }
/* lần mở đầu tiên trong ngày: Bé Sao vẫy (G4) */
@keyframes hn-vay { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }
[data-o="tools"] .be-sao-nho.hn-vay svg { transform-origin: 50% 85%; animation: hn-vay 1.1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
  [data-o="tools"] .nv-vu.hn-moi, [data-o="tools"] li.hn-moi .pt-tram, [data-o="tools"] .be-sao-nho.hn-vay svg { animation: none; }
  [data-o="tools"] .nv-vu.hn-moi, [data-o="tools"] li.hn-moi .pt-tram { outline: 2px solid var(--bac-ha); outline-offset: 2px; }
}
/* xong hết 13 việc: một dòng + nút Nghe Ari (giọng 060, chỉ phát khi bấm) */
[data-o="tools"] .hn-het { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 6px; padding: 12px 14px;
  border-radius: var(--r); background: color-mix(in srgb, var(--bac-ha) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bac-ha) 40%, transparent); }
[data-o="tools"] .hn-het p { margin: 0; font-size: .92rem; color: var(--chu); }
/* nút giọng viết sẵn (giong-ari.js gắn khi chạy; không JS thì ẩn như .pt-gt mục 4); ô chạm ≥ 44 px */
[data-o="tools"] .hn-giong { display: none; margin: 0; }
.co-js [data-o="tools"] .hn-giong:not([hidden]) { display: block; }
[data-o="tools"] .hn-giong .giong-nut { min-height: var(--cham); font-size: .86rem; color: var(--chu); border-color: var(--vien-2);
  background: rgb(245 139 175 / .1); }
[data-o="tools"] .hn-giong .giong-nut.dang-bat { border-color: var(--hong); background: rgb(245 139 175 / .2); }
[data-o="tools"] .hn-giong .giong-khung { max-width: none; background: var(--mat-dac); border-color: var(--vien-2); }
[data-o="tools"] .hn-giong .giong-ghi, [data-o="tools"] .hn-giong .giong-khung-gio { font-size: .78rem; }
[data-o="tools"] .hn-giong .giong-an { min-width: 44px; padding: 0 10px; }
/* thẻ trùm cho khách (G6): đứng đầu "Còn lại hôm nay" như thẻ trùm của người chơi, không vòng cánh sen, không cược */
[data-o="tools"] .trum-khach {
  grid-column: 1 / -1; display: grid; gap: 8px 20px; align-items: start;
  grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "hinh chu than";
  padding: 16px 18px; border-radius: 22px;
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--mau) 24%, transparent), transparent 58%),
    linear-gradient(135deg, rgb(58 38 86 / .92), rgb(37 26 55 / .94));
  border: 1px solid color-mix(in srgb, var(--mau) 48%, transparent);
  box-shadow: 0 18px 40px -26px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06);
}
[data-o="tools"] .tk-hinh { grid-area: hinh; width: 112px; height: 112px; border-radius: 50%; align-self: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #4A3570, #241836 72%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
[data-o="tools"] .tk-hinh img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
[data-o="tools"] .tk-chu { grid-area: chu; min-width: 0; }
[data-o="tools"] .tk-than { grid-area: than; min-width: 0; }
[data-o="tools"] .trum-khach h4 { margin: 2px 0 4px; font: 700 1.2rem/1.2 var(--f-hien); font-stretch: 108%; }
[data-o="tools"] .tk-blurb { margin: 6px 0 0; font-size: .88rem; line-height: 1.5; color: var(--chu-2); }
[data-o="tools"] .tk-tt { margin: 10px 0 0; font-size: .88rem; line-height: 1.45; color: var(--chu); }
[data-o="tools"] .tk-tt.du { color: #A6ECD6; }
[data-o="tools"] .tk-ghi { margin: 6px 0 0; font-size: .8rem; line-height: 1.45; color: var(--chu-3); }
[data-o="tools"] .tk-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
[data-o="tools"] .tk-hang .nut { min-height: var(--cham); }
[data-o="tools"] .chip-viec .hn-co { display: none; }
[data-o="tools"] .chip-viec.xong .hn-co { display: inline-flex; }
[data-o="tools"] .chip-viec.xong .hn-cho { display: none; }
[data-o="tools"] .chip-viec .hn-cho { display: inline-flex; }
@media (max-width: 899.98px) {
  [data-o="tools"] .trum-khach { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "hinh chu" "than than"; }
  [data-o="tools"] .tk-hinh { width: 96px; height: 96px; }
}
@media (max-width: 559.98px) {
  [data-o="tools"] .trum-khach { grid-template-columns: 84px minmax(0, 1fr); padding: 14px 14px 16px; gap: 8px 12px; }
  [data-o="tools"] .tk-hinh { width: 84px; height: 84px; }
  [data-o="tools"] .trum-khach h4 { font-size: 1.08rem; }
  [data-o="tools"] .trum-khach .tr-loi { display: none; }
}
/* G8: thêm Ari vào màn hình chính (chỉ hướng dẫn, không xin quyền thông báo) */
[data-o="tools"] .hn-mh { margin-top: 14px; border-top: 1px solid var(--vien); padding-top: 4px; }
[data-o="tools"] .hn-mh summary { display: flex; align-items: center; gap: 10px; min-height: var(--cham); cursor: pointer; list-style: none;
  border-radius: 12px; }
[data-o="tools"] .hn-mh summary::-webkit-details-marker { display: none; }
[data-o="tools"] .hn-mh summary > span { display: inline-flex; align-items: center; gap: 8px; font: 700 1.02rem var(--f-hien); font-stretch: 106%; }
[data-o="tools"] .hn-mh summary .ic { width: 18px; height: 18px; }
[data-o="tools"] .hn-mh summary > span .ic { color: var(--hong-chu, var(--hong)); }
[data-o="tools"] .hn-mh summary > .ic { margin-left: auto; color: var(--chu-3); transition: transform .3s; }
[data-o="tools"] .hn-mh[open] summary > .ic { transform: rotate(180deg); }
[data-o="tools"] .hn-mh > p { margin: 4px 0 12px; font-size: .9rem; color: var(--chu-2); max-width: 66ch; }
[data-o="tools"] .hn-mh-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; margin-bottom: 8px; }
[data-o="tools"] .hn-mh-he { padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--vien); background: rgb(255 255 255 / .04); }
[data-o="tools"] .hn-mh-he.hn-mh-may { border-color: var(--vien-2); background: rgb(245 139 175 / .07); }
[data-o="tools"] .hn-mh-he b { font: 700 .95rem var(--f-hien); }
[data-o="tools"] .hn-mh-he ol { margin: 6px 0 0; padding-left: 1.25em; font-size: .88rem; line-height: 1.55; color: var(--chu-2); }

/* (7) QĐ-78 Đợt 2 (27/09): chạm nhân vật giữa phòng / Bé Sao (tz.js: cử chỉ nhỏ + tiếng nhân vật QĐ-32 khi loa bật, tieng-nhan-vat.js).
   Chỉ ẢNH nhân vật nhận chạm (.pt-nv vẫn pointer-events: none để không che khu nào); con trỏ bàn tay để biết là chạm được. */
.co-js .pt-nv-anh.cham-duoc { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.co-js .be-sao-nho.cham-duoc { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* (8) Sửa sau người kiểm (27/09, làn qd78/gop): trang tổng thật /tools/ (<body data-o="tools">). Bản xem trước không đổi.
   a) PHÔNG (CLS 0,26–0,29 trên điện thoại mạng chậm): Be Vietnam Pro nay tại chỗ (dung_trang.mjs --that nhúng @font-face từ
      ../assets/phong/ + tải trước bộ 400); Saira vẫn từ Google. Phông DỰ PHÒNG đã đo trên máy (27/09, Chrome, 100 px): Be Vietnam Pro
      400 rộng hơn Arial 8%, 600 rộng hơn Arial Bold 3%, rộng hơn Roboto 10% / ~5%; Saira 800 (116%) hẹp hơn Arial Bold 4%, Saira
      600–700 (104–112%) rộng hơn ~2%. Ascent/descent của Saira 1,14/0,44, Be Vietnam Pro 1,00/0,27 (chia cho size-adjust vì trình
      duyệt nhân ghi đè với size-adjust). Chữ lúc chờ phông gần bằng chữ thật → phông về không xô dòng. */
@font-face { font-family: 'Saira DP'; font-weight: 800 900; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 96%; ascent-override: 118.8%; descent-override: 45.8%; line-gap-override: 0%; }
@font-face { font-family: 'Saira DP'; font-weight: 100 799; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 102%; ascent-override: 111.8%; descent-override: 43.1%; line-gap-override: 0%; }
@font-face { font-family: 'Saira DPR'; font-weight: 800 900; src: local('Roboto Bold'), local('Roboto-Bold'), local('Roboto'), local('Roboto-Regular');
  size-adjust: 98%; ascent-override: 116.3%; descent-override: 44.9%; line-gap-override: 0%; }
@font-face { font-family: 'Saira DPR'; font-weight: 100 799; src: local('Roboto Medium'), local('Roboto-Medium'), local('Roboto'), local('Roboto-Regular');
  size-adjust: 104%; ascent-override: 109.6%; descent-override: 42.3%; line-gap-override: 0%; }
@font-face { font-family: 'BVP DP'; font-weight: 100 500; src: local('Arial'), local('ArialMT');
  size-adjust: 108%; ascent-override: 92.6%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'BVP DP'; font-weight: 501 900; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 103%; ascent-override: 97.1%; descent-override: 26.2%; line-gap-override: 0%; }
@font-face { font-family: 'BVP DPR'; font-weight: 100 500; src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 110%; ascent-override: 90.9%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: 'BVP DPR'; font-weight: 501 900; src: local('Roboto Medium'), local('Roboto-Medium'), local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 105%; ascent-override: 95.2%; descent-override: 25.7%; line-gap-override: 0%; }
[data-o="tools"] { --f-hien: 'Saira', 'Saira DP', 'Saira DPR', system-ui, sans-serif;
  --f-than: 'Be Vietnam Pro', 'BVP DP', 'BVP DPR', system-ui, sans-serif; }
/*    lời dẫn: tz.css đo bằng ch (36ch, dưới 900 px 40ch) — ch đổi theo phông nên lúc chờ phông dòng hẹp hơn ~20% rồi nở ra. Đo bằng em
      (1ch Be Vietnam Pro = 0,676em) cho cùng bề rộng mà không đổi khi phông về. */
[data-o="tools"] .pt-dau .lede { max-width: 24.3em; }
@media (max-width: 899.98px) { [data-o="tools"] .pt-dau .lede { max-width: 27em; } }
/*    dòng nhỏ dưới nút Nghe Ari giới thiệu (lời 800 kể cả phần Ari Rewards chưa mở) */
[data-o="tools"] .pt-gt-ghi { margin: 6px 0 0; font-size: .78rem; line-height: 1.35; color: var(--chu-3, var(--chu-2)); }
.pt-gt-ghi { display: none; }
.co-js .pt-gt:not([hidden]) + .pt-gt-ghi { display: block; }   /* chỉ khi nút giọng hiện (cần JS) */

/*  b) Neo phụ #nhom-thoiquen nằm trong <summary> (lưới 3 cột) mà display:block thì chiếm ô lưới đầu, đẩy biểu tượng sang cột 2 và
      tên khu dồn vào cột 24 px (thẻ "Ăn uống và nước" vỡ ở mọi cỡ màn). position:absolute: không chiếm ô nào, vẫn là đích cuộn. */
[data-o="tools"] .pt-nhom-dau { position: relative; }
[data-o="tools"] .neo-phu { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/*  c) Liên kết gợi ý trong lời Bé Sao ("Gợi ý bắt đầu: Nhịp thở Ari") là nút gọi hành động chính của khách: ô chạm ≥ 44 px mà không
      đổi dòng chữ (đệm trên dưới, lề âm bù lại). */
[data-o="tools"] .hn-chao a { display: inline-block; padding: 12.5px 2px; margin: -12.5px -2px; }

/*  d) Nút "Mình thêm rồi, ẩn hướng dẫn này" của khối Thêm Ari vào màn hình chính (hom-nay.js nhớ trên máy, localStorage) */
[data-o="tools"] .hn-mh-an { margin: 4px 0 8px; min-height: var(--cham); padding: 10px 18px; font-size: .88rem; white-space: normal; }

/*  e) Dừng mọi chuyển động + danh mục điện thoại (trang Công cụ cũ có ở thanh điều hướng, tấm danh mục và thanh đáy; QĐ-73 bổ sung
      "không làm mất tính năng nào"). Màn ≥ 1024 px: nút tròn cạnh nút loa. Dưới 1024 px: nút danh mục mở tấm tối, trong tấm có Dừng.
      Dừng: html.dung-het, tz.js tạm dừng mọi hoạt ảnh lặp vô hạn (Web Animations) và báo 'ari-dung-het' cho vườn bong bóng. */
[data-o="tools"] .tz-dung, [data-o="tools"] .tz-menu-mo {
  flex: none; display: inline-grid; place-items: center; width: var(--cham); height: var(--cham); padding: 0; border-radius: 50%;
  border: 1px solid var(--vien-2); background: rgb(255 255 255 / .05); color: var(--chu); cursor: pointer; }
[data-o="tools"] .tz-dung .ic, [data-o="tools"] .tz-menu-mo .ic { width: 20px; height: 20px; }
[data-o="tools"] .tz-dung:hover, [data-o="tools"] .tz-menu-mo:hover { border-color: var(--hong); background: rgb(245 139 175 / .12); }
[data-o="tools"] .tz-dung[aria-pressed="true"] { background: var(--hong); border-color: var(--hong); color: #2A1B38; }
[data-o="tools"] .tz-dung .tz-ic-chay, [data-o="tools"] .tz-dung[aria-pressed="true"] .tz-ic-dung { display: none; }
[data-o="tools"] .tz-dung[aria-pressed="true"] .tz-ic-chay { display: block; }
[data-o="tools"] .tz-menu-mo[aria-expanded="true"] { background: rgb(245 139 175 / .2); border-color: var(--hong); }
@media (min-width: 1024px) { [data-o="tools"] .tz-menu-mo, [data-o="tools"] .tz-menu { display: none !important; } }
@media (max-width: 1023.98px) { [data-o="tools"] .topnav > .tz-dung { display: none; } }
[data-o="tools"] .tz-menu {
  position: fixed; left: 0; right: 0; top: 64px; z-index: 30; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 16px 18px; background: #180F28; border-bottom: 1px solid var(--vien-2);
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / .8); }
@media (max-width: 559.98px) { [data-o="tools"] .tz-menu { top: 58px; max-height: calc(100dvh - 58px); } }
[data-o="tools"] .tz-menu[hidden] { display: none; }
[data-o="tools"] .tz-menu-ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 2px 12px; }
[data-o="tools"] .tz-menu-ds a { display: flex; align-items: center; gap: 10px; min-height: var(--cham); padding: 8px 12px; border-radius: 12px;
  color: var(--chu); text-decoration: none; font-size: .98rem; }
[data-o="tools"] .tz-menu-ds a:hover { background: rgb(245 139 175 / .1); }
[data-o="tools"] .tz-menu-ds a[aria-current="page"] { background: rgb(245 139 175 / .2); font-weight: 600; }
[data-o="tools"] .tz-menu-choi { border: 1px solid var(--vien-2); }
[data-o="tools"] .tz-menu-choi .ic { flex: none; width: 20px; height: 20px; color: #F6D98B; }
[data-o="tools"] .tz-menu-choi span { display: flex; flex-direction: column; font-size: .84rem; color: var(--chu-2); }
[data-o="tools"] .tz-menu-choi b { font: 700 .98rem var(--f-hien); font-stretch: 106%; color: var(--chu); }
[data-o="tools"] .tz-menu-hang { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vien); }
[data-o="tools"] .tz-menu-hang .nut { flex: 1 1 auto; min-height: var(--cham); padding: 10px 16px; font-size: .9rem; }
[data-o="tools"] .tz-dung-chu[aria-pressed="true"] { background: var(--hong); border-color: var(--hong); color: #2A1B38; }
@media (max-width: 400px) { [data-o="tools"] .topnav { gap: 8px; } [data-o="tools"] .topnav .btn { padding: 8px 12px; } }