/* ============================================================
   Dáng "viên thuốc" cho toàn bộ nút — 2026-09-20.

   Bo góc nút được khai báo rải rác ở nhiều tệp với độ ưu tiên rất khác nhau
   (style.css, mobile-ui-v1.css, landing-v3.css, data-lists.css, content-layout.css…),
   nên để thống nhất một kiểu duy nhất thì cách gọn và dễ quay lui nhất là đè đúng MỘT
   thuộc tính border-radius. Muốn bỏ kiểu này: xóa tệp và 3 dòng <link> trỏ tới nó
   (templates/header.php, index.html, en.html) là mọi thứ trở lại như cũ.

   Trang làm bài (.page-simulation) được loại trừ: ở đó ô số câu hỏi và nút điều khiển
   cố ý vuông cạnh để giống phần mềm thi thật.
   ============================================================ */

body:not(.page-simulation) :is(a, button, input, span).btn,
body:not(.page-simulation) .btn {
  border-radius: 999px !important;
}

/* Nút chuyển trang của danh sách cũng theo cùng ngôn ngữ hình khối. */
body:not(.page-simulation) .pager-btn {
  border-radius: 999px !important;
}

/* Viên thuốc cần khoảng thở hai bên, nếu không chữ sẽ chạm mép cong. */
body:not(.page-simulation) .btn { padding-inline: 1.05rem; }
body:not(.page-simulation) .btn-sm { padding-inline: .85rem; }

/* KHÔNG dùng :has(> .ui-icon:only-child) để nhận diện nút chỉ có biểu tượng:
   :only-child chỉ xét phần tử con, không xét chữ, nên nút "biểu tượng + chữ" cũng khớp
   và bị aspect-ratio kéo thành hình tròn to tướng. Đã thử và hỏng đúng như vậy.
   Nút chỉ có biểu tượng trong dự án này đã tự cân đối bằng width/height riêng. */

@media (max-width: 760px) {
  body:not(.page-simulation) .btn { padding-inline: .9rem; }
  body:not(.page-simulation) .btn-sm { padding-inline: .75rem; }
}

/* ---------- Nút nghe phát âm trong bảng từ vựng (student/vocab.php) ---------- */
.vocab-word-cell { display: inline-flex; align-items: center; gap: .4rem; }
.vocab-speak {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border-strong, #cdd3e1); border-radius: 999px;
  background: #fff; color: var(--primary, #01468c); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.vocab-speak .ui-icon { width: 15px; height: 15px; display: block; }
.vocab-speak:hover { background: var(--primary-soft, #eaf2fc); border-color: var(--primary, #01468c); }
.vocab-speak:focus-visible { outline: 2px solid var(--primary, #01468c); outline-offset: 2px; }
/* Đang đọc: tô đậm để biết nút nào đang phát. */
.vocab-speak.is-speaking { background: var(--primary, #01468c); border-color: var(--primary, #01468c); color: #fff; }
@media (max-width: 760px) {
  .vocab-speak { width: 32px; height: 32px; }
  .vocab-speak .ui-icon { width: 17px; height: 17px; }
}

/* ---------- Nút mở menu (hamburger) ---------- */
/* Trước đây là ô vuông bo nhẹ với 3 vạch dài sát mép, nhìn thô và lạc so với các nút
   viên thuốc còn lại. Cho nó tròn đều và nhẹ nét hơn. Biểu tượng cũng được thu hẹp
   hai bên, tăng độ dày nét trong assets/images/ui-icons.svg. */
.nav-toggle,
body.has-sidebar .nav-toggle,
.lp-menu-toggle {
  border-radius: 999px !important;
}
@media (max-width: 1023px) {
  .nav-toggle {
    width: 42px; height: 42px;
    border-color: #dbe6f4;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  }
  .nav-toggle .ui-icon { width: 19px; height: 19px; }
  .nav-toggle:active { background: #eef4fc; }
}

/* ============================================================
   BẢNG MÀU NÚT — phối lại 2026-09-20.

   Vì sao phải sửa: nút vàng đang dùng linear-gradient 3 chặng (gold-light → gold →
   gold-deep) cộng viền vàng đậm #d9a208 cộng quầng sáng `0 2px 10px rgba(245,182,10,.4)`.
   Trên một nút to thì còn được, nhưng trong danh sách mà thẻ nào cũng có một nút vàng
   thì cả trang rực lên, quầng sáng làm mép nút nhòe, và dải chuyển màu khiến nút trông cũ.

   Hướng mới: màu phẳng, không chuyển sắc, không quầng màu — chỉ một bóng đổ xám rất nhẹ
   để nút tách khỏi nền. Vàng thương hiệu giữ nguyên vai trò hành động chính, chỉ hạ độ
   chói; viền đổi thành cùng tông đậm hơn một nấc thay vì nâu vàng.
   ============================================================ */

/* --- Hành động chính: vàng thương hiệu, phẳng --- */
body:not(.page-simulation) :is(.btn-primary, .btn-gold) {
  background: #f0ad06;
  color: #241a00;
  border-color: #d89e03;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1) !important;
  font-weight: 650;
}
body:not(.page-simulation) :is(.btn-primary, .btn-gold):hover {
  background: #e0a104;
  border-color: #c28c02;
  filter: none;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .14) !important;
}
body:not(.page-simulation) :is(.btn-primary, .btn-gold):active { background: #cf9503; }

/* --- Hành động phụ: viền mảnh, nền trắng --- */
body:not(.page-simulation) .btn-outline {
  background: #fff;
  color: #33465e;
  border-color: #d5dee9;
  box-shadow: none;
}
body:not(.page-simulation) .btn-outline:hover {
  background: #f3f7fc;
  border-color: #9fbbd9;
  color: var(--primary, #01468c);
}

/* --- Hành động cấp hai đậm: navy phẳng --- */
body:not(.page-simulation) .btn-navy {
  background: #01468c; color: #fff; border-color: #01468c;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12) !important;
}
body:not(.page-simulation) .btn-navy:hover { background: #013a75; border-color: #013a75; }

/* --- Hành động nguy hiểm: đỏ nhạt, chỉ đậm lên khi rê chuột --- */
body:not(.page-simulation) .btn-danger {
  background: #fff; color: #b42318; border-color: #f0c3bf; box-shadow: none;
}
body:not(.page-simulation) .btn-danger:hover { background: #fef3f2; border-color: #dc8b83; }

/* Vành sáng khi dùng bàn phím: một màu duy nhất cho mọi loại nút. */
body:not(.page-simulation) .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 70, 140, .28) !important;
}

/* --- Ngoại lệ: nút viền nằm trên NỀN TỐI --- */
/* Quy tắc .btn-outline ở trên đặt chữ màu xám đậm, đúng cho nền sáng nhưng sai hoàn toàn
   khi nút nằm trên dải navy của hero và khối Đăng ký: chữ tối trên nền tối, gần như
   không đọc được. Đã thử và hỏng đúng như vậy, nên trả các vùng đó về kiểu kính mờ. */
.lp-hero .btn-outline,
.lp-hero .hero-ctas .btn-outline,
body.site-flat .lp-section .register-band .btn-outline {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.lp-hero .btn-outline:hover,
.lp-hero .hero-ctas .btn-outline:hover,
body.site-flat .lp-section .register-band .btn-outline:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
  color: #fff;
}

/* ============================================================
   PHÂN CẤP MÀU: vàng chỉ dành cho hành động CHÍNH — 2026-09-20.

   Vấn đề: cùng một lớp .btn-primary được dùng cho cả nút chính của trang lẫn nút lặp
   lại ở TỪNG dòng danh sách. Màu vàng thương hiệu vốn để hút mắt, nhưng khi một màn
   hình có 5–10 nút vàng giống hệt nhau thì không còn gì nổi bật, cả trang rực lên và
   mắt không biết nhìn đâu trước.

   Cách chia: nút nằm trong một danh sách lặp (ô thao tác của bảng, thẻ bộ thi thử,
   cụm .list-actions) đổi sang navy đặc — vẫn rõ là nút bấm được, nhưng lùi lại một bậc.
   Vàng giữ nguyên ở: nút gửi biểu mẫu (.btn-block), nút trên trang chủ, nút Đăng nhập
   ở thanh đầu trang, và nút chính của mỗi trang (.page-head).

   Muốn quay lại vàng toàn bộ: xóa riêng khối này.
   ============================================================ */
body:not(.page-simulation) :is(table, .list-actions, .mock-test-card, .data-list-wrap) :is(.btn-primary, .btn-gold):not(.btn-block) {
  background: #01468c;
  color: #fff;
  border-color: #01468c;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12) !important;
}
body:not(.page-simulation) :is(table, .list-actions, .mock-test-card, .data-list-wrap) :is(.btn-primary, .btn-gold):not(.btn-block):hover {
  background: #013a75;
  border-color: #013a75;
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .16) !important;
}
body:not(.page-simulation) :is(table, .list-actions, .mock-test-card, .data-list-wrap) :is(.btn-primary, .btn-gold):not(.btn-block):active {
  background: #012f66;
}

/* ============================================================
   Nút phụ trong DANH SÁCH: nền trắng chưa đủ nổi — 2026-09-20.
   Trên nền thẻ cũng gần trắng, nút viền trắng gần như tan vào nền, người dùng phải
   nhìn kỹ mới thấy đó là nút bấm được. Cho nó nền xanh rất nhạt cùng họ với màu
   thương hiệu: vẫn là hành động phụ (không tranh chỗ với nút navy đặc và nút vàng),
   nhưng nhìn một cái là biết bấm được.
   Áp cho MỌI danh sách trong khu quản trị, không riêng một trang.
   Ô lọc/biểu mẫu vẫn giữ nút viền trắng vì ở đó nền và ngữ cảnh đã khác.
   ============================================================ */
body:not(.page-simulation) :is(td.table-action-cell, .list-actions, .actions, .mock-test-card) .btn-outline {
  background: #eef4fb;
  border-color: #c3d6ea;
  color: #1d4e86;
}
body:not(.page-simulation) :is(td.table-action-cell, .list-actions, .actions, .mock-test-card) .btn-outline:hover {
  background: #dde9f7;
  border-color: #7ea8d4;
  color: #01468c;
}
/* Nút xóa trong danh sách phải giữ sắc đỏ để không bấm nhầm. */
body:not(.page-simulation) :is(td.table-action-cell, .list-actions, .actions) .btn-danger {
  background: #fef6f5;
  border-color: #f0c3bf;
  color: #b42318;
}

/* ============================================================
   BIỂU TƯỢNG TRONG ĐĨA TRÒN cho nút toàn hệ thống — 2026-09-20.
   Lấy đúng ngôn ngữ của hàng lối tắt (.qa-ico): biểu tượng nằm trong một đĩa tròn
   màu nhạt đặt trước chữ — cho viên thuốc một điểm nhìn mà không chói.

   Loại trừ theo NGỮ CẢNH, không theo cỡ nút: gần như mọi nút trong hệ thống đều mang
   lớp .btn-sm (kể cả nút chính của từng mục), nên lọc theo .btn-sm là gần như không
   áp được ở đâu — đã thử và chỉ 0–1 nút mỗi trang đổi kiểu.
   KHÔNG áp ở: ô "Thao tác" của bảng và cụm .list-actions/.actions trong danh sách
   (mỗi hàng chỉ cao 30–36px, thêm đĩa là phình lên, mất đúng thứ vừa siết mấy đợt
   trước), trang làm bài, thanh dưới cùng, nút liên hệ nổi, và nút chỉ có biểu tượng.
   Cỡ đĩa co theo chỗ: 22px cho nút nhỏ, 26px cho nút thường, 30px cho nút trải ngang;
   trên điện thoại mỗi loại nhỏ hơn 2px.
   ============================================================ */
:root { --btn-disc: 26px; --btn-disc-pad: 5px; }

/* Phạm vi: CHỈ khu đăng nhập (`body.has-sidebar`). Trang chủ và các trang công khai
   giữ nguyên kiểu đã duyệt — thử áp toàn site thì 9 nút ở trang chủ cũng đổi theo,
   mà đó là thiết kế marketing riêng, không nằm trong yêu cầu "hệ thống admin". */
body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) .btn:not(.btn-icon)
  > :is(.ui-icon, .action-icon) {
  box-sizing: border-box;
  width: var(--btn-disc); height: var(--btn-disc); flex: 0 0 var(--btn-disc);
  padding: var(--btn-disc-pad); border-radius: 999px;
  background: var(--primary-soft, #eaf2fc);
  color: var(--primary, #01468c);
  transition: background .15s, color .15s;
}
body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) .btn-sm:not(.btn-icon)
  > :is(.ui-icon, .action-icon) { --btn-disc: 22px; --btn-disc-pad: 4px; }
body.has-sidebar:not(.page-simulation) :is(main, dialog) .btn-block:not(.btn-icon)
  > :is(.ui-icon, .action-icon) { --btn-disc: 30px; --btn-disc-pad: 6px; }

/* Nút vàng: đĩa sáng hơn nền để vẫn tách ra. */
body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) :is(.btn-primary, .btn-gold)
  > :is(.ui-icon, .action-icon) { background: rgba(255, 255, 255, .55); color: var(--gold-ink, #8a5e00); }
/* Nút navy đặc: đĩa trắng mờ. */
body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) .btn-navy
  > :is(.ui-icon, .action-icon) { background: rgba(255, 255, 255, .18); color: #fff; }
/* Nút xóa: đĩa đỏ nhạt. */
body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) .btn-danger
  > :is(.ui-icon, .action-icon) { background: #fdeceb; color: #b42318; }
/* Rê chuột: đĩa đậm lên cùng nhịp với nút. */
body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) .btn-outline:hover
  > :is(.ui-icon, .action-icon) { background: var(--primary, #01468c); color: #fff; }

/* --- Giữ biểu tượng TRẦN ở những chỗ chật --- */
body.has-sidebar:not(.page-simulation) :is(td.table-action-cell, .list-actions, .actions, .mock-test-card, .tabbar, .floating-contact, .mobile-cta) .btn
  > :is(.ui-icon, .action-icon) {
  --btn-disc: 16px; --btn-disc-pad: 0px;
  background: none !important; color: inherit !important; border-radius: 0;
}

@media (max-width: 760px) {
  body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) .btn:not(.btn-icon)
    > :is(.ui-icon, .action-icon) { --btn-disc: 24px; --btn-disc-pad: 4.5px; }
  body.has-sidebar:not(.page-simulation) :is(main, dialog, .app-topbar) .btn-sm:not(.btn-icon)
    > :is(.ui-icon, .action-icon) { --btn-disc: 20px; --btn-disc-pad: 3.5px; }
  body.has-sidebar:not(.page-simulation) :is(main, dialog) .btn-block:not(.btn-icon)
    > :is(.ui-icon, .action-icon) { --btn-disc: 26px; --btn-disc-pad: 5px; }
}