/* Slide ra mắt app, đứng đầu slider trang chủ (partials/home/slide-app.php).
   Bố cục: chữ bên trái, bên phải là cửa sổ app đang mở một bài Reading, dựng bằng CSS để ăn theo sáng tối và skin Cổ điển. */
.asl {
  --asl-chu: #15191e;
  --asl-chu2: #3b4250;
  --asl-mo: #5f6e82;
  --asl-giay: #fff;
  --asl-nen: #f3f5f8;
  --asl-ke: #dde1e6;
  --asl-vach: #dfe3e9;
  --asl-toi: #15191e;
  --asl-tren-toi: #fff;
  --asl-do: #c7252c;
  --asl-sat: #a83c12;
  --asl-sat-nen: #fbe8dd;
  --asl-nhan: #ffe86b;
  --asl-to1: #ffe86b;
  --asl-to2: #a8ecdf;
  --asl-to3: #ffc4dc;
  --asl-bong: 0 34px 60px -32px rgba(21, 25, 30, .42), 0 2px 8px rgba(21, 25, 30, .07);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: center;
  padding-block: clamp(24px, 3.6vw, 52px);
  text-align: left;
  color: var(--asl-chu);
}
html.ae-dark-mode .asl {
  --asl-chu: #f2f4f7;
  --asl-chu2: #c9d0da;
  --asl-mo: #a0abba;
  --asl-giay: #171a20;
  --asl-nen: #101216;
  --asl-ke: #2b3038;
  --asl-vach: #2f353f;
  --asl-toi: #f2f4f7;
  --asl-tren-toi: #0f1115;
  --asl-do: #ef4d55;
  --asl-sat: #f4a07c;
  --asl-sat-nen: #3b2116;
  --asl-nhan: rgba(255, 214, 92, .3);
  --asl-to1: #c9a722;
  --asl-to2: #2f9c88;
  --asl-to3: #c0507f;
  --asl-bong: 0 34px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03);
}

/* ─── cột chữ ─── */
.asl-chu { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.5vw, 20px); min-width: 0; }
.asl .asl-nhan-moi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--asl-toi);
  color: var(--asl-tren-toi);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.asl-nhan-moi svg { width: 13px; height: 13px; flex: none; }
.asl .asl-tua {
  margin: 0;
  color: var(--asl-chu);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.asl-tua em {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--asl-nhan) 58%, var(--asl-nhan) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.asl .asl-mota { margin: 0; max-width: 34em; color: var(--asl-chu2); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; }
html body .asl a.asl-nut,
html.ae-dark-mode body .asl a.asl-nut {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  background: var(--asl-toi) !important; /* dark-mode.css bỏ nền mọi nút, phải hơn độ đặc hiệu của nó */
  color: var(--asl-tren-toi) !important;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease;
}
html body .asl a.asl-nut:hover { transform: translateY(-1px); }
html body .asl a.asl-nut:focus-visible { outline: 2px solid var(--asl-do); outline-offset: 3px; }
.asl-nut i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--asl-do); color: #fff; }
.asl-nut svg { width: 16px; height: 16px; }
.asl .asl-du { margin: -8px 0 0; color: var(--asl-mo); font-size: 13px; }
.asl-so-lieu { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 2.6vw, 38px); margin: 6px 0 0; padding: 0; }
.asl-so-lieu div { min-width: 0; }
.asl .asl-so-lieu dt { margin: 0; color: var(--asl-chu); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.asl .asl-so-lieu dd { margin: 2px 0 0; color: var(--asl-mo); font-size: 13px; }

/* ─── cửa sổ app ─── */
.asl-khung { position: relative; min-width: 0; }
.asl-cua {
  overflow: hidden;
  border: 1px solid var(--asl-ke);
  border-radius: 14px;
  background: var(--asl-giay);
  box-shadow: var(--asl-bong);
  color: var(--asl-chu);
  font-size: 12px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.asl-tieu-cua { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; background: var(--asl-nen); border-bottom: 1px solid var(--asl-ke); color: var(--asl-mo); font-weight: 600; }
.asl-den { display: flex; gap: 6px; }
.asl-den i { width: 10px; height: 10px; border-radius: 50%; background: var(--asl-ke); }
.asl-den i:nth-child(1) { background: #ff5f57; }
.asl-den i:nth-child(2) { background: #febc2e; }
.asl-den i:nth-child(3) { background: #28c840; }
.asl-dau-thi { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--asl-ke); }
.asl-dau-thi b:first-child { color: var(--asl-do); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.asl-dau-thi div { color: var(--asl-chu2); font-weight: 600; }
.asl-than { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 14px; padding: 13px 14px 15px; }
.asl-ngan { background: var(--asl-ke); }
.asl-than b { display: block; margin: 0 0 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.asl-dong { display: flex; gap: 5px; height: 8px; margin: 0 0 7px; }
.asl-dong i { flex: var(--r, 1) 1 0; min-width: 0; border-radius: 3px; background: var(--asl-vach); }
.asl-dong.is-tieu { height: 11px; margin: 0 22% 11px; }
.asl-dong i.is-to { transform-origin: left center; }
.asl-dong i.a { background: var(--asl-to1); }
.asl-dong i.b { background: var(--asl-to2); }
.asl-dong i.c { background: var(--asl-to3); }
.asl-cau { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 5px 7px; align-items: center; margin: 0 0 11px; }
.asl-cau > div { color: var(--asl-chu); font-weight: 700; }
.asl-cau .asl-dong { margin: 0; }
.asl-chon { grid-column: 2; display: flex; gap: 12px; color: var(--asl-chu2); font-size: 10.5px; font-weight: 600; }
.asl-chon div { display: flex; align-items: center; gap: 4px; }
.asl-chon i { width: 9px; height: 9px; border: 1.5px solid var(--asl-mo); border-radius: 50%; }
.asl-chon .is-chon i { border-color: var(--asl-chu); background: var(--asl-chu); box-shadow: inset 0 0 0 1.5px var(--asl-giay); }
.asl-part { display: flex; align-items: stretch; border-top: 1px solid var(--asl-ke); background: var(--asl-nen); }
.asl-part > div { display: flex; align-items: center; gap: 7px; padding: 8px 14px; }
.asl-part > .is-mo { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.asl-part > .is-mo > b { flex: none; font-weight: 800; }
.asl-so { display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.asl-so i { flex: none; width: 17px; height: 17px; border-radius: 4px; color: var(--asl-chu2); font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center; }
.asl-so i.is-xong { box-shadow: inset 0 -2px 0 var(--asl-chu); }
.asl-so i.is-dang { background: var(--asl-toi); color: var(--asl-tren-toi); }
.asl-part > .is-gon { flex: none; color: var(--asl-mo); font-weight: 600; border-left: 1px solid var(--asl-ke); }
.asl-part > .is-nop { flex: none; padding: 0 12px; background: var(--asl-toi); color: var(--asl-tren-toi); }
.asl-part svg { width: 14px; height: 14px; }
.asl-trang-thai { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; border-top: 1px solid var(--asl-ke); color: var(--asl-mo); font-size: 11px; font-weight: 600; }
.asl-trang-thai div { display: flex; align-items: center; gap: 10px; }
.asl-trang-thai svg { width: 20px; height: 11px; }

.asl .asl-rust {
  position: absolute;
  top: -15px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--asl-ke);
  border-radius: 999px;
  background: var(--asl-sat-nen);
  color: var(--asl-sat);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(21, 25, 30, .4);
}
.asl-rust svg { width: 16px; height: 16px; flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .swiper-slide-active .asl-dong i.is-to { animation: asl-to .8s .25s cubic-bezier(.2, .7, .2, 1) backwards; }
}
@keyframes asl-to { from { transform: scaleX(.05); opacity: .4; } }

@media (max-width: 991px) {
  .asl { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 520px) {
  .asl-than { padding: 11px 11px 12px; gap: 10px; }
  .asl-part > div { padding: 7px 10px; }
  .asl-part > .is-gon + .is-gon { display: none; }
  .asl-chon { gap: 8px; }
  .asl-chon div:nth-child(3) { display: none; }
  .asl .asl-rust { right: 10px; font-size: 12px; }
}