/* ============================================================
   AZPOS - Tuy chinh giao dien (nap SAU app.css)
   Muc dich: dep hon, dong bo tone mau, KHONG sua file loi.
   Nang cap UltimatePOS se KHONG ghi de file nay.
   ============================================================ */

/* ---- Tieu de tung khoi (box-header) ---- */
.azpos-product-form .box-header {
    border-bottom: 1px solid #eef0f4;
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.azpos-product-form .box-header .box-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
    letter-spacing: .2px;
}
.azpos-sec-icon {
    color: #0040C1;                 /* dong tone xanh duong cua theme */
    margin-right: 8px;
    font-size: 16px;
}

/* ---- Tieu de phu (vi du: Chi tiet gia ke) ---- */
.azpos-product-form .azpos-subhead {
    font-size: 14px;
    font-weight: 700;
    color: #33475b;
    margin: 4px 0 12px;
    padding-left: 2px;
}

/* ---- Cum lua chon bat/tat: dong khung nhe cho de nhin ---- */
.azpos-product-form .azpos-inline-group {
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
}
.azpos-product-form .azpos-check-group {
    margin-bottom: 0;
}
.azpos-product-form .azpos-check-label {
    font-weight: 500;
    margin-bottom: 0;
}
.azpos-product-form .azpos-help {
    margin-top: 4px;
    margin-bottom: 0;
    color: #8895a7;
    font-size: 12px;
}

/* ---- Khu vuc upload (anh + tai lieu) xep chong gon gang ---- */
.azpos-product-form .azpos-upload-box {
    background: #f8fafc;
    border: 1px dashed #d6dbe3;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

/* ---- BANG GIA: bo mau xanh la choi (#5cb85c) -> dong tone xanh duong ---- */
.azpos-product-form .add-product-price-table th {
    background-color: #f1f5fb !important;   /* nen nhat, khong con choi mat */
    color: #1f2d3d !important;
    font-weight: 700;
    border-bottom: 2px solid #0040C1 !important;
}
.azpos-product-form .add-product-price-table {
    border-radius: 8px;
    overflow: hidden;
}

/* ---- Thanh nut luu: tach khoi noi dung cho de bam ---- */
.azpos-product-form .azpos-actions {
    margin-top: 8px;
    padding: 16px 0 4px;
}

/* ---- Khoang cach form deu hon mot chut ---- */
.azpos-product-form .form-group {
    margin-bottom: 16px;
}

/* ============================================================
   DANH SACH SAN PHAM - cot Hinh anh
   Goc: <th class="tw-w-full"> (Tailwind width:100%) lam cot anh
   chiem ~783px, bop cac cot con lai xuong ~30px.
   Da bo tw-w-full trong Blade; day la rang buoc do rong.
   Dung !important vi DataTables ghi style="width:..." thang vao the.
   ============================================================ */
#product_table th.azpos-col-image,
#product_table td.azpos-col-image,
.dataTables_scrollHead th.azpos-col-image,
.dataTables_scrollBody th.azpos-col-image {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    text-align: center;
}

/* Anh thu nho trong bang: khong cho tran ra */
#product_table img.product-thumbnail-small,
#product_table td.azpos-col-image img {
    max-width: 64px;
    max-height: 64px;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* ---- Bang phai DAY khung, khong de trong ben phai ----
   DataTables dung scrollX nen tu tinh chieu rong tu nhien.
   Ep cac lop boc + bang chinh = 100%. */
#product_table_wrapper .dataTables_scrollHeadInner,
#product_table_wrapper .dataTables_scrollHeadInner > table,
#product_table_wrapper .dataTables_scrollBody > table,
#product_table_wrapper table#product_table {
    width: 100% !important;
    max-width: 100% !important;
}

/* Cot "San pham" hut phan du -> cac cot khac giu nguyen do rong hop ly */
#product_table th.azpos-col-name,
#product_table td.azpos-col-name,
.dataTables_scrollHead th.azpos-col-name {
    min-width: 220px;
    white-space: normal;
}

/* Cac cot con lai: khong bi bop chu xuong dong lung tung */
#product_table th,
#product_table td {
    white-space: nowrap;
    vertical-align: middle;
}
#product_table th.azpos-col-name,
#product_table td.azpos-col-name,
#product_table th.azpos-col-image,
#product_table td.azpos-col-image {
    white-space: normal;
}

/* ============================================================
   QUY TAC CHUNG CHO MOI BANG DANH SACH (DataTables)
   Ap dung cho ca he thong: ban hang, mua hang, lien he, bao cao...
   Van de goc: tieu de cot bi be 3-4 dong -> hang tieu de cao ngoang,
   kho doc, moi bang moi kieu.
   ============================================================ */

/* 1. Tieu de cot KHONG xuong dong -> hang tieu de chi con 1 dong.
      CHU Y: chi ap dung cho tieu de THAT SU HIEN RA.
      Khi bat scrollX, DataTables tao mot ban sao <thead> AN trong
      .dataTables_scrollBody de giu chieu rong cot. Neu ap padding cho
      ban sao do -> sinh ra mot DAI TRANG thua duoi hang tieu de. */
table.dataTable thead th,
table.dataTable thead td,
.dataTables_scrollHead table thead th {
    white-space: nowrap !important;
    vertical-align: middle !important;
    padding: 10px 12px !important;
    font-weight: 600;
    font-size: 13px;
    color: #1f2d3d;
    background-color: #f7f9fc;
    border-bottom: 2px solid #e3e8ef !important;
}

/* 1b. Ban sao <thead> AN trong phan than: ep ve chieu cao 0.
       Day la thu phai lam de het dai trang thua. */
.dataTables_scrollBody table.dataTable > thead > tr > th,
.dataTables_scrollBody table.dataTable > thead > tr > td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
}
.dataTables_scrollBody table.dataTable > thead {
    line-height: 0 !important;
}

/* 2. Chua chỗ cho icon sap xep, khong de de len chu */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    padding-right: 26px !important;
}

/* 3. O du lieu: thoang hon, can giua theo chieu doc */
table.dataTable tbody td {
    padding: 9px 12px !important;
    vertical-align: middle !important;
    font-size: 13px;
}

/* 4. Dong ke xen ke diu hon, hover ro rang */
table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fbfcfe;
}
table.dataTable tbody tr:hover {
    background-color: #eef4ff !important;
}

/* 5. Thanh cong cu tren bang (nut xuat, o tim kiem) thoang hon */
.dataTables_wrapper .dt-buttons .dt-button {
    margin-right: 6px;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_filter input {
    border-radius: 6px;
    padding: 5px 10px;
}

/* 6. KHONG tu them overflow-x cho wrapper.
      DataTables da co san .dataTables_scrollBody cuon ngang; them nua
      -> HAI thanh cuon chong nhau, rat kho dung.
      Chi cho cuon o dung mot cho: */
.dataTables_wrapper {
    overflow-x: visible;
}
.dataTables_scrollBody {
    overflow-x: auto !important;
}
/* ============================================================
   HOA DON DIEN TU - bang danh sach dai hoa don
   Van de: bang nam TRONG .alert-success ma theme dat chu MAU TRANG
   -> nen trang + chu trang = khong doc duoc gi.
   Phai ep mau chu tuong minh.
   ============================================================ */
.azpos-kq-kiemtra .azpos-bang-dai {
    margin-top: 10px;
    margin-bottom: 0;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}
.azpos-kq-kiemtra .azpos-bang-dai th,
.azpos-kq-kiemtra .azpos-bang-dai td {
    color: #1f2d3d !important;      /* ep chu toi, de len mau trang cua alert */
    background: #fff;
    border-color: #e3e8ef !important;
    vertical-align: middle !important;
    font-size: 13px;
}
.azpos-kq-kiemtra .azpos-bang-dai th {
    background: #f1f5fb;
    font-weight: 700;
    white-space: nowrap;
}
/* Dai dang su dung: lam noi bat */
.azpos-kq-kiemtra .azpos-bang-dai tr.azpos-dai-dang-dung td {
    background: #eefaf1;
    font-weight: 600;
}
/* Chu trong khung ket qua (ngoai bang) van la chu trang tren nen alert */
.azpos-kq-kiemtra .alert {
    margin-bottom: 0;
}

/* Thanh cuon manh, khong chiem cho */
.dataTables_scrollBody::-webkit-scrollbar {
    height: 9px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #c7cfda;
    border-radius: 6px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: #aab4c2;
}
.dataTables_scrollBody::-webkit-scrollbar-track {
    background: #f1f4f8;
}

/* ============================================================
   HOA DON DIEN TU - hai lua chon che do xuat
   ============================================================ */
.azpos-che-do {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.azpos-che-do .azpos-lua-chon {
    flex: 1 1 320px;
    border: 2px solid #e3e8ef;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: normal;
    background: #fff;
    transition: border-color .15s, background .15s;
    margin: 0;
}
.azpos-che-do .azpos-lua-chon:hover {
    border-color: #b9c6da;
}
.azpos-che-do .azpos-lua-chon.dang-chon {
    border-color: #0040C1;
    background: #f5f8ff;
}
.azpos-che-do .azpos-lua-chon input[type="radio"] {
    margin-right: 8px;
}
.azpos-che-do .azpos-lua-chon .label {
    margin-left: 6px;
    font-size: 11px;
    vertical-align: middle;
}
.azpos-che-do .azpos-help {
    margin-top: 8px;
    margin-bottom: 0;
}

/* ---- Hop thoai xuat hoa don dien tu ---- */
#azpos-einvoice-modal .azpos-hd-tong th { background:#f7f9fc; }
#azpos-einvoice-modal .azpos-hd-tong-cuoi th,
#azpos-einvoice-modal .azpos-hd-tong-cuoi td {
    background:#eef4ff; font-size:15px; border-top:2px solid #0040C1;
}
#azpos-einvoice-modal .azpos-xml-box {
    max-height:260px; overflow:auto; font-size:11px; line-height:1.5;
    background:#f7f9fc; border:1px solid #e3e8ef;
}

/* ============================================================
   MODAL "CHI TIET BAN HANG" - lam gon
   Sua bang CSS, KHONG dung vao file loi show.blade.php
   ============================================================ */

/* 1. Bo mau xanh la choi o dau bang -> dong tone xanh duong */
.modal .table tr.bg-green,
.modal .table tr.bg-green th {
    background-color: #f1f5fb !important;
    color: #1f2d3d !important;
    font-weight: 700;
    border-bottom: 2px solid #0040C1 !important;
}

/* 2. Bo nen xam duc -> nen trang, vien nhe */
.modal .table.bg-gray,
.modal .table.bg-gray > tbody > tr > td,
.modal .table.bg-gray > tbody > tr > th {
    background-color: #fff !important;
}
.modal .table.bg-gray {
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
}
.modal .well.bg-gray {
    background-color: #f8fafc !important;
    border: 1px solid #eef0f4;
    box-shadow: none;
    padding: 8px 12px;
    margin-bottom: 0;
}

/* 3. Thu gon khoang cach - modal dang qua thoang */
.modal .modal-body { padding: 14px 18px; }
.modal .modal-body .row { margin-bottom: 0; }
.modal .modal-body h4 {
    font-size: 15px; font-weight: 700; color: #1f2d3d;
    margin: 14px 0 8px; padding-bottom: 6px;
    border-bottom: 1px solid #eef0f4;
}
.modal .modal-body .table > tbody > tr > td,
.modal .modal-body .table > tbody > tr > th {
    padding: 7px 10px; font-size: 13px; vertical-align: middle;
}
.modal .modal-body br + br { display: none; }

/* 4. Khu vuc hoa don dien tu trong chan modal */
.azpos-ei-nut {
    display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-right: auto; float: left;
}
.azpos-ei-trangthai {
    display: inline-block; padding: 6px 12px; border-radius: 6px;
    background: #eefaf1; color: #1f6b3a; border: 1px solid #c6ecd4;
    font-size: 13px;
}
.azpos-ei-trangthai.azpos-ei-cho {
    background: #fff8e6; color: #8a6100; border-color: #f3e0b0;
}
.azpos-ei-trangthai small { color: #5b7a66; margin-left: 4px; }
.modal-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.modal-footer > *:not(.azpos-ei-nut) { margin-left: 0 !important; }

/* Ghi chu ben canh nut hoa don dien tu */
.azpos-ei-ghichu {
    font-size: 12px; color: #8a6100; background: #fff8e6;
    border: 1px solid #f3e0b0; border-radius: 6px; padding: 5px 10px;
}
.azpos-ei-ghichu code { background: #fff; color: #8a6100; }


/* ================================================================
   AZPOS — Lop hieu ung UX (di kem azpos-ux.js)
   Them cam giac mut ma cho app tai-lai-ca-trang. Nhe, khong pho truong.
   ================================================================ */

/* ---- 1. Thanh tien trinh tren dinh ---- */
#azpos-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0;
    height: 3px;
    z-index: 100000;
    background: linear-gradient(90deg, #4f46e5, #2563eb, #06b6d4);
    box-shadow: 0 0 8px rgba(37, 99, 235, .5);
    opacity: 0;
    transition: width .18s ease, opacity .3s ease;
    pointer-events: none;
}
#azpos-progress.azpos-progress-on { opacity: 1; }
#azpos-progress-peg {
    position: absolute;
    right: 0; top: 0;
    width: 100px; height: 100%;
    box-shadow: 0 0 12px 3px rgba(6, 182, 212, .8);
    opacity: .7;
    transform: rotate(3deg) translate(0, -2px);
}

/* ---- 2. Noi dung hien vao muot (thay vi "bat" ra) ---- */
body.azpos-ux .content-wrapper > .content,
body.azpos-ux section.content {
    animation: azpos-fade-in .28s ease both;
}
@keyframes azpos-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---- 3. Chuyen dong nhe cho phan tu tuong tac ---- */
body.azpos-ux .btn,
body.azpos-ux .sidebar-menu > li > a,
body.azpos-ux .nav-tabs > li > a,
body.azpos-ux .small-box,
body.azpos-ux .info-box,
body.azpos-ux .box {
    transition: background-color .15s ease, box-shadow .18s ease,
                transform .12s ease, color .15s ease, border-color .15s ease;
}

/* Nut: nhan xuong co phan hoi */
body.azpos-ux .btn:active { transform: translateY(1px); }
body.azpos-ux .btn:focus  { box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); }

/* Hang bang: sang nhe khi ro chuot */
body.azpos-ux table.table tbody tr {
    transition: background-color .12s ease;
}

/* The thong ke (dashboard): nhac len nhe khi hover */
body.azpos-ux .small-box:hover,
body.azpos-ux .info-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

/* Menu ben: chuyen mau muot khi ro chuot */
body.azpos-ux .sidebar-menu > li > a:hover {
    padding-left: 18px;
}

/* Modal: noi dung truot vao diu hon */
body.azpos-ux .modal.fade .modal-dialog {
    transition: transform .22s ease-out, opacity .22s ease-out;
    transform: translateY(-16px);
}
body.azpos-ux .modal.fade.in .modal-dialog,
body.azpos-ux .modal.fade.show .modal-dialog {
    transform: none;
}

/* ---- 4. Ton trong nguoi dung tat chuyen dong ---- */
@media (prefers-reduced-motion: reduce) {
    body.azpos-ux .content-wrapper > .content,
    body.azpos-ux section.content { animation: none; }
    body.azpos-ux .btn:active,
    body.azpos-ux .small-box:hover,
    body.azpos-ux .info-box:hover { transform: none; }
    #azpos-progress { display: none; }
}

/* ==== AZPOS toi gian form lien he (khach hang / NCC) ====
   Chi AN bang CSS trong pham vi .contact_modal — KHONG xoa field:
   JS toggle / ban do / select2 va backend nguyen ven, truong an van gui
   gia tri mac dinh (khong mat du lieu), dao lai tuc thi. */
.contact_modal .modal-dialog.modal-lg { width: 92%; max-width: 1080px; }
.contact_modal div[class*="col-"]:has(#first_name) { width: 50%; }
.contact_modal div[class*="col-"]:has([name="prefix"]),
.contact_modal div[class*="col-"]:has([name="middle_name"]),
.contact_modal div[class*="col-"]:has([name="last_name"]),
.contact_modal div[class*="col-"]:has([name="contact_id"]),
.contact_modal div[class*="col-"]:has([name="alternate_number"]),
.contact_modal div[class*="col-"]:has([name="landline"]),
.contact_modal div[class*="col-"]:has([name="dob"]),
.contact_modal div[class*="col-"]:has([name="address_line_2"]),
.contact_modal div[class*="col-"]:has([name="country"]),
.contact_modal div[class*="col-"]:has([name="zip_code"]),
.contact_modal div[class*="col-"]:has([name="land_mark"]),
.contact_modal div[class*="col-"]:has([name="street_name"]),
.contact_modal div[class*="col-"]:has([name="building_number"]),
.contact_modal div[class*="col-"]:has([name="additional_number"]),
.contact_modal div[class*="col-"]:has([name^="custom_field"]),
.contact_modal div[class*="col-"]:has([name="assigned_to_users[]"]),
.contact_modal .pay_term,
.contact_modal .shipping_addr_div,
.contact_modal .export_div,
.contact_modal #more_div > .col-md-12:has(> hr) {
    display: none !important;
}