/* Hệ thống giao diện chung BrokerDesk, đợt G1 (docs/giao_dien/SPEC.md mục 2 và 3).
   Nạp ngay sau khối <style> gốc của index.html, trước CSS từng màn. Ba phần:
   1. biến mới (phông, thang chữ, bo góc, khoảng cách, màu bảng điện);
   2. lớp thành phần dùng chung, tiền tố ht- để không đụng lớp cũ;
   3. kiểu khung app: thanh trên, dải phiên, thanh bên, nút Hướng dẫn.
   Biến màu cũ đổi giá trị nằm trong :root của index.html. Tra cứu sống: trang /he-thong. */

/* ════ 1. Biến ════ */
:root {
  /* Phông (SPEC 2.1) */
  --f-hien: "Chakra Petch", system-ui, sans-serif;
  --f-chu: "Be Vietnam Pro", system-ui, sans-serif;
  --f-so: "IBM Plex Mono", ui-monospace, monospace;
  /* Bảy cỡ chữ, nhỏ nhất 11px (SPEC 2.2) */
  --c1: 11px;
  --c2: 12.5px;
  --c3: 14px;
  --c4: 16px;
  --c5: 20px;
  --c6: 28px;
  --c7: 40px;
  /* Bo góc */
  --r-pn: 6px;
  --r-nut: 4px;
  --r-chip: 3px;
  /* Khoảng cách */
  --k1: 4px;
  --k2: 8px;
  --k3: 12px;
  --k4: 16px;
  --k5: 24px;
  --k6: 32px;
  /* Màu quy ước bảng điện (SPEC 2.3): tham chiếu, trần, sàn */
  --tc: #E8C547;
  --tran: #C77DFF;
  --san: #4CC3E6;
  /* Dải phiên: chiều cao hàng, nhịp thở con trỏ (theo bộ thông số docs/chuyen_dong) */
  --ray-cao: 24px;
  --ray-qua: #33577F; /* khoảng đã qua, giữa hai sắc xanh của bản phác (#2A4A6F, #3A6593) */
  --t-tho: calc(2400ms * var(--nhip));
  /* Nhịp sáng viền hộp gợi ý Kết nối Claude */
  --t-mcp-sang: calc(3800ms * var(--nhip));
}
html[data-giao-dien="sang"] {
  --tc: #A88A1E;
  --tran: #8E3FC9;
  --san: #1F86A8;
  --ray-qua: #9DB2CA;
}

/* ════ 2. Thành phần dùng chung (SPEC 2.4) ════ */

/* Panel */
.ht-pn {
  background: var(--mat);
  border: 1px solid var(--vien);
  border-radius: var(--r-pn);
  overflow: hidden;
  min-width: 0;
}
.ht-pn-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k3);
  flex-wrap: wrap;
  padding: var(--k2) var(--k4);
  background: var(--mat2);
  border-bottom: 1px solid var(--vien);
}
.ht-pn-than {
  padding: var(--k4);
}

/* Nhãn viết hoa giãn chữ */
.ht-nhan {
  font: 500 var(--c1) / 1.2 var(--f-so);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chu2);
}

/* Nút: đặc màu đồng, viền đồng, viền đỏ cho thao tác nguy hiểm */
.ht-nut,
.ht-nut-vien,
.ht-nut-do {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k2);
  padding: var(--k2) var(--k3);
  border: 1px solid var(--dong);
  border-radius: var(--r-nut);
  font: 600 var(--c2) / 1.2 var(--f-chu);
  cursor: pointer;
  white-space: nowrap;
}
.ht-nut {
  background: var(--dong);
  color: var(--dem);
}
.ht-nut:hover {
  background: var(--dong-s);
  border-color: var(--dong-s);
}
.ht-nut-vien {
  background: transparent;
  color: var(--dong);
}
.ht-nut-vien:hover {
  background: var(--dong-m);
}
.ht-nut-do {
  background: transparent;
  border-color: var(--xuong);
  color: var(--xuong);
}
.ht-nut-do:hover {
  background: rgba(224, 87, 75, .12);
}
.ht-nut:disabled,
.ht-nut-vien:disabled,
.ht-nut-do:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.ht-nut:focus-visible,
.ht-nut-vien:focus-visible,
.ht-nut-do:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
  border-radius: var(--r-nut);
}

/* Ô nhập, ô chọn */
.ht-o {
  background: var(--dem);
  border: 1px solid var(--vien2);
  border-radius: var(--r-nut);
  color: var(--chu);
  font: 400 var(--c2) / 1.3 var(--f-chu);
  padding: var(--k2) var(--k3);
  min-width: 0;
}
.ht-o::placeholder {
  color: var(--chu3);
}
.ht-o:focus,
.ht-o:focus-visible {
  outline: none;
  border-color: var(--dong);
  border-radius: var(--r-nut);
}

/* Chip */
.ht-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--k1);
  padding: 3px 7px;
  border: 1px solid var(--vien2);
  border-radius: var(--r-chip);
  font: 500 var(--c1) / 1.2 var(--f-so);
  letter-spacing: .06em;
  color: var(--chu2);
  white-space: nowrap;
}

/* Trạng thái: chấm tròn 6px theo màu chữ */
.ht-tt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 var(--c1) / 1.2 var(--f-so);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ht-tt::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Bảng */
.ht-bang {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--c2);
}
.ht-bang th {
  font: 500 var(--c1) / 1.2 var(--f-so);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chu3);
  text-align: left;
  padding: var(--k2) var(--k3);
  border-bottom: 1px solid var(--vien);
  white-space: nowrap;
}
.ht-bang td {
  padding: var(--k2) var(--k3);
  border-bottom: 1px solid rgba(var(--vien-rgb), .6);
  vertical-align: top;
}
.ht-bang tr:last-child td {
  border-bottom: 0;
}
.ht-bang tbody tr:hover td {
  background: var(--mat2);
}
.ht-bang .ht-so,
.ht-bang td.so,
.ht-bang th.so {
  text-align: right;
}

/* Dải số: ô liền khối ngăn bằng đường lưới 1px */
.ht-dai {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--vien);
  border: 1px solid var(--vien);
  border-radius: var(--r-pn);
  overflow: hidden;
}
.ht-dai > * {
  background: var(--mat);
  padding: var(--k3) var(--k4);
  min-width: 0;
}
.ht-dai b {
  display: block;
  margin-top: var(--k2);
  font: 500 var(--c5) / 1.15 var(--f-so);
  font-variant-numeric: tabular-nums;
  color: var(--chu);
}

/* Thẻ chuyển tab */
.ht-the {
  display: flex;
  gap: var(--k1);
  overflow-x: auto;
  border-bottom: 1px solid var(--vien);
}
.ht-the > button,
.ht-the > a {
  font: 500 var(--c2) / 1.2 var(--f-chu);
  color: var(--chu2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--k2) var(--k3);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.ht-the > button:hover,
.ht-the > a:hover {
  color: var(--chu);
}
.ht-the > .on,
.ht-the > [aria-selected="true"] {
  color: var(--chu);
  border-bottom-color: var(--dong);
}

/* Phông số, phông hiển thị */
.ht-so {
  font-family: var(--f-so);
  font-variant-numeric: tabular-nums;
}
.ht-hien {
  font-family: var(--f-hien);
  font-weight: 600;
}

/* Màu ngữ nghĩa */
.ht-len { color: var(--len); }
.ht-xuong { color: var(--xuong); }
.ht-tc { color: var(--tc); }
.ht-tran { color: var(--tran); }
.ht-san { color: var(--san); }

/* ════ 3. Khung app (SPEC mục 3) ════ */

/* Lưới khung: hàng ô chỉ số, vùng làm việc. Dải phiên dưới thanh trên đã bỏ khỏi khung app
   (chủ dự án 02.11.2026, docs/giao_dien CAU_HOI_MO câu 17); .ray-hang chỉ còn làm mẫu ở /he-thong. */
.khung {
  grid-template-rows: minmax(var(--strip), auto) 1fr;
}
.rail {
  grid-column: 1;
  grid-row: 2;
}
.lam {
  grid-column: 2;
  grid-row: 2;
}
@media (max-width: 900px) {
  .lam { grid-column: 1; }
}
@media (max-width: 760px) {
  .khung { grid-template-rows: auto 1fr; }
}

/* ── 3.1 Thanh trên ── */
.strip::after {
  content: none;
}
.hieu {
  gap: var(--k2);
  padding-left: var(--k5);
}
.hieu .n {
  font-family: var(--f-hien);
  font-size: var(--c4);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--chu);
}
.nut-rail {
  border-radius: var(--r-nut);
}
.strip .o {
  gap: var(--k1);
  padding: var(--k2) var(--k4);
}
.strip .o .lb {
  font: 500 var(--c1) / 1.2 var(--f-so);
  letter-spacing: .12em;
  color: var(--chu2);
}
.strip .o.chi-ba .lb,
.strip .o.gd .lb {
  letter-spacing: .12em;
}
.strip .o .gt {
  font-family: var(--f-so);
  font-size: var(--c5);
  color: var(--chu);
}
.strip .o .gt .nguon-nho {
  font-family: var(--f-chu);
  font-size: var(--c1);
}
.strip .o .ph {
  font-family: var(--f-chu);
  font-size: var(--c1);
}
.strip .o .dong2 {
  font-family: var(--f-so);
  font-size: var(--c2);
}
.strip .o .dong2 .k {
  font: 500 var(--c1) / 1.2 var(--f-so);
  letter-spacing: .12em;
  color: var(--chu3);
}
.strip .dem {
  font-family: var(--f-so);
  font-size: var(--c1);
}
.strip .chip {
  border-radius: var(--r-chip);
  font-family: var(--f-so);
  font-size: var(--c1);
}
.strip .o.phien .gt {
  gap: var(--k2);
  font-family: var(--f-chu);
  font-size: var(--c3);
}
.strip .o.phien .gt::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
}
.strip .o.phien[data-phien="trong"] .gt::before {
  box-shadow: none;
}
.strip .cuoi {
  gap: var(--k3);
  padding: 0 var(--k5);
}
.lam-moi {
  border-radius: var(--r-nut);
}
.dhieu {
  font: 500 var(--c1) / 1.6 var(--f-so);
  letter-spacing: .12em;
}
.avt {
  background: var(--mat2);
  border-radius: var(--r-pn);
  border-color: var(--vien2);
  font: 600 var(--c1) / 1 var(--f-so);
  letter-spacing: .04em;
  color: var(--dong);
}
.strip button:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
  border-radius: var(--r-nut);
}

/* ── Dải phiên HOSE (phien_ray.js): hàng 24px dưới hàng ô chỉ số, phủ hết vùng nội dung ── */
.ray-hang {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 39;
  display: flex;
  align-items: center;
  gap: var(--k4);
  box-sizing: border-box;
  height: var(--ray-cao);
  min-width: 0;
  padding: 0 var(--k5);
  overflow: hidden;
  background: var(--nen-strip);
  border-bottom: 1px solid var(--vien);
}
@media (max-width: 900px) {
  .ray-hang { grid-column: 1; }
}
.ray-hang .ray {
  position: relative;
  flex: 1 1 auto;
  min-width: 100px;
  height: 100%;
  container-type: inline-size;
}
.ray-hang .ray-thanh {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 6px;
}
/* Khe 2px giữa các khoảng như bản phác: viền màu nền nằm trong bề rộng khoảng, nên mép khoảng
   vẫn đúng tỷ lệ phút và con trỏ không lệch (khe dùng gap của flex sẽ làm lệch tới 10px). */
.ray-hang .ray-thanh > span {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--vien2);
  border-right: 2px solid var(--nen-strip);
}
.ray-hang .ray-thanh > span:last-child {
  border-right: 0;
}
.ray-hang .ray-thanh > span > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--ray-qua);
}
/* Nghỉ trưa vân sọc; ATO, ATC viền đồng */
.ray-hang .ray-thanh > .ray-nghi {
  background: repeating-linear-gradient(90deg, var(--vien2) 0 3px, transparent 3px 6px);
}
.ray-hang .ray-thanh > .ray-nghi > i {
  background: repeating-linear-gradient(90deg, var(--ray-qua) 0 3px, transparent 3px 6px);
}
.ray-hang .ray-thanh > .ray-ato,
.ray-hang .ray-thanh > .ray-atc {
  background: var(--dong-m);
  box-shadow: inset 0 0 0 1px rgba(210, 174, 92, .55);
}
.ray-hang .ray-thanh > .ray-ato > i,
.ray-hang .ray-thanh > .ray-atc > i {
  background: rgba(210, 174, 92, .5);
}
.ray-hang .ray-moc {
  position: absolute;
  top: 13px;
  font: 500 var(--c1) / 1 var(--f-so);
  color: var(--chu3);
  white-space: nowrap;
  transform: translateX(-50%);
}
.ray-hang .ray-moc-trai {
  transform: none;
}
.ray-hang .ray-moc-phai {
  transform: translateX(-100%);
}
/* Mốc 09:15 và 14:45 chỉ cách mốc bên cạnh 4% thanh: thanh hẹp thì ẩn để chữ không chồng. */
@container (max-width: 900px) {
  .ray-hang .ray-moc-phu { display: none; }
}
@container (max-width: 460px) {
  .ray-hang .ray-moc-hep { display: none; }
}
.ray-hang .ray-con {
  position: absolute;
  top: 0;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  background: var(--dong);
  box-shadow: 0 0 0 3px rgba(210, 174, 92, .18), 0 0 14px rgba(210, 174, 92, .7);
  pointer-events: none;
}
/* Nhịp thở chậm của con trỏ; giảm chuyển động thì không nhịp. */
@media (prefers-reduced-motion: no-preference) {
  .ray-hang .ray-con {
    animation: ray-tho var(--t-tho) var(--e-mem) infinite;
  }
}
@keyframes ray-tho {
  50% { box-shadow: 0 0 0 5px rgba(210, 174, 92, .08), 0 0 20px rgba(210, 174, 92, .9); }
}
.ray-hang .ray-chu {
  flex: 0 1 auto;
  min-width: 0;
  font: 500 var(--c2) / 1 var(--f-so);
  font-variant-numeric: tabular-nums;
  color: var(--chu2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ray-hang .ray-chu b {
  color: var(--chu);
  font-weight: 600;
}
@media (max-width: 639px) {
  .ray-hang {
    gap: var(--k3);
    padding: 0 var(--k3);
  }
  .ray-hang .ray-moc { display: none; }
  .ray-hang .ray-thanh { top: 9px; }
  .ray-hang .ray-con { top: 3px; }
  .ray-hang .ray-chu { font-size: var(--c1); }
}

/* ── 3.2 Thanh bên ── */
.rail {
  background: var(--nen-rail);
}
.rail .nh {
  font: 500 var(--c1) / 1.2 var(--f-so);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chu2);
  padding: var(--k5) var(--k4) var(--k2);
}
.rail button {
  gap: var(--k3);
  padding: var(--k2) var(--k4);
  font-family: var(--f-chu);
  font-size: var(--c3);
  line-height: 1.35;
  color: var(--chu2);
}
.rail > button {
  white-space: nowrap;
}
.rail button:hover,
.rail button.on {
  color: var(--chu);
}
.rail button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.rail button .chua {
  font-size: var(--c1);
}
.rail .day {
  margin: var(--k3) var(--k4);
}
/* Mục đang chọn: nền --mat2, vạch đồng 2px bên trái; di chuột nền --mat2. Vạch và nền do
   chuyen_dong.js trượt (.rail-chi, .rail-luot); bộ chọn hai lớp để thắng chuyen_dong.css. */
.rail > .rail-chi {
  background: var(--mat2);
}
.rail > .rail-chi::before {
  top: 0;
  bottom: 0;
  box-shadow: none;
}
.rail > .rail-luot {
  left: 0;
  right: 0;
  border-radius: 0;
  background: var(--mat2);
}
/* Không có chuyen_dong.js: tô thẳng trên nút. */
.rail:not(:has(> .rail-chi)) > button.on {
  background: var(--mat2);
  box-shadow: inset 2px 0 0 var(--dong);
}
.rail:not(:has(> .rail-luot)) > button:hover {
  background: var(--mat2);
}
.rail button:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: -2px;
  border-radius: var(--r-nut);
}
/* Phần dưới: tài khoản, nút nền sáng, đăng xuất theo .ht-nut-vien cỡ nhỏ */
.rail .chan {
  gap: var(--k3);
  padding: var(--k3) var(--k4) var(--k4);
}
.tk {
  gap: var(--k3);
  padding: 0;
}
.tk-ten b {
  font-size: var(--c2);
  color: var(--chu);
}
.tk-ten span {
  font-size: var(--c1);
}
.chan-nut {
  gap: var(--k2);
}
.rail .chan-nut button {
  gap: var(--k1);
  padding: 6px var(--k2);
  border: 1px solid var(--dong);
  border-radius: var(--r-nut);
  background: transparent;
  color: var(--dong);
  font: 500 var(--c1) / 1.2 var(--f-chu);
  white-space: nowrap;
}
.rail .chan-nut button:hover {
  border-color: var(--dong);
  color: var(--dong);
  background: var(--dong-m);
}
.rail .chan-nut button:focus-visible {
  outline-offset: 2px;
}

/* ── 3.3 Nút Hướng dẫn nổi (huong_dan.js dựng, huong_dan.css nạp sau: dùng bộ chọn có id) ── */
#nutHuongDan.hd-nut {
  gap: var(--k2);
  padding: 0 var(--k4);
  border: 1px solid var(--dong);
  border-radius: var(--r-nut);
  background: var(--mat);
  color: var(--dong);
  font: 600 var(--c2) / 1 var(--f-chu);
  box-shadow: none;
}
#nutHuongDan.hd-nut svg {
  color: var(--dong);
}
#nutHuongDan.hd-nut:hover,
#nutHuongDan.hd-nut[aria-expanded="true"] {
  background: var(--dong-m);
  color: var(--dong);
}
#nutHuongDan.hd-nut:hover svg,
#nutHuongDan.hd-nut[aria-expanded="true"] svg {
  color: var(--dong);
}
#nutHuongDan.hd-nut:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
  border-radius: var(--r-nut);
}
@media (max-width: 760px) {
  #nutHuongDan.hd-nut { padding: 0 var(--k3); }
}

/* Nút Kết nối MCP: viền đồng, tách khỏi các màn. */
#nutMcp {
  margin: 2px var(--k4) var(--k3);
  padding: var(--k2) var(--k3);
  border: 1px solid color-mix(in srgb, var(--dong) 55%, transparent);
  border-radius: var(--r-nut);
  background: var(--dong-m);
  color: var(--dong-s);
}
#nutMcp svg { color: var(--dong); }
#nutMcp:hover { background: color-mix(in srgb, var(--dong) 22%, transparent); color: var(--dong-s); }

/* Hộp hướng dẫn kết nối MCP: tấm đồng trên nền bàn. */
.hop-mcp {
  margin: auto;
  position: relative;
  width: min(480px, calc(100% - 28px));
  padding: 22px 22px 16px;
  border: 1px solid color-mix(in srgb, var(--dong) 62%, var(--vien));
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--dong) 22%, transparent), transparent 46%),
    var(--mat);
  color: var(--chu);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dong) 28%, transparent),
    0 28px 70px rgba(0, 0, 0, .48),
    0 0 48px color-mix(in srgb, var(--dong) 20%, transparent);
  overflow: hidden;
}
.hop-mcp::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dong-s), transparent);
}
.hop-mcp::backdrop { background: rgba(4, 8, 16, .62); }
.hop-mcp-dau { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 12px; margin-bottom: 16px; }
.hop-mcp-nhan {
  grid-column: 1;
  margin: 0;
  font: 500 11px/1 var(--f-so);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dong);
}
.hop-mcp h2 { grid-column: 1; margin: 0; font: 600 22px/1.2 var(--f-chu); }
.hop-mcp-dau form { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.hop-mcp-buoc { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: buoc; }
.hop-mcp-buoc li {
  counter-increment: buoc;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 8px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
}
.hop-mcp-buoc li::before {
  content: counter(buoc);
  grid-row: 1 / span 2;
  font: 500 13px/28px var(--f-so);
  color: var(--dong);
}
.hop-mcp-buoc b { font-weight: 600; }
.hop-mcp-buoc span { color: var(--chu2); }
.hop-mcp-dia {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  padding: 8px 8px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--dong) 35%, var(--vien));
  border-radius: 10px;
  background: color-mix(in srgb, var(--nen) 72%, transparent);
  box-shadow: inset 2px 0 0 var(--dong);
}
.hop-mcp-dia > span {
  font: 500 10px/1 var(--f-so);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dong);
}
.hop-mcp code {
  font: 500 12px/1.45 var(--f-so);
  word-break: break-all;
  color: var(--chu);
}
.hop-mcp button {
  border: 1px solid var(--dong);
  border-radius: var(--r-nut);
  background: var(--dong);
  color: #1a1408;
  font: 600 12px/1 var(--f-chu);
  padding: 8px 12px;
  cursor: pointer;
}
.hop-mcp .hop-mcp-x {
  background: transparent;
  color: var(--dong);
}
.hop-mcp button:focus-visible, #nutMcp:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.hop-mcp-ghi { margin: 8px 0 0; font-size: 12px; color: var(--chu2); }
@media (prefers-reduced-motion: no-preference) {
  .hop-mcp::before {
    animation: hop-mcp-sang var(--t-mcp-sang) var(--e-giua) infinite;
  }
}
@keyframes hop-mcp-sang {
  0%, 100% { opacity: .35; transform: scaleX(.72); }
  50% { opacity: 1; transform: scaleX(1); }
}