@charset "UTF-8";
/*================================================================================
    Lớp override của dự án cho bộ giao diện v2 — sinh ra public/css/style-v2.css

    Vì sao cần file này: style.css chứa các token --tm-* và được nạp KHÔNG ĐIỀU
    KIỆN ở cả tầng Blade lẫn tầng CRM-2. Nếu đổi giá trị token thẳng trong
    _design-tokens.scss thì người CHƯA bật giao diện mới cũng bị đổi theo, phá
    vỡ cam kết "không bật thì y hệt hiện tại".

    Cách hoạt động giống core-v2.scss: các biến $tm-* trong _design-tokens.scss
    đều mang !default, nên giá trị đặt Ở ĐÂY (trước @import) sẽ thắng.

================================================================================*/
/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
/*================================================================================
    Design token dùng chung cho CRM (Blade + crm-2 SPA)

    Toàn bộ giá trị dưới đây PHẢN CHIẾU đúng những gì đang chạy, lấy từ
    resources/scss/base/bootstrap-extended/_variables.scss. Thêm file này
    KHÔNG làm đổi giao diện: nó chỉ khai báo biến, không sinh ra quy tắc vẽ nào.

    ⚠ ĐÂY LÀ BẢN SAO, KHÔNG PHẢI NGUỒN GỐC
    Bootstrap/Vuexy biên dịch sẵn màu vào CSS từ biến SCSS. Sửa giá trị ở file
    này CHỈ ảnh hưởng phần code trực tiếp dùng var(--tm-*); nút, badge, bảng…
    của Vuexy vẫn giữ nguyên. Muốn đổi theme thật thì sửa _variables.scss rồi
    build lại, và phải cập nhật file này cho khớp.

    Quy ước: code mới dùng var(--tm-*) thay vì gõ mã hex. Nhờ vậy code mới sẽ
    TỰ ĐI THEO khi hệ thống đổi màu, không thành đảo màu lạc lõng.

    Hướng đã chốt 25/07/2026 nhưng CHƯA triển khai: tông chủ đạo xanh logo
    #084890 (nền menu dọc), nhấn cam #f8a018, primary hành động #2873b8,
    họ chữ Manrope, độ đậm thân 500 / tiêu đề 700. Khi triển khai thì sửa
    _variables.scss rồi cập nhật file này cho khớp.

    Tài liệu đầy đủ: docs/design-guidelines.md
================================================================================*/
:root {
  /* ── Màu ngữ nghĩa (Vuexy) ───────────────────────────────────────────── */
  --tm-primary: #2873b8;
  --tm-secondary: #3c6fbb;
  --tm-success: #208548;
  --tm-info: #017aa5;
  --tm-warning: #d8bd51;
  --tm-danger: #af4d45;
  --tm-light: #f6f6f6;
  --tm-dark: #4b4b4b;
  /* ── Chữ ─────────────────────────────────────────────────────────────── */
  --tm-text: #373f48;
  /* $body-color   — chữ thường */
  --tm-heading: #262f39;
  /* $headings-color */
  --tm-muted: #5d646c;
  /* $text-muted */
  --tm-disabled: #94999e;
  /* chữ trên thành phần vô hiệu — miễn trừ WCAG 1.4.3 */
  /* ── Nền & đường kẻ ──────────────────────────────────────────────────── */
  --tm-body-bg: #edf0f4;
  /* nền trang */
  --tm-surface: #f8fafd;
  /* nền card, modal */
  --tm-input-bg: #fdfeff;
  /* nền ô nhập */
  --tm-border: #d7dce2;
  /* $border-color */
  --tm-border-strong: #d7dce2;
  /* viền ô nhập, viền cần nổi hơn --tm-border */
  /* ── Bảng ────────────────────────────────────────────────────────────── */
  --tm-table-head-bg: #e1e7ed;
  --tm-table-stripe: #f4f6f9;
  --tm-table-hover: #e9edf2;
  /* ── Bo góc ──────────────────────────────────────────────────────────── */
  --tm-radius-sm: 0.25rem;
  --tm-radius: 0.357rem;
  --tm-radius-lg: 0.6rem;
  /* Bo tròn hết hai đầu — nút phân trang, chip. Không phải một bậc của thang
     bo góc: giá trị chỉ cần lớn hơn nửa chiều cao là ra hình viên thuốc, nên
     phần tử cao bao nhiêu cũng đúng. Khác 50%, vốn cho ra hình bầu dục méo
     khi phần tử không vuông. */
  --tm-radius-pill: 999px;
  /* ── Đổ bóng ─────────────────────────────────────────────────────────── */
  --tm-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
  /* ── Chữ: họ, cỡ, độ đậm ─────────────────────────────────────────────── */
  --tm-font-sans: Manrope, Helvetica, Arial, sans-serif;
  --tm-font-size: 1rem;
  /* $font-size-base */
  --tm-font-size-sm: 0.857rem;
  /* $small-font-size */
  /* Bậc lớn cho vài trường dữ liệu đọc-đối-chiếu nhiều (SĐT ở header khách
     hàng). Thang trước đây chỉ có sm và base, nên muốn nhấn là phải viết px
     cứng — đúng thứ vừa dọn đi. 1.143rem = 16px ở gốc rem 14px. */
  --tm-font-size-lg: 1.143rem;
  --tm-line-height: 1.45;
  /* $line-height-base */
  --tm-fw-normal: 600;
  --tm-fw-bold: 700;
  /* Vuexy đặt "bold" = 500, không phải 700 */
  --tm-fw-bolder: 800;
  /* Thang tiêu đề, quy từ $font-size-base = 1rem */
  --tm-h1: 2rem;
  --tm-h2: 1.714rem;
  --tm-h3: 1.5rem;
  --tm-h4: 1.286rem;
  --tm-h5: 1.07rem;
  /* ── Nhận diện thương hiệu Thái Minh ─────────────────────────────────── */
  /* Trích từ resources/images/logo/logo-2023.png — logo đang hiển thị thật.
     CHỈ dùng cho bề mặt nhận diện (biểu đồ thương hiệu, bản in, email).
     KHÔNG dùng thay --tm-primary: giao diện CRM hiện chạy màu tím Vuexy. */
  --tm-brand-blue: #084890;
  /* 61,8% pixel của logo */
  --tm-brand-amber: #f8a018;
  /* vòng tròn biểu tượng */
  /* ── Bề mặt trạng thái: cặp nền nhạt + chữ đậm ───────────────────────── */
  /* Dùng cho nhãn, thẻ, dòng bảng, ô thông báo mang nghĩa trạng thái — tức
     mọi chỗ KHÔNG phải .badge. Với .badge thì dùng class .badge-light-* sẵn có.
     Hai cơ chế cùng công thức nên ra cùng màu.

     KHÔNG viết `color: var(--tm-success)` cho chữ trạng thái: màu ngữ nghĩa gốc
     của Vuexy quá nhạt (chữ #28c76f trên nền nhạt của nó chỉ đạt 2,00). Cặp
     dưới đây đạt 4,90–8,17.

     Sinh từ biến nên tự đi theo khi đổi màu thương hiệu, không đứng lại một chỗ. */
  --tm-success-bg: rgba(32, 133, 72, 0.12);
  --tm-success-fg: #0c331b;
  --tm-warning-bg: rgba(216, 189, 81, 0.12);
  --tm-warning-fg: #76631a;
  --tm-danger-bg: rgba(175, 77, 69, 0.12);
  --tm-danger-fg: #662d28;
  --tm-primary-bg: rgba(40, 115, 184, 0.12);
  --tm-primary-fg: #163f64;
  --tm-secondary-bg: rgba(60, 111, 187, 0.12);
  --tm-secondary-fg: #23416e;
}

.badge.badge-light-primary {
  color: #163f64 !important;
}
.badge.badge-light-secondary {
  color: #23416e !important;
}
.badge.badge-light-success {
  color: #0c331b !important;
}
.badge.badge-light-info {
  color: #002f40 !important;
}
.badge.badge-light-danger {
  color: #662d28 !important;
}
.badge.badge-light-warning {
  color: #76631a !important;
}

:root {
  --menu-width: 290px;
}

body {
  --bs-body-color: #000;
}

.table {
  --bs-table-striped-color: var(--bs-body-color);
}

.form-select,
.form-control,
.form-control:focus,
.form-label,
.table,
.main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a,
.main-menu.menu-light .navigation > li ul .open > a,
.main-menu.menu-light .navigation li a,
.nav-tabs .nav-link,
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--bs-body-color);
}

.printBox {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.printBox_btn:not(:first-child) {
  margin-left: 1.5rem;
}

.setNumberPageWhenWrint {
  display: table;
  counter-increment: page;
  width: 100%;
}
.setNumberPageWhenWrint_main {
  display: table-footer-group;
  counter-increment: page;
}
.setNumberPageWhenWrint_main::after {
  counter-increment: page;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -moz-box-shadow: 0 0 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}

.bg-logo {
  background-image: url(/images/logo-2023.png?1b02eaa189c5a8f0d41c64d9b7dbee2f);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 155px;
}

.main-menu .navbar-header {
  height: 75px;
  margin-top: 0.25rem !important;
  display: flex;
  width: var(--menu-width);
}
.main-menu .navbar-header .navbar-brand {
  margin-top: 0 !important;
}
.main-menu .navbar-header .navbar-brand .brand-text {
  color: #009444;
}
.main-menu .navbar-header .navbar-brand .brand-logo img {
  max-width: none;
}
.main-menu .navbar-header .navbar-brand .brand-logo .logo-full {
  padding-left: 10px;
}
.main-menu ul {
  align-items: center;
  width: 100%;
}
.main-menu .menu-content {
  padding-left: 10px !important;
}
.main-menu.menu-light .navigation > li ul li ul > li.has-sub {
  margin-right: 0;
}
.main-menu.menu-light .navigation > li ul li ul li.nav-item a {
  padding-left: 20px;
  margin-left: 0;
}
.main-menu .menu-light .navigation .navigation-header {
  margin: calc(1rem + 0.286rem) 0 0.8rem 2.2rem !important;
}
.main-menu .navigation form .btn {
  font-size: 1.1rem;
  margin: 0 15px;
  color: #625f6e;
  padding: 10px 15px 10px 15px;
  line-height: 1.45;
  font-weight: normal;
}
.main-menu .navigation form .btn .feather {
  height: 20px;
  width: 20px;
  font-size: 1.45rem;
  margin-right: 1.1rem;
  flex-shrink: 0;
}

.menu-collapsed .main-menu:not(.expanded) .item-switch-user {
  display: none;
}
.menu-collapsed .main-menu:not(.expanded) .brand-logo .logo-full {
  display: none;
}
.menu-collapsed .main-menu:not(.expanded) .navigation > li > a svg {
  margin-left: 0px;
}
.menu-collapsed .main-menu.expanded {
  width: var(--menu-width) !important;
}
.menu-collapsed .main-menu.expanded .brand-logo .logo-icon {
  display: none;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu {
  width: 60px;
}
.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
.vertical-layout.vertical-menu-modern.menu-collapsed .footer {
  margin-left: 60px;
}
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header {
  width: 60px;
  justify-content: center;
}
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .navbar-nav {
  width: auto;
}
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navbar-header .nav-item.me-auto {
  margin-right: 0 !important;
}

.menu-expanded .navbar-header .navbar-brand .brand-logo .logo-icon {
  display: none;
}
.menu-expanded.vertical-layout.vertical-menu-modern .main-menu {
  width: var(--menu-width);
}

.user-nav-wrapper {
  padding: 0.35rem 1rem 0.3rem 1.64rem;
}
.user-nav-wrapper .user-name {
  font-weight: bold;
}
.user-nav-wrapper form {
  margin-left: auto;
}
.user-nav-wrapper form button {
  padding-left: 10px;
  padding-right: 10px;
}

#tableProducts {
  min-width: 800px;
  overflow: hidden;
}

#tableCustomers, #tableHistory, .tableLogs, #tableCPN {
  min-width: 945px;
}

#tableReport {
  padding-bottom: 10px;
}
#tableReport::-webkit-scrollbar {
  background-color: #fff;
  height: 7px;
}
#tableReport::-webkit-scrollbar-thumb {
  background-color: #adb5bd;
  border-radius: 1000px;
  -webkit-box-shadow: inset 0 0 6px #fff;
}
#tableReport::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #fff;
  border-radius: 10px;
  background: transparent;
}

.form-reward [data-repeater-list] {
  flex: 1;
}
.form-reward [data-repeater-list] [data-repeater-item]:first-child [data-repeater-delete] {
  display: none;
}
.form-reward [data-repeater-list] .ri-del {
  min-width: 44px;
}
.form-reward .ele-qty {
  min-width: 100px;
  width: 100px;
}
.form-reward .ele-product {
  flex: 1;
}
.form-reward .rl-add {
  min-width: 65px;
  width: 65px;
}

table tr td, table tr th {
  padding: 0.5rem !important;
}

.infoCustomers {
  line-height: 1.58;
}
.infoCustomers_item {
  display: flex;
  justify-content: space-between;
  line-height: 1.8em;
}
.infoCustomers_item_label {
  width: 90px;
  font-size: 13px;
  font-weight: bold;
}
.infoCustomers_item_info {
  width: calc(100% - 100px);
}

a.disabled {
  opacity: 0.4;
  cursor: default;
}

.highlightClass {
  font-size: 1rem;
  color: var(--tm-primary);
  font-weight: bold;
}

.requiredClass {
  color: red;
  font-weight: bold;
  font-size: 1rem;
}

.customCSS .dropzone {
  min-height: 50px;
}
.customCSS .dropzone .dz-message {
  font-size: 1rem;
}
.customCSS .dropzone .dz-message:before {
  background-repeat: no-repeat;
  top: calc(50% - 15px);
  left: 15px;
  width: 30px;
  height: 30px;
}

.linkHighlight {
  font-weight: bold !important;
}
.linkHighlight svg {
  margin-right: 5px;
}
.linkHighlight.btn {
  padding: 8px 10px;
}

.actionBoxCustomer {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.actionBoxCustomer > * {
  margin-top: 10px;
}
.actionBoxCustomer > *.width100 {
  width: 100%;
  margin-left: 0 !important;
}
.actionBoxCustomer > *:not(:first-child) {
  margin-left: 10px;
}

.notesBox {
  font-size: 0.95rem;
}
.notesBox_title {
  font-style: italic;
  font-weight: bold;
}
.notesBox_notes {
  margin-left: 15px;
}
.notesBox_notes__item:not(:first-child) {
  margin-top: 5px;
}
.notesBox_notes__item:before {
  content: "+";
}

.col-form-label, .col-form-label-lg, .col-form-label-sm {
  font-size: 0.92rem !important;
}

.columnCustom {
  display: flex;
}
.columnCustom_item:not(:first-child) {
  margin-left: 1rem;
}

.dropzone {
  border: 1px dashed #ced4da !important;
  border-radius: 3px;
}
.dropzone .dz-message {
  margin: 0 !important;
}

.spaceChild {
  display: flex;
  flex-wrap: wrap;
}
.spaceChild > * {
  margin: 0.25rem 0;
}
.spaceChild > *:not(:first-child) {
  margin-left: 0.5rem;
}

.searchCPN {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.searchCPN_left {
  width: calc(100% - 166px);
}
.searchCPN_left_row {
  display: flex;
  justify-content: space-between;
}
.searchCPN_left_row_item {
  width: 100%;
}
.searchCPN_left_row_item:not(:first-child) {
  margin-left: 15px;
}
.searchCPN_right {
  width: 151px;
  text-align: right;
}
.searchCPN_right.margin-top-custom {
  margin-top: 23px;
}

.searchWecan {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}
.searchWecan_left {
  width: 100%;
}
.searchWecan_left_row {
  display: flex;
  justify-content: space-between;
}
.searchWecan_left_row_item {
  width: 100%;
}
.searchWecan_left_row_item:not(:first-child) {
  margin-left: 15px;
}
.searchWecan_right {
  flex: 0 0 140px;
  margin-left: 20px;
  text-align: right;
}
.searchWecan_right.margin-top-custom {
  margin-top: 23px;
}

.selectShowSetting {
  display: flex;
  align-items: center;
}
.selectShowSetting_text {
  font-size: 0.9rem;
  width: calc(100% - 60px);
}
.selectShowSetting_select {
  margin-left: 1rem;
  width: 60px;
  position: relative;
}
.selectShowSetting_select select {
  padding: 5px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  color: var(--bs-body-color);
}
.selectShowSetting_select select:focus {
  outline: none;
  border: 1px solid #e9ecef;
}

.dropdown-menu .dropdown-item {
  padding: 0.7rem 1.1rem !important;
}

.customer-more .dropdown-menu,
.task-more .dropdown-menu,
.cws-point-actions .dropdown-menu {
  z-index: 1056;
  background-color: var(--tm-surface);
}

.loading-full {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
}
.loading-full_icon {
  margin: 0 auto;
  text-align: center;
}
.loading-full_progress {
  width: 80%;
  background: #fff;
  padding: 15px 20px 20px;
  margin: 0 auto;
  text-align: center;
}

html body .app-content-custom {
  padding-top: 2rem !important;
}
html .content {
  margin-left: var(--menu-width);
}

@media (min-width: 1400px) {
  html .content.app-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  footer.footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
footer.footer.footer-static {
  min-height: 0;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--tm-muted);
}

.non-padding-right-desktop {
  padding-right: 0 !important;
}

.margin-top-desktop-05 {
  margin-top: 0.5rem;
}

.enable-max-width-768 {
  display: none;
}

.disable-max-width-768 {
  display: block;
}

@media (max-width: 768px) {
  .main-menu .navbar-header .navbar-brand .brand-logo .logo-icon {
    display: none;
  }

  .main-menu.menu-light .navigation-main > .navigation-header:first-child {
    margin-top: 0 !important;
  }

  .enable-max-width-768 {
    display: block !important;
  }

  .disable-max-width-768 {
    display: none !important;
  }

  .margin-top-mobile {
    margin-top: 0.5rem;
  }

  .margin-top-mobile-075 {
    margin-top: 0.75rem;
  }

  .margin-top-desktop-05 {
    margin-top: 0 !important;
  }

  .mb-1 {
    margin-bottom: 0.5rem !important;
  }

  .non-padding-right-desktop {
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
  }

  .btnAddMobile {
    width: 45px;
    height: 45px;
    background: #28c76f !important;
    border-radius: 50%;
    position: fixed;
    top: 65px;
    text-align: center;
    right: 0.75rem;
    line-height: 40px;
    color: #fff;
    font-size: 2rem;
    z-index: 2;
    font-weight: bold;
  }

  .columnCustom {
    flex-wrap: wrap;
  }
  .columnCustom_item {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .columnCustom_item:not(:first-child) {
    margin-top: 1rem;
  }

  .searchCPN {
    flex-direction: column;
    margin-bottom: 1rem;
  }
  .searchCPN_left {
    width: 100% !important;
  }
  .searchCPN_left_row {
    flex-direction: column;
  }
  .searchCPN_left_row_item {
    margin-left: 0 !important;
  }
  .searchCPN_right {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .searchCPN_right.margin-top-custom {
    margin-top: 1rem !important;
  }

  .searchWecan {
    flex-wrap: wrap;
  }
  .searchWecan_left {
    width: 100%;
  }
  .searchWecan_left_row {
    flex-wrap: wrap;
  }
  .searchWecan_left_row_item {
    width: 100%;
    margin-left: 0 !important;
  }
  .searchWecan_left_row_item:not(:first-child) {
    margin-top: 1rem;
  }
  .searchWecan_right {
    width: 100%;
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: 1.2rem;
    text-align: right;
    align-items: flex-end;
  }

  .header-navbar {
    display: block !important;
    min-height: unset !important;
  }

  .navbar-floating .navbar-container:not(.main-menu-content) {
    padding: 1rem !important;
  }

  .vertical-overlay-menu.menu-open .main-menu {
    top: 0;
  }

  .navbar-floating .navbar-container:not(.main-menu-content) {
    padding: 0.8rem 1rem !important;
  }

  html .content.app-content {
    padding: 4rem 0 0 0 !important;
  }

  .card-header, .card-body {
    padding: 1rem !important;
  }
}
@media (max-width: 1199px) {
  .header-navbar {
    min-height: 40px !important;
  }
  .header-navbar.floating-nav {
    width: 100% !important;
    margin: 0 !important;
  }
}
.disable-action {
  opacity: 0.5;
  pointer-events: none;
}

a {
  color: var(--tm-primary);
}

.swal2-styled.swal2-deny {
  background-color: #82868b !important;
}

.swal2-styled.swal2-confirm {
  background-color: #28c76f !important;
}

.wrong-table {
  grid-template-columns: 1fr auto auto;
}
.wrong-table span {
  border-bottom: 1px solid #c9c9c9;
  padding: 0 10px;
}
.wrong-table span.s {
  text-align: right;
}
.wrong-table span.r {
  color: red;
}

.drop-down-custom {
  position: absolute;
  background-image: url("/images/icons/dropdown.svg");
  background-size: 18px 14px, 18px 14px;
  background-repeat: no-repeat;
  height: 1rem;
  padding-right: 1.5rem;
  margin-left: 0;
  margin-top: 0;
  border-style: none;
  right: 23px;
  top: 13px;
}

.position-relative {
  position: relative;
}

.call-config {
  position: fixed;
  right: 8px;
  top: 100px;
  z-index: 10;
  display: flex;
  align-items: flex-start;
}
.call-config .call-config__body {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: 1.25rem;
  box-shadow: var(--tm-shadow);
  padding: 0.5rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.call-config .call-config__peek {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--tm-border);
  border-right: 0;
  border-radius: 0.75rem 0 0 0.75rem;
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow);
  color: var(--tm-text);
  cursor: pointer;
}
.call-config .call-config__peek:hover, .call-config .call-config__peek:focus-visible {
  background: var(--tm-body-bg);
  color: var(--tm-primary);
}
.call-config.is-collapsed {
  right: 0;
}
.call-config.is-collapsed .call-config__body {
  display: none;
}
.call-config.is-collapsed .call-config__peek {
  display: flex;
}
.call-config .call-config__actions {
  display: flex;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  padding-top: 0.15rem;
  border-top: 1px solid var(--tm-border);
}
.call-config .call-config__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--tm-radius);
  background: transparent;
  color: var(--tm-muted);
  cursor: pointer;
}
.call-config .call-config__opt:hover, .call-config .call-config__opt:focus-visible {
  color: var(--tm-text);
  background: var(--tm-body-bg);
}
.call-config.is-autohide .js-call-config-autohide {
  color: var(--tm-primary);
  background: rgba(40, 115, 184, 0.12);
}
.call-config .call-config__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.25rem 0;
  border: 0;
  border-radius: var(--tm-radius);
  background: transparent;
  color: var(--tm-muted);
  cursor: grab;
  touch-action: none;
}
.call-config .call-config__handle:hover, .call-config .call-config__handle:focus-visible {
  color: var(--tm-text);
  background: var(--tm-body-bg);
}
.call-config.is-dragging {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.call-config.is-dragging .call-config__handle {
  cursor: grabbing;
}
.call-config .navbar-nav {
  gap: 8px;
  align-items: center;
}
.call-config .nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.call-config .call-config__live {
  display: contents;
}
.call-config .avatar {
  color: var(--tm-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.call-config .avatar .avatar-content {
  position: relative;
  width: 38px;
  height: 38px;
}
.call-config .avatar .avatar-content::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border-radius: 50%;
}
.call-config .avatar:hover {
  transform: translateY(-1px);
  box-shadow: var(--tm-shadow);
}
.call-config .call-config__chat {
  padding-top: 0.15rem;
  border-top: 1px solid var(--tm-border);
  width: 100%;
  display: flex;
  justify-content: center;
}
.call-config .form-switch {
  position: relative;
  padding-left: 0;
  width: auto;
  margin-bottom: 0;
}
.call-config .form-switch .form-check-input {
  margin-left: 0;
}
.call-config .form-switch .form-check-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.call-config .form-switch .badge-up {
  top: -12px;
  right: -12px;
}
@media (prefers-reduced-motion: reduce) {
  .call-config .avatar,
.call-config .avatar:hover {
    transition: none;
    transform: none;
  }
}

.call-config__status-item {
  position: relative;
}

.chat-config {
  top: 160px;
}

.call-item .btn {
  font-size: 18px;
}
.call-item .btn__name {
  border: 0 !important;
  padding-left: 10px;
  padding-right: 5px;
  border-radius: 0.358rem;
}
.call-item .dropdown-toggle.dropdown-toggle-split:focus {
  box-shadow: none;
  background-color: transparent;
}
.call-item .dropdown-toggle.dropdown-toggle-split:after {
  filter: brightness(0.4);
  background-size: 20px;
}
.call-item .dropdown-menu {
  padding: 0;
}
.call-item svg {
  transform: translateY(-2px);
  margin-left: 3px;
  width: 16px;
  height: 16px;
}
.call-item:hover {
  color: var(--bs-primary);
}

#wrap-status-time {
  width: 52px;
  height: 28px;
  background: linear-gradient(254.56deg, #66D54B 6.49%, #17C653 108.73%);
  box-shadow: var(--tm-shadow);
  border-radius: 999px;
  line-height: 28px;
  text-align: center;
  display: none;
}

#_wrap-customer {
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 50%;
  text-align: center;
  display: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#_wrap-customer svg {
  vertical-align: middle;
}
#_wrap-customer:hover {
  background-color: var(--tm-border);
}
@media (prefers-reduced-motion: reduce) {
  #_wrap-customer {
    transition: none;
  }
}

#status-time {
  color: var(--tm-surface);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-fw-bolder);
}

.view-in-iframe .app-content.app-content-custom {
  padding-top: 0 !important;
  padding-right: 0;
  padding-left: 0;
  overflow-x: hidden;
  border-radius: 0;
  box-shadow: none;
  margin-left: 0 !important;
}
.view-in-iframe .drag-target {
  display: none !important;
}
.view-in-iframe .modal-lg, .view-in-iframe .modal-xl {
  max-width: 95% !important;
}

.textarea-auto {
  overflow: hidden;
  resize: none;
  width: 100%;
}

.popover2 {
  position: absolute;
  top: 50%;
  right: calc(100% + 14px);
  left: auto;
  transform: translateY(-50%);
  z-index: 1010;
  display: none;
}
.popover2.active {
  display: block;
}

.dialer2 {
  width: 268px;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow);
}
.dialer2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--tm-surface);
  border-top: 1px solid var(--tm-border);
  border-right: 1px solid var(--tm-border);
}
.dialer2 .popover2-inner {
  padding: 0;
}
.dialer2 .voice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--tm-border);
}
.dialer2 .dialer2-title {
  font-size: var(--tm-font-size);
  font-weight: var(--tm-fw-bolder);
  color: var(--tm-heading);
  white-space: nowrap;
}
.dialer2 .split {
  display: flex;
}
.dialer2 .availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  background: var(--tm-surface);
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-fw-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .dialer2 .availability {
    transition: none;
  }
}
.dialer2 .availability.hidden {
  display: none;
}
.dialer2 .availability:hover {
  border-color: var(--tm-secondary);
}
.dialer2 .availability.available {
  color: var(--tm-success);
}
.dialer2 #status_call {
  margin-top: 0.625rem;
}
.dialer2 #status_call.hidden {
  display: none;
}
.dialer2 .blip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tm-muted);
  transition: background 0.15s ease;
}
.dialer2 .blip.available {
  background: var(--tm-success);
}
@media (prefers-reduced-motion: reduce) {
  .dialer2 .blip {
    transition: none;
  }
}
.dialer2 #no-calls {
  padding: 0.75rem;
  background: transparent;
}
.dialer2 .message {
  margin: 0;
  color: var(--tm-heading);
  font-size: var(--tm-font-size);
  font-weight: var(--tm-fw-bold);
}
.dialer2 .dialer2-hint {
  margin: 0.25rem 0 0;
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
  line-height: 1.4;
}

._custom-success {
  background: #28c76f !important;
}
._custom-success svg {
  stroke: white;
  stroke-width: 4;
}

.cws-task-status {
  color: var(--tm-heading);
}

.cws-task-workflow {
  color: var(--tm-text);
  font-weight: var(--tm-fw-normal);
}

.cws-point-total {
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
}

.cws-point-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  white-space: nowrap;
}

.cws-more-toggle {
  position: relative;
  letter-spacing: 1px;
}

.cws-more-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

body {
  --bs-body-color: #373f48;
}

.card,
.modal-content,
.dropdown-menu {
  background-color: #f8fafd;
}

.dark-layout .call-config {
  background: var(--tm-dark-surface);
  border-color: var(--tm-dark-border);
  color: var(--tm-dark-text);
}

/*================================================================================
    Màn chi tiết khách hàng (CRM-2 SPA) — luật trình bày cho HTML do PHP sinh

    ĐỌC TRƯỚC KHI SỬA. Hai lý do file này tồn tại, cả hai đều dễ "dọn" sai:

    1. Vì sao KHÔNG đặt trong \3c style scoped> của file Vue
       Phần lớn nội dung màn này không do Vue dựng: các service PHP nối chuỗi HTML
       rồi trả trong JSON, Vue đổ ra bằng v-html. Vue gắn thuộc tính data-v-* lúc
       BIÊN DỊCH template, còn HTML chèn lúc CHẠY không có thuộc tính đó — nên luật
       trong \3c style scoped> KHÔNG với tới được nội dung v-html.
       Đây chính là lý do lập trình viên trước phải gõ style= inline trong PHP.
       Chuyển các luật dưới đây vào \3c style scoped> sẽ làm chúng mất tác dụng âm thầm.

    2. Vì sao MỌI selector phải bọc trong .cust-detail-v2
       File này biên dịch vào public/css/style-v2.css, mà file đó được nạp ở CẢ HAI
       tầng CSS — vùng Blade admin (panels/styles.blade.php) và CRM-2 SPA
       (snippets/head.blade.php) — và nạp SAU CÙNG nên thắng về thứ tự.
       Bỏ class bọc ngoài thì luật rò ra toàn bộ vùng admin, không chỉ màn này.

    Class gốc .cust-detail-v2 đặt trên phần tử ngoài cùng của
    resources/crm-2/js/pages/customer/index.vue

    Màu và cỡ chữ CHỈ gọi var(--tm-*), không gõ mã màu. Ba bậc thị giác:
      · bậc 1 danh tính, tiêu đề   → var(--bs-body-color) #000, --tm-h4 / --tm-h5
      · bậc 2 nội dung đọc chính   → var(--bs-body-color) #000, --tm-font-size
      · bậc 3 siêu dữ liệu         → var(--tm-text) #6e6b7b 5,18:1, --tm-font-size-sm
    var(--tm-muted) #b9b9c3 chỉ 1,95:1 nên KHÔNG dùng cho chữ mang thông tin.
================================================================================*/
.cust-detail-v2 {
  --cust-divider: #e3e7eb;
}
.cust-detail-v2 .badge.badge-light-primary {
  background-color: rgba(40, 115, 184, 0.22);
}
.cust-detail-v2 .badge.badge-light-secondary {
  background-color: rgba(60, 111, 187, 0.22);
}
.cust-detail-v2 .badge.badge-light-success {
  background-color: rgba(32, 133, 72, 0.22);
}
.cust-detail-v2 .badge.badge-light-info {
  background-color: rgba(1, 122, 165, 0.22);
}
.cust-detail-v2 .badge.badge-light-danger {
  background-color: rgba(175, 77, 69, 0.22);
}
.cust-detail-v2 .badge.badge-light-warning {
  background-color: rgba(216, 189, 81, 0.22);
}
.cust-detail-v2 .cust-empty {
  background: var(--tm-table-stripe);
  border: 1px dashed var(--tm-border);
  border-radius: var(--tm-radius);
  color: var(--tm-text);
  padding: 2rem 1rem;
  text-align: center;
}
.cust-detail-v2 .cust-empty__title {
  color: var(--bs-body-color);
  font-weight: var(--tm-fw-bold);
  margin-bottom: 0.25rem;
}
.cust-detail-v2 .cust-meta,
.cust-detail-v2 .cust-meta-date,
.cust-detail-v2 .cust-meta-note {
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-fw-normal);
}
.cust-detail-v2 .cust-txn-kind,
.cust-detail-v2 .cust-txn-id,
.cust-detail-v2 .cust-phone-link {
  color: var(--tm-primary);
}
.cust-detail-v2 a.cust-txn-kind:hover,
.cust-detail-v2 a.cust-phone-link:hover {
  color: var(--tm-primary);
  text-decoration: underline;
}
.cust-detail-v2 .cust-product-name,
.cust-detail-v2 .cust-point,
.cust-detail-v2 .cust-staff-name,
.cust-detail-v2 .cust-wf-transition {
  color: var(--bs-body-color);
}
.cust-detail-v2 .cust-image-note {
  gap: 0.35rem;
}
.cust-detail-v2 .qty-x {
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-fw-normal);
}
.cust-detail-v2 .cust-dup {
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
  font-style: italic;
}
.cust-detail-v2 .cust-note-body {
  background: var(--tm-table-stripe);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: 0.6rem 0.85rem;
  color: var(--tm-heading);
  font-size: var(--tm-font-size);
  font-weight: 500;
  line-height: 1.6;
}
.cust-detail-v2 .cust-note-body table tbody tr td {
  background-color: var(--tm-surface) !important;
}
.cust-detail-v2 .cust-note-body hr {
  border-top-color: var(--cust-divider);
  margin: 0.4rem 0;
  opacity: 1;
}
.cust-detail-v2 .cust-note-body > *:last-child {
  margin-bottom: 0;
}
.cust-detail-v2 .cust-note-call {
  color: #656b73;
  font-size: var(--tm-font-size-sm);
  font-weight: 400;
  line-height: 1.45;
  margin-top: 0.35rem;
}
.cust-detail-v2 .cust-note-tags {
  align-items: center;
}
.cust-detail-v2 .cust-note-tag-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.cust-detail-v2 .cust-note-tag {
  align-items: center;
  background: var(--tm-primary-bg);
  border-radius: var(--tm-radius-pill);
  color: var(--tm-primary-fg);
  display: inline-flex;
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-fw-normal);
  line-height: 1.2;
  padding: 0.15rem 0.55rem;
}
.cust-detail-v2 .timeline .timeline-item .cust-note-body {
  min-height: 0;
}
.cust-detail-v2 .cust-product-block {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.cust-detail-v2 .cust-product-block__head {
  background: var(--tm-table-head-bg);
  border-bottom: 1px solid var(--tm-border);
  padding: 0.5rem 0.75rem;
}
.cust-detail-v2 .cust-product-block__name {
  color: var(--bs-body-color);
  font-size: var(--tm-h5);
  font-weight: var(--tm-fw-bold);
  margin: 0;
}
.cust-detail-v2 .cust-section-title {
  color: var(--bs-body-color);
  font-size: var(--tm-h5);
  font-weight: var(--tm-fw-bold);
  margin-bottom: 0.5rem;
}
.cust-detail-v2 .cust-product-block__body {
  padding: 0.5rem 0.75rem;
}
.cust-detail-v2 .cust-product-block__body hr {
  border-top-color: var(--cust-divider);
  margin: 0.4rem 0;
  opacity: 1;
  width: 100% !important;
}
.cust-detail-v2 .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6b7b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
.cust-detail-v2 .select2-selection__arrow b,
.cust-detail-v2 .select2-container--default .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6b7b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.cust-detail-v2 .v-select {
  --vs-controls-color: var(--tm-text);
}
.cust-detail-v2 .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cust-detail-v2 .input-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
.cust-detail-v2 .cust-form-actions {
  position: sticky;
  bottom: 1rem;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.6rem;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
}
.cust-detail-v2 .cust-form-actions .btn {
  border-radius: var(--tm-radius);
  font-size: var(--tm-font-size);
  font-weight: var(--tm-fw-bold);
  min-width: 160px;
  padding: 0.6rem 1.5rem;
}

/*================================================================================
    Modal "Log điểm" — bảng lịch sử điểm của một sản phẩm

    ĐỌC TRƯỚC KHI SỬA. Modal này KHÔNG của riêng màn chi tiết khách hàng: nó được
    mở từ bốn nơi, nên mọi thay đổi ở đây ảnh hưởng cả bốn.

      · app/Http/Controllers/CRM2/CustomerContactController.php   chi tiết KH
      · app/Services/CRM2/CustomerWorkFlowStatusService.php       hộp việc
      · app/Services/CRM2/DataTotalService.php                    Data tổng
      · resources/views/pages/customers/item-product.blade.php    màn KH bản Blade

    Vì vậy phạm vi bọc ngoài là #tableLogs (id của chính bảng) chứ KHÔNG phải
    .cust-detail-v2 như các luật trong _customer-detail.scss: modal được Bootstrap
    chèn vào cuối <body>, nằm ngoài cây DOM của màn.

    View: resources/views/pages/customers/modal-logs-body.blade.php
    Cột do mảng $table_header trong CustomerScoreController::logs quyết định, view
    chỉ lặp qua mảng đó.

    Ở đây CHỈ chỉnh mật độ trình bày — không bỏ, không gộp, không đổi thứ tự cột.
    Đổi cấu trúc cột phải sửa $table_header và sẽ đổi giao diện cả bốn màn cùng
    lúc, là việc riêng cần chốt trước.
================================================================================*/
#tableLogs {
  font-size: var(--tm-font-size-sm);
}
#tableLogs th,
#tableLogs td {
  padding: 0.5rem 0.4rem !important;
  vertical-align: top;
}
#tableLogs thead th {
  background: var(--tm-table-head-bg);
  color: var(--bs-body-color);
  font-weight: var(--tm-fw-bold);
  white-space: nowrap;
}
#tableLogs td.td-point,
#tableLogs td.td-after_point,
#tableLogs td.td-stt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#tableLogs td.td-created_at,
#tableLogs td.td-applied_at {
  white-space: nowrap;
}
#tableLogs td.td-note {
  min-width: 180px;
  max-width: 320px;
  white-space: normal;
  word-break: break-word;
}
#tableLogs td.td-created_by,
#tableLogs td.td-product_name,
#tableLogs td.td-for_customer {
  color: var(--tm-text);
}

/*================================================================================
    Modal "Lịch sử trả thưởng khách hàng"

    ĐỌC TRƯỚC KHI SỬA. Bảng này dùng chung id #tableLogs với modal "Log điểm",
    nhưng là HAI bảng khác nhau:

      · "Log điểm"           14 cột, CustomerScoreController::logs
                             → luật ở _modal-point-logs.scss, cố ý để chữ nhỏ
      · "Lịch sử trả thưởng"  6 cột, CustomerController::rewards
                             → file này

    Vì trùng id nên luật ở đây phải bám thêm class .tableRewardLogs để chỉ áp cho
    bảng trả thưởng. Nhập SAU _modal-point-logs để thắng ở thứ tự nạp.

    Modal được Bootstrap chèn vào cuối <body> nên KHÔNG bọc được bằng
    .cust-detail-v2 như các luật trong _customer-detail.scss.

    View: resources/views/pages/customers/modal-reward-logs-body.blade.php
================================================================================*/
#tableLogs.tableRewardLogs {
  font-size: var(--tm-font-size);
}
#tableLogs.tableRewardLogs th,
#tableLogs.tableRewardLogs td {
  padding: 0.6rem 0.6rem !important;
  vertical-align: top;
}
#tableLogs.tableRewardLogs thead th {
  background: var(--tm-table-head-bg);
  color: var(--bs-body-color);
  font-weight: var(--tm-fw-bold);
  white-space: nowrap;
}
#tableLogs.tableRewardLogs .reward-log__sub {
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-fw-normal);
  line-height: 1.4;
  margin-top: 0.15rem;
}
#tableLogs.tableRewardLogs .qty-x {
  color: var(--tm-text);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-fw-normal);
}
#tableLogs.tableRewardLogs td.td-stt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#tableLogs.tableRewardLogs td.td-handled {
  white-space: nowrap;
}
#tableLogs.tableRewardLogs td.td-handled .reward-log__sub {
  white-space: normal;
}
#tableLogs.tableRewardLogs td.td-receiver {
  min-width: 220px;
  max-width: 340px;
  white-space: normal;
  word-break: break-word;
}
#tableLogs.tableRewardLogs td.td-note {
  min-width: 160px;
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
}
#tableLogs.tableRewardLogs td.td-product {
  min-width: 180px;
}

.table,
.table th,
.table td {
  font-variant-numeric: tabular-nums;
}

.swal2-styled.swal2-confirm {
  background-color: #2873b8 !important;
}
.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(40, 115, 184, 0.5) !important;
}