/* ============================================================================
   Giao diện kiểu Apple cho toàn app (nạp sau cùng, phủ lên code_css_4.2025.css, ds-theme.css
   và style riêng của từng module). Thông số đo từ apple.com:
   font hệ thống (SF Pro trên thiết bị Apple, Inter ở nơi khác), chữ #1d1d1f / #6e6e73,
   nền #f5f5f7, thẻ trắng bo góc lớn, đường kẻ #d2d2d7, nút dạng viên, một màu nhấn duy nhất.
   ============================================================================ */
:root {
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ap-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ap-bg: #f5f5f7;
  --ap-surface: #ffffff;
  --ap-surface2: #fbfbfd;
  --ap-text: #1d1d1f;
  --ap-text2: #6e6e73;
  --ap-text3: #86868b;
  --ap-line: #d2d2d7;
  --ap-line2: #e8e8ed;
  --ap-fill: rgba(118, 118, 128, .12);
  --ap-fill2: rgba(118, 118, 128, .07);
  --ap-accent: #894242;
  --ap-accent-hi: #a1504a;
  --ap-accent-text: #894242;
  --ap-accent-soft: rgba(137, 66, 66, .10);
  --ap-ring: 0 0 0 4px rgba(137, 66, 66, .14);
  --ap-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .04);
  --ap-radius: 18px;
}
body.dark-mode {
  --ap-bg: #000000;
  --ap-surface: #1c1c1e;
  --ap-surface2: #2c2c2e;
  --ap-text: #f5f5f7;
  --ap-text2: #a1a1a6;
  --ap-text3: #86868b;
  --ap-line: #38383a;
  --ap-line2: #2c2c2e;
  --ap-fill: rgba(118, 118, 128, .24);
  --ap-fill2: rgba(118, 118, 128, .14);
  --ap-accent: #a1504a;
  --ap-accent-hi: #b65d55;
  --ap-accent-text: #f4a98a;
  --ap-accent-soft: rgba(244, 169, 138, .12);
  --ap-ring: 0 0 0 4px rgba(244, 169, 138, .18);
  --ap-shadow: none;
}

/* ---- Nền, chữ ---- */
html body, html body .wrapper, html body .content-wrapper, html body .right-side, html body .main-footer {
  background: var(--ap-bg) !important;
}
html body {
  font-family: var(--ap-font) !important; font-size: 15px; color: var(--ap-text) !important;
  letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html body .content-wrapper { color: var(--ap-text); }
html body h1, html body h2, html body h3, html body h4 { font-family: var(--ap-font-display) !important; letter-spacing: -.022em; }
html body .content-wrapper h4, html body .content-wrapper h5 { color: var(--ap-text); }
html body .content-wrapper label, html body .content-wrapper .control-label { font-weight: 600; font-size: 13.5px; color: var(--ap-text); letter-spacing: -.005em; }
html body .content-wrapper .help-block, html body .content-wrapper .ds-muted { color: var(--ap-text2) !important; }
html body .content-wrapper a:not(.btn):not([data-toggle]) { color: var(--ap-accent-text); }

/* ---- Thanh menu: kính mờ tối ---- */
html body .navbar-custom {
  background: rgba(22, 22, 23, .86) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important;
}
html body .navbar-custom .navbar-links a { font-family: var(--ap-font) !important; font-size: 13.5px !important; font-weight: 400 !important; color: rgba(255, 255, 255, .86) !important; letter-spacing: -.01em; }
html body .navbar-custom .navbar-links a:hover { color: #fff !important; }

/* ---- Khung (box): thẻ trắng, tiêu đề chữ thường căn trái, không có thanh màu ---- */
html body .box {
  background: var(--ap-surface) !important; color: var(--ap-text);
  border: 0 !important; border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow), 0 0 0 1px var(--ap-line2) !important; margin-bottom: 20px;
}
html body .box > .box-header, html body .box.box-solid > .box-header {
  background: transparent !important; color: var(--ap-text) !important; border: 0 !important;
  padding: 16px 20px 2px !important; text-align: left !important; border-radius: var(--ap-radius) var(--ap-radius) 0 0 !important;
}
html body .box .box-header .box-title {
  font-family: var(--ap-font-display) !important; font-size: 17px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: -.022em !important; color: var(--ap-text) !important; line-height: 1.3 !important;
}
html body .box > .box-body { padding: 12px 20px 20px !important; background: transparent !important; color: var(--ap-text); border-radius: 0 0 var(--ap-radius) var(--ap-radius); }
html body .box .box-header .box-tools .btn, html body .box .box-header .btn-box-tool {
  background: transparent !important; color: var(--ap-text3) !important; border: 0 !important; box-shadow: none !important;
}
html body .box .box-header .btn-box-tool:hover { color: var(--ap-text) !important; }

/* ---- Cột trái / phải (sidebarPanel): trong suốt, các khung bên trong là thẻ; cột không chứa khung thì là thẻ ---- */
html body .content-wrapper .well {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
}
html body .content-wrapper .well:not(:has(.box)) {
  background: var(--ap-surface) !important; border-radius: var(--ap-radius) !important;
  box-shadow: var(--ap-shadow), 0 0 0 1px var(--ap-line2) !important; padding: 18px 20px !important;
}

/* ---- Tab chính: công tắc phân đoạn kiểu iOS ---- */
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 6px 0 18px;
  background: var(--ap-fill) !important; border: 0 !important; border-radius: 12px;
}
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs)::before,
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs)::after { display: none; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li { float: none; margin: 0 !important; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a {
  border: 0 !important; border-radius: 9px !important; margin: 0 !important; padding: 7px 18px !important;
  background: transparent !important; color: var(--ap-text) !important; box-shadow: none !important;
  font: 500 13.5px/1.25 var(--ap-font) !important; letter-spacing: -.01em !important; transition: background .2s, box-shadow .2s;
}
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a:hover { background: var(--ap-fill2) !important; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li.active > a {
  background: var(--ap-surface) !important; font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04) !important;
}
body.dark-mode .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li.active > a { background: #636366 !important; }
/* Nhãn tab viết HOA trong code ("TẢI DỮ LIỆU") hiển thị thành chữ thường, viết hoa chữ đầu */
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a > span {
  color: inherit !important; font-weight: inherit !important; text-transform: lowercase; display: inline-block;
}
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a > span::first-letter { text-transform: uppercase; }

/* ---- Tab con: gạch chân; chữ đen, tab đang chọn màu nhấn và đậm ---- */
html body .content-wrapper .tab-content .nav-tabs { border-bottom: 1px solid var(--ap-line2) !important; background: transparent !important; margin-bottom: 16px; }
html body .content-wrapper .tab-content .nav-tabs > li > a {
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  background: transparent !important; color: var(--ap-text) !important; padding: 10px 14px !important; margin: 0 2px -1px 0 !important;
  font: 500 14px/1.3 var(--ap-font) !important; letter-spacing: -.01em !important;
}
html body .content-wrapper .tab-content .nav-tabs > li > a:hover { color: var(--ap-accent-text) !important; }
html body .content-wrapper .tab-content .nav-tabs > li.active > a {
  color: var(--ap-accent-text) !important; font-weight: 600 !important; border-bottom-color: var(--ap-accent) !important;
}

/* ---- Nút: dạng viên (trừ các nút tải xuống có biểu tượng riêng) ---- */
html body .content-wrapper .btn:not([class*="download-button"]):not(.btn-box-tool):not(.ds-ai-act):not(.btn-file) {
  border-radius: 980px !important; font-family: var(--ap-font) !important; font-size: 14px; font-weight: 500;
  letter-spacing: -.01em; padding: 7px 16px; transition: background .15s, box-shadow .15s, transform .1s;
}
html body .content-wrapper .btn:not([class*="download-button"]):active { transform: scale(.98); }
html body .content-wrapper .btn-default:not([class*="download-button"]):not(.ds-upload-sample) {
  background: var(--ap-surface) !important; color: var(--ap-text) !important; border: 1px solid var(--ap-line) !important; box-shadow: none !important;
}
html body .content-wrapper .btn-default:not([class*="download-button"]):not(.ds-upload-sample):hover { background: var(--ap-bg) !important; }
html body .content-wrapper .btn-primary, html body .content-wrapper .ds-btn-run, html body .content-wrapper .ds-upload .ds-upload-sample {
  background: var(--ap-accent) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
}
html body .content-wrapper .btn-primary:hover, html body .content-wrapper .ds-btn-run:hover, html body .content-wrapper .ds-upload .ds-upload-sample:hover { background: var(--ap-accent-hi) !important; }

/* ---- Ô nhập ---- */
html body .content-wrapper .form-control, html body .content-wrapper .selectize-input, html body .content-wrapper .selectize-control.single .selectize-input {
  font-family: var(--ap-font) !important; font-size: 14px !important; color: var(--ap-text) !important;
  background: var(--ap-surface) !important; border: 1px solid var(--ap-line) !important; border-radius: 10px !important;
  box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
html body .content-wrapper .form-control:focus, html body .content-wrapper .selectize-input.focus {
  border-color: var(--ap-accent) !important; box-shadow: var(--ap-ring) !important; outline: 0 !important;
}
html body .content-wrapper .selectize-dropdown { border-radius: 12px; border: 1px solid var(--ap-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); font-family: var(--ap-font); overflow: hidden; }
html body .content-wrapper .selectize-control.multi .selectize-input > div {
  background: var(--ap-fill) !important; color: var(--ap-text) !important; border: 0 !important; border-radius: 6px !important; padding: 1px 7px !important;
}
html body .content-wrapper input[type="radio"], html body .content-wrapper input[type="checkbox"] { accent-color: var(--ap-accent); }
/* Ô chọn file: nút và ô tên file cùng khối */
html body .input-group:has(.btn-file) .btn-file { border-radius: 10px 0 0 10px !important; background: var(--ap-fill) !important; color: var(--ap-text) !important; border-color: var(--ap-line) !important; padding: 6px 12px !important; }
html body .input-group:has(.btn-file) .form-control { border-radius: 0 10px 10px 0 !important; border-left: 0 !important; }

/* ---- Bảng ---- */
html body .content-wrapper .gt_table, html body .content-wrapper table.dataTable, html body .content-wrapper .gt_table * { font-family: var(--ap-font) !important; }
html body .content-wrapper .dataTables_wrapper { font-family: var(--ap-font); font-size: 13.5px; color: var(--ap-text); }

/* ---- Hộp ghi chú ---- */
html body .ds-callout { border-radius: 12px !important; padding: 10px 14px !important; }

/* ---- Trang chủ: thẻ module ---- */
html body .agent-card {
  background: var(--ap-surface) !important; border: 0 !important; border-radius: 22px !important;
  box-shadow: var(--ap-shadow), 0 0 0 1px var(--ap-line2) !important; transition: transform .3s cubic-bezier(.2, .9, .3, 1), box-shadow .3s;
}
html body .agent-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, .10), 0 0 0 1px var(--ap-line2) !important; }
html body .agent-card .agent-title { font-family: var(--ap-font-display) !important; color: var(--ap-text) !important; letter-spacing: -.01em; }
html body .agent-card .agent-stats p { color: var(--ap-text2) !important; }
html body .agent-card .btn-go {
  border-radius: 980px !important; border: 0 !important; background: var(--ap-fill) !important; color: var(--ap-text) !important;
  font-family: var(--ap-font) !important; font-weight: 600 !important; padding: 6px 18px !important;
}
html body .agent-card .btn-go:hover { background: var(--ap-accent) !important; color: #fff !important; }
html body .ds-hero-title { font-family: var(--ap-font-display) !important; letter-spacing: -.03em !important; color: var(--ap-text) !important; }
html body .ds-hero-lead, html body .ds-section-lead { color: var(--ap-text2) !important; letter-spacing: 0; }
html body .ds-section-heading { font-family: var(--ap-font-display) !important; color: var(--ap-text) !important; letter-spacing: -.02em; }

/* ---- Hộp thoại ---- */
html body .modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, .25); background: var(--ap-surface); color: var(--ap-text); }
html body .modal-header, html body .modal-footer { border-color: var(--ap-line2); }

/* ---- Thẻ module ở trang chủ và trang nhóm: phủ agent-grids.css (bộ chọn ID + !important) ---- */
html body :is(#agent_grid_standard, #agent_grid_standard_view, #agent_grid_plus, #agent_grid_plus_view, #agent_grid_pro, #agent_grid_pro_view) .agent-card {
  border: 0 !important; border-radius: 22px !important; background: var(--ap-surface) !important;
  box-shadow: var(--ap-shadow), 0 0 0 1px var(--ap-line2) !important;
}
html body :is(#agent_grid_standard, #agent_grid_standard_view, #agent_grid_plus, #agent_grid_plus_view, #agent_grid_pro, #agent_grid_pro_view) .agent-card:hover {
  transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0, 0, 0, .10), 0 0 0 1px var(--ap-line2) !important;
}
html body :is(#agent_grid_standard, #agent_grid_standard_view, #agent_grid_plus, #agent_grid_plus_view, #agent_grid_pro, #agent_grid_pro_view) .agent-card::before { display: none !important; }
html body .agent-card .agent-header { background: transparent !important; }
html body .agent-card .agent-header::before { display: none !important; }
/* nhãn gói: viên nhỏ trung tính; Pro nền tối */
html body :is(#agent_grid_standard, #agent_grid_standard_view, #agent_grid_plus, #agent_grid_plus_view, #agent_grid_pro, #agent_grid_pro_view) .agent-header::after {
  background: var(--ap-fill) !important; color: var(--ap-text2) !important; box-shadow: none !important; border: 0 !important;
  font: 600 10px/1 var(--ap-font) !important; letter-spacing: .06em !important; padding: 5px 9px !important; border-radius: 980px !important;
  animation: none !important;
}
html body :is(#agent_grid_pro, #agent_grid_pro_view) .agent-header::after { background: var(--ap-text) !important; color: var(--ap-surface) !important; }
body.dark-mode .agent-card .agent-icon img { filter: none; }

/* ---- Trang chủ, trang nhóm: một nền duy nhất; chữ thường thay chữ HOA ---- */
html body #main_grid_view, html body [id$="_group_view"] { background: transparent !important; }
html body .agent-card .agent-title { text-transform: none !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -.015em !important; }
html body .agent-card .agent-stats p { font-size: 12.5px !important; letter-spacing: 0; }
/* dòng giới thiệu viết HOA trong code: hiển thị chữ thường, viết hoa chữ đầu */
html body .ds-hero-lead { text-transform: lowercase !important; font-size: 17px !important; letter-spacing: -.01em !important; }
html body .ds-hero-lead::first-letter { text-transform: uppercase; }
html body .ds-search-input, html body .ds-search-filter select {
  border-radius: 12px !important; border: 1px solid var(--ap-line) !important; background: var(--ap-surface) !important;
  color: var(--ap-text) !important; font-family: var(--ap-font) !important; box-shadow: none !important;
}

/* ---- Tinh chỉnh: tiêu đề khung căn trái; tab con thắng cả quy tắc có ID của từng module ---- */
html body .box .box-header { display: block; }
html body .box .box-header .box-title { display: block !important; text-align: left !important; width: 100%; margin: 0 !important; }
html body .content-wrapper .tab-content .nav-tabs > li > a:not(#ds-x) { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--ap-text) !important; }
html body .content-wrapper .tab-content .nav-tabs > li.active > a:not(#ds-x) { color: var(--ap-accent-text) !important; font-weight: 600 !important; border-bottom-color: var(--ap-accent) !important; }
html body .content-wrapper .tab-content .nav-tabs > li > a:not(#ds-x):hover { color: var(--ap-accent-text) !important; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a:not(#ds-x) { background: transparent !important; color: var(--ap-text) !important; border: 0 !important; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li.active > a:not(#ds-x) { background: var(--ap-surface) !important; }
body.dark-mode .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li.active > a:not(#ds-x) { background: #636366 !important; }

/* ---- Thắng các quy tắc chế độ tối cũ (module-dark-theme.css, style riêng của module):
   thêm :not(#ds-x) để có độ ưu tiên ngang bộ chọn ID ---- */
html body .box:not(#ds-x) { background: var(--ap-surface) !important; border: 0 !important; border-radius: var(--ap-radius) !important; box-shadow: var(--ap-shadow), 0 0 0 1px var(--ap-line2) !important; }
html body .box:not(#ds-x) > .box-header { background: transparent !important; background-image: none !important; color: var(--ap-text) !important; border: 0 !important; }
html body .box:not(#ds-x) > .box-header .box-title { color: var(--ap-text) !important; }
html body .box:not(#ds-x) > .box-body { background: transparent !important; color: var(--ap-text) !important; }
html body .content-wrapper .well:not(#ds-x) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .content-wrapper .well:not(#ds-x):not(:has(.box)) { background: var(--ap-surface) !important; box-shadow: var(--ap-shadow), 0 0 0 1px var(--ap-line2) !important; }
html body .content-wrapper .tab-content:not(#ds-x), html body .content-wrapper .tab-pane:not(#ds-x) { background: transparent !important; border: 0 !important; }
body.dark-mode, body.dark-mode .wrapper, body.dark-mode .content-wrapper, body.dark-mode .content, body.dark-mode [id$="_view"]:not(#ds-x) { background-color: var(--ap-bg) !important; }
/* ảnh hình vẽ (nền trắng của ggplot): bo góc nhẹ cho hài hoà trong thẻ */
html body .shiny-plot-output img { border-radius: 10px; }

/* Thanh tiến trình tải file (thay cho đoạn JS cũ trong app-head.js) */
html body .shiny-file-input-progress { height: 6px; border-radius: 3px; background: var(--ap-fill); box-shadow: none; }
html body .shiny-file-input-progress .progress-bar { background: var(--ap-accent) !important; border-radius: 3px; font-size: 0; }

/* ---- Tab chính: thắng CSS riêng của module (vd Quản lý số liệu: .ds-tab-label tô đỏ, bộ chọn ID).
   Chữ luôn màu chữ chính, không tô màu nhấn: trên nền xám của chế độ tối, chữ đỏ rất khó đọc. ---- */
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs):not(#ds-x) { background: var(--ap-fill) !important; border: 0 !important; border-radius: 12px !important; padding: 3px !important; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li:not(#ds-x) { margin: 0 !important; border: 0 !important; background: transparent !important; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a:not(#ds-x) {
  border: 0 !important; outline: 0 !important; border-radius: 9px !important; padding: 7px 18px !important; margin: 0 !important;
  font: 500 13.5px/1.25 var(--ap-font) !important; color: var(--ap-text) !important; box-shadow: none !important;
}
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li.active > a:not(#ds-x) {
  font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04) !important;
}
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a:not(#ds-x) * {
  color: inherit !important; font: inherit !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a:not(#ds-x) > span:not(#ds-x) { text-transform: lowercase !important; display: inline-block; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a:not(#ds-x) > span:not(#ds-x)::first-letter { text-transform: uppercase; }
html body .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li > a:not(#ds-x):focus-visible { box-shadow: var(--ap-ring) !important; }
body.dark-mode .content-wrapper .nav-tabs:not(.tab-content .nav-tabs) > li.active > a:not(#ds-x) { background: #636366 !important; color: #fff !important; }

/* ---- Tab con dạng nav-pills (vd Quản lý số liệu): cùng kiểu gạch chân với tab con nav-tabs ---- */
html body .content-wrapper .tab-content .nav-pills:not(#ds-x) { border-bottom: 1px solid var(--ap-line2) !important; margin-bottom: 16px; }
html body .content-wrapper .tab-content .nav-pills > li:not(#ds-x) { margin: 0 2px 0 0 !important; }
html body .content-wrapper .tab-content .nav-pills > li > a:not(#ds-x) {
  background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  color: var(--ap-text) !important; padding: 10px 12px !important; margin-bottom: -1px !important; box-shadow: none !important;
  font: 500 14px/1.3 var(--ap-font) !important; letter-spacing: -.01em !important;
}
html body .content-wrapper .tab-content .nav-pills > li > a:not(#ds-x):hover { color: var(--ap-accent-text) !important; }
html body .content-wrapper .tab-content .nav-pills > li.active > a:not(#ds-x) { color: var(--ap-accent-text) !important; font-weight: 600 !important; border-bottom-color: var(--ap-accent) !important; }

/* ---- Ô kết quả dạng chữ (verbatimTextOutput): dùng font chung, không dùng font máy đánh chữ.
   Riêng khung "Code R" (id chứa "code") giữ font đơn cách vì là code. ---- */
html body .content-wrapper pre.shiny-text-output:not([id*="code"]):not([id*="Code"]) {
  font-family: var(--ap-font) !important; font-size: 14px !important; line-height: 1.6 !important; letter-spacing: -.01em;
  color: var(--ap-text) !important; background: var(--ap-fill2) !important; border: 0 !important; border-radius: 12px !important;
  padding: 12px 14px !important; white-space: pre-wrap; word-break: normal;
}
html body .content-wrapper pre[id*="code"]:not(#ds-x), html body .content-wrapper pre[id*="Code"]:not(#ds-x) {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace !important; font-size: 12.5px !important; line-height: 1.6 !important; padding: 12px 14px !important; white-space: pre-wrap;
  background: var(--ap-fill2) !important; border: 0 !important; border-radius: 12px !important; color: var(--ap-text) !important;
}

/* ---- Phân biệt gói kiểu Apple: tông màu và nhãn tinh tế, không viền sặc sỡ ---- */
:root { --tier-plus: #894242; --tier-plus-soft: rgba(137, 66, 66, .10); --tier-pro: #1d1d1f; }
body.dark-mode { --tier-plus: #f4a98a; --tier-plus-soft: rgba(244, 169, 138, .14); --tier-pro: #f5f5f7; }
/* Standard: nhãn xám */
html body :is(#agent_grid_standard, #agent_grid_standard_view) .agent-header::after { background: var(--ap-fill) !important; color: var(--ap-text2) !important; }
/* Plus: nhãn đỏ gạch nhạt + viền mảnh cùng tông */
html body :is(#agent_grid_plus, #agent_grid_plus_view) .agent-header::after { background: var(--tier-plus-soft) !important; color: var(--tier-plus) !important; }
html body :is(#agent_grid_plus, #agent_grid_plus_view) .agent-card { box-shadow: var(--ap-shadow), 0 0 0 1px rgba(137, 66, 66, .22) !important; }
body.dark-mode :is(#agent_grid_plus, #agent_grid_plus_view) .agent-card { box-shadow: 0 0 0 1px rgba(244, 169, 138, .28) !important; }
/* Pro: nhãn đen than (tối: trắng), viền đậm hơn, ánh nền nhẹ phía trên */
html body :is(#agent_grid_pro, #agent_grid_pro_view) .agent-header::after { background: var(--tier-pro) !important; color: var(--ap-surface) !important; }
html body :is(#agent_grid_pro, #agent_grid_pro_view) .agent-card {
  background: linear-gradient(180deg, rgba(29, 29, 31, .045) 0%, rgba(29, 29, 31, 0) 38%), var(--ap-surface) !important;
  box-shadow: var(--ap-shadow), 0 0 0 1px rgba(29, 29, 31, .30) !important;
}
body.dark-mode :is(#agent_grid_pro, #agent_grid_pro_view) .agent-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 38%), var(--ap-surface) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) !important;
}
html body .agent-card .agent-actions:not(#ds-x) { border-top: 1px solid var(--ap-line2) !important; }
html body .agent-card .agent-icon:not(#ds-x) { border-color: transparent !important; }
html body .agent-card .rating span { color: var(--ap-text2) !important; }

/* Cột trái/phải không còn đệm (well trong suốt): bỏ lề âm của .row để các khung không lòi ra ngoài cột */
/* (mọi hàng nằm trong cột, kể cả lồng trong conditionalPanel / tab; hàng nằm trong một cột con thì giữ nguyên) */
html body .content-wrapper .well .row:not(.well [class*="col-"] .row) { margin-left: 0 !important; margin-right: 0 !important; }
html body .content-wrapper .well .row:not(.well [class*="col-"] .row) > [class*="col-"]:first-child { padding-left: 0 !important; }
html body .content-wrapper .well .row:not(.well [class*="col-"] .row) > [class*="col-"]:last-child { padding-right: 0 !important; }

/* ---- Sửa theo rà soát tự động (tests/qa/ui_audit.R) ---- */
/* tiêu đề khung: thắng cả quy tắc có ID của module (vd khung "Tài liệu tham khảo" trùng màu nền) */
html body .box:not(#ds-x):not(#ds-y) > .box-header .box-title:not(#ds-x) { color: var(--ap-text) !important; }
/* số thứ tự các bước (Ghép, nối dữ liệu) */
html body .ds-step-num:not(#ds-x) { background: var(--ap-accent-soft) !important; color: var(--ap-accent-text) !important; font-weight: 700 !important; }
/* ô kết quả cỡ mẫu: nền màu nhấn nhạt, chữ đậm rõ */
html body .ss-result:not(#ds-x) { background: var(--ap-accent-soft) !important; color: var(--ap-text) !important; border-radius: 12px !important; padding: 12px 16px !important; }
html body .ss-result:not(#ds-x) b, html body .ss-result:not(#ds-x) .ss-n { color: var(--ap-text) !important; }
html body .ss-result:not(#ds-x) .ss-n b { color: var(--ap-accent-text) !important; font-size: 22px; letter-spacing: -.02em; }
html body .ss-result.ss-error:not(#ds-x) { background: rgba(215, 0, 21, .10) !important; }
/* hộp tab (tabBox, vd Tìm bài báo): cùng kiểu tab con */
html body .content-wrapper .nav-tabs-custom:not(#ds-x) { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body .content-wrapper .nav-tabs-custom:not(#ds-x) > .nav-tabs { border-bottom: 1px solid var(--ap-line2) !important; background: transparent !important; }
html body .content-wrapper .nav-tabs-custom:not(#ds-x) > .nav-tabs > li { border: 0 !important; margin: 0 2px -1px 0 !important; }
html body .content-wrapper .nav-tabs-custom:not(#ds-x) > .nav-tabs > li > a { color: var(--ap-text) !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; font: 500 14px var(--ap-font) !important; }
html body .content-wrapper .nav-tabs-custom:not(#ds-x) > .nav-tabs > li.active > a { color: var(--ap-accent-text) !important; font-weight: 600 !important; border-bottom-color: var(--ap-accent) !important; }
html body .content-wrapper .nav-tabs-custom:not(#ds-x) > .tab-content { background: transparent !important; color: var(--ap-text); padding: 12px 0 0 !important; }
/* nhãn trạng thái (Chuỗi thời gian): nền trong suốt nhạt theo màu, hợp cả sáng lẫn tối */
html body .ts-badge-red:not(#ds-x) { background: rgba(215, 0, 21, .10) !important; color: #b4232a !important; }
html body .ts-badge-blue:not(#ds-x) { background: rgba(0, 113, 227, .10) !important; color: #0058b0 !important; }
body.dark-mode .ts-badge-red:not(#ds-x) { background: rgba(255, 69, 58, .18) !important; color: #ff8a80 !important; }
body.dark-mode .ts-badge-blue:not(#ds-x) { background: rgba(10, 132, 255, .20) !important; color: #7fbaff !important; }
/* icon trên thẻ: không có nền trắng riêng (icon đã có vòng tròn) */
html body .agent-card .agent-icon:not(#ds-x) { background: transparent !important; box-shadow: none !important; }
/* bảng giá: nhãn nổi bật và giá niêm yết đủ tương phản */
html body .pr-tag:not(#ds-x) { background: var(--ap-accent) !important; color: #fff !important; }
html body .pr-old:not(#ds-x), html body .pr-old:not(#ds-x) s { color: var(--ap-text2) !important; }

/* ---- Chữ logo "DataStat 5.0": kiểu tên sản phẩm của Apple (chữ thường xen hoa, SF Pro Display
   đậm vừa, khít chữ; số phiên bản cùng cỡ, nét mảnh, màu xám) ---- */
html body .navbar-logo:not(#ds-x) { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none !important; }
html body .navbar-logo:not(#ds-x) .logo-main {
  font-family: var(--ap-font-display) !important; font-size: 22px !important; font-weight: 600 !important;
  letter-spacing: -.025em !important; text-transform: none !important; color: #f5f5f7 !important; line-height: 1 !important;
}
html body .navbar-logo:not(#ds-x) .logo-version {
  font-family: var(--ap-font-display) !important; font-size: 22px !important; font-weight: 300 !important;
  letter-spacing: -.02em !important; color: rgba(245, 245, 247, .55) !important; line-height: 1 !important;
  position: static !important; top: auto !important; margin: 0 !important; background: none !important; -webkit-text-fill-color: currentColor !important;
}
html body .navbar-logo:not(#ds-x):hover .logo-version { color: rgba(245, 245, 247, .8) !important; }

/* ---- Thanh tiêu đề khung: đệm trên dưới bằng nhau, tiêu đề luôn nằm giữa hàng (cả khi thu gọn) ---- */
html body .box:not(#ds-x) > .box-header { position: relative; padding: 14px 56px 14px 20px !important; min-height: 50px; display: flex !important; align-items: center; }
html body .box:not(#ds-x) > .box-body { padding-top: 2px !important; }
html body .box.collapsed-box:not(#ds-x) > .box-header { border-radius: var(--ap-radius) !important; }

/* ---- Nút thu gọn / mở rộng: một kiểu cho mọi khung: nút tròn trung tính, "−" khi mở, "+" khi thu gọn ---- */
html body .box:not(#ds-x) > .box-header > .box-tools { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%); margin: 0 !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x) {
  display: inline-flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: var(--ap-fill2) !important; background-image: none !important; color: var(--ap-text2) !important; box-shadow: none !important; opacity: 1 !important;
  transition: background .15s, color .15s, transform .15s;
}
html body .box .box-tools .btn-box-tool:not(#ds-x):hover { background: var(--ap-fill) !important; color: var(--ap-text) !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x):active { transform: scale(.92); }
html body .box .box-tools .btn-box-tool:not(#ds-x)::before, html body .box .box-tools .btn-box-tool:not(#ds-x)::after { display: none !important; content: none !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x) i { font-style: normal !important; background: none !important; width: auto !important; height: auto !important; display: inline-block; line-height: 1 !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x) i::before {
  font-family: var(--ap-font) !important; font-weight: 500 !important; font-size: 18px !important; line-height: 1 !important; display: inline-block;
}
html body .box .box-tools .btn-box-tool:not(#ds-x) i.fa-minus::before { content: "\2212" !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x) i.fa-plus::before { content: "+" !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x):not(#ds-y) i { color: inherit !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x) i.fa-times::before { content: "\00d7" !important; }

/* Đoạn diễn giải dưới bảng (trước đây dùng style nội tuyến bị lỗi dấu nháy nên không có tác dụng) */
html body .ds-note-text { font-size: 14px; line-height: 1.6; color: var(--ap-text); margin: 10px 0 18px; }

/* ---- Chữ trong khung và bảng: một cỡ chữ, một font, một giãn dòng ---- */
html body .content-wrapper .box-body { font-size: 14px; line-height: 1.6; }
html body .content-wrapper .box-body p { margin: 0 0 10px; }
html body .content-wrapper .box-body table + .ds-note-text, html body .content-wrapper .box-body .ds-note-text + table { margin-top: 14px; }

/* ---- MỌI BẢNG KẾT QUẢ (gt, gtsummary, DT, bảng HTML): một chuẩn duy nhất, kiểu bảng Results của
   bài báo Q1. Ba đường kẻ: kẻ đậm trên hàng tiêu đề cột, kẻ mảnh dưới hàng tiêu đề cột, kẻ đậm
   cuối bảng. Không kẻ dọc, không kẻ ngang giữa các dòng, không nền sole, không tô màu ô; chữ một
   font, một cỡ (14px), một giãn dòng (1.5); chú thích dưới bảng 12.5px. Đạt / Không đạt là nhãn
   nhỏ .ds-verdict (ds_gt_flag), không tô cả dòng. Bảng tính sửa số liệu (handsontable) giữ riêng. ---- */
html body { --ds-rule: #1d1d1f; }
html body.dark-mode { --ds-rule: #a1a1a6; }
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) {
  font-family: var(--ap-font) !important; font-size: 14px !important; line-height: 1.5 !important;
  color: var(--ap-text) !important; background: transparent !important;
  border: 0 !important; border-collapse: collapse !important; box-shadow: none !important;
}
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) :is(td, th) {
  font-family: inherit !important; font-size: 14px !important; line-height: 1.5 !important; font-style: normal !important;
  color: var(--ap-text) !important; background: transparent !important; box-shadow: none !important;
  border: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important;
  padding-right: 12px !important; vertical-align: top; text-transform: none !important; letter-spacing: 0 !important;
}
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) :is(td, th):first-child { padding-left: 8px !important; }
/* (chữ cột đầu cách mép trái đường kẻ 8px, cột cuối cách mép phải 8px: không dính sát đường kẻ) */
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) :is(td, th):last-child { padding-right: 8px !important; }
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) :is(td, th) :is(span, strong, b, em, i, div, p):not(.ds-verdict) { font-size: inherit !important; line-height: inherit !important; font-style: normal !important; }
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) :is(thead, tbody, tfoot, tr) { background: transparent !important; border: 0 !important; }
/* (đường kẻ chỉ đặt trên ô th/td; kẻ mặc định của gt ở thead/tbody/tr, vd kẻ xám 2px trên thân bảng, bị bỏ để không đè kẻ chuẩn) */
/* căn lề: cột đầu (tên biến, chỉ số) căn trái, các cột số liệu căn giữa */
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) :is(td, th):not(:first-child) { text-align: center !important; }
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) :is(td, th):first-child { text-align: left !important; }
/* hàng tiêu đề cột: chữ đậm; kẻ đậm phía trên hàng đầu, kẻ mảnh phía dưới hàng cuối */
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) thead th { font-weight: 600 !important; vertical-align: bottom; white-space: normal; }
html body .content-wrapper :is(table.dataTable, .box-body table:not(.gt_table), .tab-content table:not(.gt_table)):not(.htCore):not(.handsontable table):not(#ds-x) thead tr:first-child th { border-top: 2px solid var(--ds-rule) !important; }
html body .content-wrapper :is(table.dataTable, .box-body table:not(.gt_table), .tab-content table:not(.gt_table)):not(.htCore):not(.handsontable table):not(#ds-x) thead tr:last-child th { border-bottom: 1px solid var(--ds-rule) !important; }
html body .content-wrapper .gt_table:not(#ds-x) thead tr.gt_col_headings:not(tr.gt_col_headings + tr) th { border-top: 2px solid var(--ds-rule) !important; }
html body .content-wrapper .gt_table:not(#ds-x) thead :is(th.gt_col_heading, th.gt_column_spanner_outer:has(.gt_column_spanner:not(:empty))) { border-bottom: 1px solid var(--ds-rule) !important; }
html body .content-wrapper .gt_table:not(#ds-x) .gt_column_spanner { border-bottom: 1px solid var(--ds-rule) !important; padding-bottom: 4px !important; font-weight: 600 !important; }
/* kẻ đậm cuối bảng (dưới dòng cuối của phần thân; chú thích nằm dưới kẻ) */
html body .content-wrapper :is(.gt_table, table.dataTable, .box-body table, .tab-content table):not(.htCore):not(.handsontable table):not(#ds-x) tbody tr:last-child :is(td, th) { border-bottom: 2px solid var(--ds-rule) !important; }
/* tiêu đề bảng gt (nằm trên kẻ đầu): căn trái, không kẻ */
html body .content-wrapper .gt_table:not(#ds-x) .gt_heading { text-align: left !important; padding-left: 8px !important; border: 0 !important; }
html body .content-wrapper .gt_table:not(#ds-x) .gt_title { font-size: 15px !important; font-weight: 600 !important; padding-bottom: 2px !important; }
html body .content-wrapper .gt_table:not(#ds-x) .gt_subtitle { font-size: 13px !important; color: var(--ap-text2) !important; padding-top: 0 !important; padding-bottom: 8px !important; }
/* dòng nhóm (row group): chữ đậm, không nền, không kẻ */
html body .content-wrapper .gt_table:not(#ds-x) :is(.gt_group_heading, .gt_empty_group_heading) { font-weight: 600 !important; padding-top: 10px !important; }
/* chú thích dưới bảng */
html body .content-wrapper .gt_table:not(#ds-x) :is(.gt_footnote, .gt_sourcenote, .gt_footnotes, .gt_sourcenotes) :is(td, th, div), html body .content-wrapper .gt_table:not(#ds-x) :is(.gt_footnote, .gt_sourcenote) {
  font-size: 12.5px !important; line-height: 1.5 !important; color: var(--ap-text2) !important; border: 0 !important; padding: 4px 8px 0 !important; text-align: left !important;
}
html body .content-wrapper .gt_table:not(#ds-x) tfoot tr:last-child :is(td, th) { border-bottom: 0 !important; }
/* DT: bảng tiêu đề và bảng thân tách đôi khi cuộn ngang: hàng tiêu đề ẩn trong bảng thân không kẻ */
html body .content-wrapper .dataTables_scrollBody table.dataTable:not(#ds-x):not(#ds-y) thead tr :is(th, td) { border: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; height: 0 !important; line-height: 0 !important; font-size: 0 !important; }
/* bảng DT luôn vừa khung (DT tự đặt bề rộng theo px, lệch khi đổi đệm ô, sinh thanh cuộn ngang thừa) */
html body .content-wrapper .dataTables_wrapper:not(#ds-x) :is(table.dataTable, .dataTables_scrollHeadInner) { width: 100% !important; }
html body .content-wrapper .dataTables_scrollHead table.dataTable:not(#ds-x) { margin-bottom: 0 !important; }
html body .content-wrapper .dataTables_wrapper.no-footer .dataTables_scrollBody, html body .content-wrapper table.dataTable.no-footer:not(#ds-x) { border-bottom: 0 !important; }
html body .content-wrapper table.dataTable:not(#ds-x) tbody tr.selected > * { background: var(--ap-fill) !important; }
html body .content-wrapper .dataTables_wrapper:not(#ds-x) :is(.dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_paginate) { font-size: 13px !important; color: var(--ap-text2) !important; padding-top: 10px; }
html body .content-wrapper .dataTables_wrapper:not(#ds-x), html body .content-wrapper .dataTables_wrapper:not(#ds-x) :is(.dataTables_scroll, .dataTables_scrollHead, .dataTables_scrollHeadInner, .dataTables_scrollBody) { background: transparent !important; }
/* nút chuyển trang DT: chữ thường, trang hiện tại là viên xám nhạt */
html body .content-wrapper .dataTables_wrapper:not(#ds-x) .paginate_button { border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--ap-text2) !important; box-shadow: none !important; padding: 3px 10px !important; }
html body .content-wrapper .dataTables_wrapper:not(#ds-x) .paginate_button.current { background: var(--ap-fill) !important; color: var(--ap-text) !important; font-weight: 600; }
html body .content-wrapper .dataTables_wrapper:not(#ds-x) .paginate_button:not(.disabled):not(.current):hover { background: var(--ap-fill) !important; color: var(--ap-text) !important; }
html body .content-wrapper .dataTables_wrapper:not(#ds-x) .paginate_button.disabled { opacity: .4; }
/* nhãn Đạt / Không đạt */
html body .ds-verdict { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px !important; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: 1px; }
html body td > .ds-verdict:first-child { margin-left: 0; }
html body .content-wrapper td .ds-verdict.ok:not(#ds-x) { color: #1d7a35 !important; background: rgba(52, 199, 89, .14); }
html body .content-wrapper td .ds-verdict.bad:not(#ds-x) { color: #c4281c !important; background: rgba(255, 59, 48, .12); }
body.dark-mode .content-wrapper td .ds-verdict.ok:not(#ds-x) { color: #30d158 !important; background: rgba(48, 209, 88, .16); }
body.dark-mode .content-wrapper td .ds-verdict.bad:not(#ds-x) { color: #ff6961 !important; background: rgba(255, 105, 97, .16); }

/* ---- Ngắt dòng đẹp: tiêu đề chia đều các dòng (không để một chữ lẻ loi), đoạn văn tránh dòng cuối mồ côi ---- */
html body .agent-card .agent-title, html body .agent-card .agent-stats p, html body .box .box-title,
html body h1, html body h2, html body h3, html body h4, html body .ds-section-heading, html body .ds-hero-title { text-wrap: balance; }
html body p, html body .ds-section-lead, html body .ds-note-text, html body .ds-callout { text-wrap: pretty; }
html body .agent-card .agent-title { line-height: 1.3 !important; margin-bottom: 4px !important; padding: 0 14px; }
html body .agent-card .agent-stats p { line-height: 1.4 !important; padding: 0 16px; font-size: 12.5px !important; }

/* ---- Nhãn gói kiểu kim loại (Apple): Standard đen, Plus bạc, Pro vàng; viền thẻ cùng tông ---- */
html body :is(#agent_grid_standard, #agent_grid_standard_view, #agent_grid_plus, #agent_grid_plus_view, #agent_grid_pro, #agent_grid_pro_view) .agent-header::after {
  font: 700 10px/1 var(--ap-font) !important; letter-spacing: .08em !important; padding: 5px 10px !important; border-radius: 980px !important;
}
html body :is(#agent_grid_standard, #agent_grid_standard_view) .agent-header::after { background: #1d1d1f !important; color: #f5f5f7 !important; box-shadow: none !important; }
body.dark-mode :is(#agent_grid_standard, #agent_grid_standard_view) .agent-header::after { background: #3a3a3c !important; color: #f5f5f7 !important; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18) !important; }
html body :is(#agent_grid_plus, #agent_grid_plus_view) .agent-header::after {
  background: linear-gradient(135deg, #f5f6f7 0%, #d5d8dc 32%, #fbfbfc 52%, #bfc3c8 76%, #e6e8eb 100%) !important;
  color: #3f444a !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .08) !important;
}
html body :is(#agent_grid_pro, #agent_grid_pro_view) .agent-header::after {
  background: linear-gradient(135deg, #f8e9c5 0%, #e0bd72 32%, #fbefcf 52%, #c39a45 76%, #e9cf92 100%) !important;
  color: #4f3a10 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 0 .5px rgba(120, 85, 20, .30), 0 1px 2px rgba(120, 85, 20, .15) !important;
}
html body :is(#agent_grid_plus, #agent_grid_plus_view) .agent-card { box-shadow: var(--ap-shadow), 0 0 0 1px rgba(150, 156, 164, .45) !important; }
html body :is(#agent_grid_pro, #agent_grid_pro_view) .agent-card {
  background: linear-gradient(180deg, rgba(224, 189, 114, .10) 0%, rgba(224, 189, 114, 0) 40%), var(--ap-surface) !important;
  box-shadow: var(--ap-shadow), 0 0 0 1px rgba(195, 154, 69, .55) !important;
}
body.dark-mode :is(#agent_grid_plus, #agent_grid_plus_view) .agent-card { box-shadow: 0 0 0 1px rgba(200, 205, 212, .35) !important; }
body.dark-mode :is(#agent_grid_pro, #agent_grid_pro_view) .agent-card {
  background: linear-gradient(180deg, rgba(224, 189, 114, .12) 0%, rgba(224, 189, 114, 0) 40%), var(--ap-surface) !important;
  box-shadow: 0 0 0 1px rgba(224, 189, 114, .45) !important;
}

/* ---- Thanh tiêu đề module: tên module chữ thường, nhãn gói cùng kiểu kim loại với thẻ ở trang chủ.
   Danh sách gói khớp trang chủ và bảng giá (thay các quy tắc gán cứng, thiếu và sai trong agent-grids.css).
   Thống kê cơ bản dùng chung một màn hình cho 3 gói: app.R đặt data-tier theo gói đang mở. ---- */
html body .module-header .module-title {
  font-family: var(--ap-font-display) !important; font-size: 17px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: -.02em !important; color: var(--ap-text) !important;
}
html body [id$="_view"] .module-title::after { content: none !important; display: none !important; }
html body :is(#data_management_view, #data_transform_view, #comau_view, #tltk_view, #descriptive_view, #linear_regression_view,
  #logistic_regression_view, #count_regression_view, #survival_view, #kiemdinh_view, #baocao_view, #psy_sem_view, #time_series_view,
  #mixed_model_view, #meta_view, #did_view, #gee_view, #lca_view, #sem_view) .module-title::after {
  display: inline-block !important; margin-left: 10px !important; vertical-align: 2px !important; position: static !important;
  font: 700 10px/1 var(--ap-font) !important; letter-spacing: .08em !important; padding: 5px 10px !important; border-radius: 980px !important;
  border: 0 !important; text-transform: uppercase !important;
}
/* Standard: đen */
html body :is(#data_management_view, #data_transform_view, #comau_view, #tltk_view, #descriptive_view) .module-title::after {
  content: "Standard" !important; background: #1d1d1f !important; color: #f5f5f7 !important; box-shadow: none !important;
}
body.dark-mode :is(#data_management_view, #data_transform_view, #comau_view, #tltk_view, #descriptive_view) .module-title::after {
  background: #3a3a3c !important; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18) !important;
}
/* Plus: bạc kim loại */
html body :is(#linear_regression_view, #logistic_regression_view, #count_regression_view, #survival_view, #kiemdinh_view, #baocao_view,
  #descriptive_view[data-tier="plus"]) .module-title::after {
  content: "Plus" !important; color: #3f444a !important;
  background: linear-gradient(135deg, #f5f6f7 0%, #d5d8dc 32%, #fbfbfc 52%, #bfc3c8 76%, #e6e8eb 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .08) !important;
}
/* Pro: vàng kim loại */
html body :is(#psy_sem_view, #time_series_view, #mixed_model_view, #meta_view, #did_view, #gee_view, #lca_view, #sem_view,
  #descriptive_view[data-tier="pro"]) .module-title::after {
  content: "Pro" !important; color: #4f3a10 !important;
  background: linear-gradient(135deg, #f8e9c5 0%, #e0bd72 32%, #fbefcf 52%, #c39a45 76%, #e9cf92 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 0 .5px rgba(120, 85, 20, .30), 0 1px 2px rgba(120, 85, 20, .15) !important;
}

/* ---- Nút − và + rõ hơn (nền và chữ đậm hơn), áp cho mọi khung ---- */
html body .box .box-tools .btn-box-tool:not(#ds-x) { width: 30px !important; height: 30px !important; background: var(--ap-fill) !important; color: var(--ap-text) !important; box-shadow: inset 0 0 0 .5px var(--ap-line) !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x):hover { background: var(--ap-text) !important; color: var(--ap-surface) !important; }
html body .box .box-tools .btn-box-tool:not(#ds-x) i::before { font-size: 20px !important; font-weight: 600 !important; }

/* ---- Ô chọn (selectize): ô nhập ẩn bên trong không có nền, viền (chế độ tối tô nhầm thành ô vuông nhỏ) ---- */
html body .selectize-control .selectize-input input:not(#ds-x),
html body .selectize-control .selectize-input input:not(#ds-x):focus {
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important;
  color: var(--ap-text) !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
}

/* ---- Bảng tính (handsontable) ở chế độ tối: nền, chữ, đường kẻ theo bảng màu tối; giữ nguyên chiều cao dòng ---- */
body.dark-mode .handsontable td:not(#ds-x), body.dark-mode .handsontable th:not(#ds-x) { background-color: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-line) !important; }
body.dark-mode .handsontable th:not(#ds-x) { background-color: var(--ap-surface2) !important; color: var(--ap-text2) !important; }
body.dark-mode .handsontable td.htDimmed:not(#ds-x) { color: var(--ap-text2) !important; }
html body .handsontable:not(#ds-x) { font-family: var(--ap-font) !important; }

/* Thanh nút (Trích dẫn: chọn kiểu, tải thư viện...): xuống dòng trên màn hình hẹp thay vì tràn khung */
html body .cit-toolbar, html body .cit-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; min-width: 0; }
html body .cit-toolbar .form-group { min-width: 0 !important; max-width: 100%; }

/* ---- Ô chọn file: một ô liền khối kiểu Apple (một viền, một góc bo; nút bên trái nền xám nhạt,
   ngăn cách bằng đường kẻ mảnh; chọn vào thì cả ô sáng viền) ---- */
html body .input-group:has(.btn-file):not(#ds-x) {
  display: flex !important; align-items: stretch; height: 36px; border: 1px solid var(--ap-line) !important; border-radius: 10px !important;
  overflow: hidden; background: var(--ap-surface) !important; transition: border-color .15s, box-shadow .15s;
}
html body .input-group:has(.btn-file):not(#ds-x):focus-within, html body .input-group:has(.btn-file):not(#ds-x):hover { border-color: var(--ap-text3) !important; }
html body .input-group:has(.btn-file):not(#ds-x) .input-group-btn { display: flex; }
html body .input-group:has(.btn-file):not(#ds-x) .btn-file {
  height: 100% !important; margin: 0 !important; padding: 0 14px !important; display: flex !important; align-items: center;
  border: 0 !important; border-right: 1px solid var(--ap-line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--ap-fill2) !important; color: var(--ap-text) !important; font: 500 13.5px/1 var(--ap-font) !important; white-space: nowrap;
}
html body .input-group:has(.btn-file):not(#ds-x) .btn-file:hover { background: var(--ap-fill) !important; }
html body .input-group:has(.btn-file):not(#ds-x) .form-control {
  height: 100% !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: var(--ap-text2) !important; font: 13.5px/1 var(--ap-font) !important;
}
/* chữ hai bên cùng một đường cơ sở: cùng cỡ chữ, cùng chiều cao dòng (ô cao 36px trừ viền 2px) */
html body .input-group:has(.btn-file):not(#ds-x) .btn-file {
  display: block !important; line-height: 34px !important; height: 34px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13.5px !important;
}
html body .input-group:has(.btn-file):not(#ds-x) .form-control {
  line-height: 34px !important; height: 34px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13.5px !important;
}

/* ---- Nút tải JPG, PNG, TIFF, Word, Excel: viên tối giản kiểu Apple (viền mảnh, mũi tên tải nét mảnh,
   nhãn định dạng), thay cho ảnh PNG nhiều màu cũ (ds-theme.css, .tiff-text) ---- */
html body :is(.image-download-button, .image1-download-button, .image2-download-button, .word-download-button, .excel-download-button):not(#ds-x) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
  width: auto !important; min-width: 0 !important; height: 30px !important; padding: 0 12px 0 10px !important; margin: 4px 0 4px 6px !important;
  background: var(--ap-surface) !important; background-image: none !important;
  border: 1px solid var(--ap-line) !important; border-radius: 980px !important; box-shadow: none !important;
  color: var(--ap-text) !important; font-size: 0 !important; line-height: 1 !important; text-indent: 0 !important;
  vertical-align: middle; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
html body :is(.image-download-button, .image1-download-button, .image2-download-button, .word-download-button, .excel-download-button):not(#ds-x):hover {
  background: var(--ap-fill2) !important; border-color: var(--ap-text3) !important;
}
html body :is(.image-download-button, .image1-download-button, .image2-download-button, .word-download-button, .excel-download-button):not(#ds-x):active { transform: scale(.96); }
html body :is(.image-download-button, .image1-download-button, .image2-download-button, .word-download-button, .excel-download-button):not(#ds-x) i { display: none !important; }
html body :is(.image-download-button, .image1-download-button, .image2-download-button, .word-download-button, .excel-download-button):not(#ds-x)::before {
  content: "" !important; display: block; width: 13px; height: 13px; flex: 0 0 auto; background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v7.5M4.8 7 8 10.2 11.2 7M3 13.5h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v7.5M4.8 7 8 10.2 11.2 7M3 13.5h10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body :is(.image-download-button, .image1-download-button, .image2-download-button, .word-download-button, .excel-download-button):not(#ds-x)::after {
  display: block; font: 600 12px/1 var(--ap-font) !important; letter-spacing: .02em; color: var(--ap-text) !important;
}
html body .image-download-button:not(#ds-x)::after  { content: "JPG" !important; }
html body .image1-download-button:not(#ds-x)::after { content: "PNG" !important; }
html body .image2-download-button:not(#ds-x)::after { content: "TIFF" !important; }
html body .word-download-button:not(#ds-x)::after   { content: "Word" !important; }
html body .excel-download-button:not(#ds-x)::after  { content: "Excel" !important; }

/* chân trang */
html body .ds-footer-copy { font-size: 12px; color: var(--ap-text3); }

/* ---- Thanh tiến trình tải file: mảnh 3px, thụt vào hai bên đúng bằng độ bo của ô (đầu thanh thẳng hàng
   với cạnh thẳng của ô), tải xong thì mờ dần thay vì để lại một vạch dưới ô ---- */
html body .shiny-file-input-progress:not(#ds-x) {
  height: 3px !important; margin: 6px 10px 0 !important; border: 0 !important; border-radius: 3px !important;
  background: var(--ap-fill) !important; box-shadow: none !important; overflow: hidden !important;
}
html body .shiny-file-input-progress:not(#ds-x) .progress-bar {
  height: 100% !important; border-radius: 3px !important; background: var(--ap-accent) !important;
  box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; transition: width .3s ease;
}
html body .shiny-file-input-progress:not(#ds-x):has(.progress-bar[style*="100%"]) { animation: ds-progress-done .5s ease 1s forwards; }
@keyframes ds-progress-done { to { opacity: 0; } }

/* ---- Hộp "Tải lên thành công" (style nội tuyến xanh lá cũ #d4edda): hộp xám nhạt bo tròn kiểu Apple,
   tiêu đề xanh lá hệ thống, phần thông tin chữ phụ ---- */
html body div[style*="d4edda"]:not(#ds-x) { background: var(--ap-fill2) !important; border: 0 !important; border-radius: 12px !important; padding: 12px 14px !important; }
html body div[style*="d4edda"]:not(#ds-x) * { color: var(--ap-text2) !important; font-size: 13px !important; }
html body div[style*="d4edda"]:not(#ds-x) > div:first-child span { color: #248a3d !important; font-size: 14px !important; font-weight: 600 !important; }
body.dark-mode div[style*="d4edda"]:not(#ds-x) > div:first-child span { color: #30d158 !important; }
html body div[style*="d4edda"]:not(#ds-x) strong { color: var(--ap-text) !important; font-weight: 600 !important; }
/* Thông báo của Shiny: thẻ kính mờ bo tròn */
html body .shiny-notification { border: 0 !important; border-radius: 14px !important; background: var(--ap-surface) !important; color: var(--ap-text) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15), 0 0 0 .5px var(--ap-line) !important; font-family: var(--ap-font) !important; font-size: 13.5px !important; opacity: 1 !important; }
html body .shiny-notification-error { box-shadow: 0 10px 30px rgba(0, 0, 0, .15), inset 3px 0 0 #d70015, 0 0 0 .5px var(--ap-line) !important; }
html body .shiny-notification-warning { box-shadow: 0 10px 30px rgba(0, 0, 0, .15), inset 3px 0 0 #c77c00, 0 0 0 .5px var(--ap-line) !important; }

/* Ô chữ kết quả (verbatimTextOutput) chưa có nội dung: ẩn, không để lại một dải xám trống dưới bảng */
html body .content-wrapper pre.shiny-text-output:empty { display: none !important; }

/* Hai bảng liền nhau trong cùng một khung: tách bằng khoảng trắng, không để kẻ cuối bảng trên và
   kẻ đầu bảng dưới dính thành một vệt đậm */
html body .content-wrapper :is(.datatables, .shiny-html-output):has(table) ~ :is(.datatables, .shiny-html-output):has(table) { margin-top: 28px !important; }

/* Gióng cột: bảng kết quả dùng bề rộng cột cố định theo %: cột đầu (tên biến) 30%, các cột còn lại
   chia đều phần còn lại. Nhiều bảng xếp chồng có cùng số cột thì các cột thẳng hàng với nhau.
   Bảng xem dữ liệu (có phân trang, nhiều cột) giữ bề rộng tự động. */
html body .content-wrapper :is(.gt_table, .dataTables_wrapper:not(:has(.dataTables_paginate)) table.dataTable):not(#ds-x) { table-layout: fixed !important; width: 100% !important; }
html body .content-wrapper :is(.gt_table, .dataTables_wrapper:not(:has(.dataTables_paginate)) table.dataTable):not(#ds-x) :is(thead tr:last-child th, colgroup col):first-child { width: 30% !important; }
html body .content-wrapper :is(.gt_table, .dataTables_wrapper:not(:has(.dataTables_paginate)) table.dataTable):not(#ds-x) :is(thead tr:last-child th, colgroup col):not(:first-child) { width: auto !important; }
html body .content-wrapper :is(.gt_table, .dataTables_wrapper:not(:has(.dataTables_paginate)) table.dataTable):not(#ds-x) :is(td, th) { overflow-wrap: anywhere; }

/* Khoảng trắng thừa dưới tiêu đề khung: ô chữ trạng thái chưa có nội dung đã ẩn, nên đường kẻ hr()
   đi ngay sau nó (hoặc đứng đầu khung) cũng ẩn theo; bảng hay nội dung bắt đầu sát dưới tiêu đề */
html body .content-wrapper :is(pre.shiny-text-output:empty, .shiny-html-output:empty, .shiny-text-output:empty) + hr,
html body .content-wrapper .box-body > :is(hr, br):first-child, html body .content-wrapper .box-body > :is(pre.shiny-text-output:empty, .shiny-html-output:empty):first-child + :is(hr, br) { display: none !important; }
/* Mũi tên sắp xếp của DT: chừa chỗ bên phải chữ tiêu đề cột, không đè lên chữ */
html body .content-wrapper table.dataTable:not(#ds-x):not(#ds-y) thead :is(th.sorting, th.sorting_asc, th.sorting_desc) { padding-right: 24px !important; }

/* Khung xếp dọc thẳng hàng, bằng nhau: khung chiếm hết chiều ngang (box width = 12) luôn sát hai mép
   vùng chứa, dù nằm trực tiếp trong hàng hay qua lớp bọc (conditionalPanel, uiOutput). Trước đây khung
   có lớp bọc giữ lề 15px của cột nên hẹp hơn khung phía trên. Khung đặt cạnh nhau (width 6, 4...) giữ
   khoảng cách giữa hai khung như cũ, mép ngoài vẫn thẳng với khung chiếm hết chiều ngang. */
html body .content-wrapper .col-sm-12:has(> .box) { padding-left: 0 !important; padding-right: 0 !important; }
html body .content-wrapper .row:is(:has(> .col-sm-12 > .box), :has(> :not([class*="col-"]) > .col-sm-12 > .box)):not(:has(> [class*="col-"]:not(.col-sm-12))) { margin-left: 0 !important; margin-right: 0 !important; }

/* Nút chọn (radio) và ô đánh dấu (checkbox) vẽ lại kiểu Apple, giống nhau ở chế độ sáng và tối
   (nút mặc định của trình duyệt ở chế độ tối là vòng tối viền màu, trông thô):
   radio chọn = vòng màu nhấn có chấm trắng giữa; checkbox chọn = ô màu nhấn có dấu tích trắng */
html body .content-wrapper input[type="radio"]:not(#ds-x), html body .content-wrapper input[type="checkbox"]:not(#ds-x),
html body .modal input[type="radio"]:not(#ds-x), html body .modal input[type="checkbox"]:not(#ds-x) {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: 2px; padding: 0; flex: none;
  background: var(--ap-surface) !important; border: 1.5px solid var(--ap-line2) !important; box-shadow: none !important; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, border-width .15s ease; vertical-align: -3px;
}
html body .content-wrapper input[type="radio"]:not(#ds-x), html body .modal input[type="radio"]:not(#ds-x) { border-radius: 50%; }
html body .content-wrapper input[type="checkbox"]:not(#ds-x), html body .modal input[type="checkbox"]:not(#ds-x) { border-radius: 4.5px; }
html body .content-wrapper input[type="radio"]:not(#ds-x):checked, html body .modal input[type="radio"]:not(#ds-x):checked {
  background: #fff !important; border: 5px solid var(--ap-accent) !important;
}
html body .content-wrapper input[type="checkbox"]:not(#ds-x):checked, html body .modal input[type="checkbox"]:not(#ds-x):checked {
  background: var(--ap-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  border-color: var(--ap-accent) !important;
}
html body .content-wrapper :is(input[type="radio"], input[type="checkbox"]):not(#ds-x):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ap-ring) !important; }
html body .content-wrapper :is(input[type="radio"], input[type="checkbox"]):not(#ds-x):disabled { opacity: .45; cursor: default; }
body.dark-mode .content-wrapper :is(input[type="radio"], input[type="checkbox"]):not(#ds-x):not(:checked),
body.dark-mode .modal :is(input[type="radio"], input[type="checkbox"]):not(#ds-x):not(:checked) { border-color: rgba(255, 255, 255, .38) !important; background: rgba(255, 255, 255, .06) !important; }