<style>

/* =========================================================
   TIGER ORANGE POS THEME
   Professional • Accessible • Maintainable
   ========================================================= */

/* =========================================================
   01 – DESIGN TOKENS
   ========================================================= */
:root {
  --brand-primary: #C96A2E;
  --brand-primary-dark: #9E4E1E;
  --brand-primary-soft: #F7E3D3;
  --bg-main: #FAF9F7;
  --panel-bg: #FFFFFF;
  --brand-primary: #aa4302;

  /* NEUTRALS */
  --gray-100: #a8afba;
  --gray-200: #e5e7eb;

  /* TEXT */
  --text-main: #111827;
  --text-muted: #4b5563;
  --text-inverse: #ffffff;

  /* FEEDBACK */
  --danger: #b91c1c;
  --success: #15803d;

  /* EFFECTS */
  --focus-ring: rgba(211, 84, 0, 0.35);
}

/* =========================================
   HIDE LANGUAGE DROPDOWN (CSS ONLY)
   ========================================= */

/* Hide the Ultimate POS language switcher */
details.tw-dw-dropdown {
    display: none !important;
}

/* =========================================================
   02 – BASE UI
   ========================================================= */
body {
  background: var(--gray-100);
  color: var(--text-main);
}

a {
  color: var(--brand-primary);
  font-weight: 500;
}

a:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

/* Focus visibility (keyboard & accessibility) */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* =========================================================
   03 – HEADER / NAVIGATION
   ========================================================= */
.main-header,
.navbar,
.skin-black .main-header,
.skin-black-light .main-header {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
}

.main-header a,
.navbar a {
  color: var(--text-inverse) !important;
}

.main-header a:hover {
  color: #ffe5d0 !important;
}

/* =========================================================
   04 – BUTTON SYSTEM
   ========================================================= */
.btn-primary,
.btn-info {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary-dark) !important;
  color: var(--text-inverse) !important;
}

.btn-primary:hover,
.btn-info:hover {
  background: var(--brand-primary-dark) !important;
}

.btn-secondary {
  background: var(--gray-200);
  color: var(--text-main);
  border-color: var(--gray-200);
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
}

/* =========================================================
   05 – FORMS
   ========================================================= */
.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.input-error {
  border-color: var(--danger) !important;
  background: #fef2f2;
}

/* =========================================================
   06 – TABS & LISTS
   ========================================================= */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
  border-color: var(--brand-primary-dark) !important;
}

.list-group-item.active {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary-dark) !important;
  color: var(--text-inverse) !important;
}

/* =========================================================
   07 – TABLE HEADERS (GLOBAL)
   ========================================================= */
.table thead tr,
.table thead th,
.blue-heading,
.blue-header th,
.table-pdf thead tr {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
}

/* =========================================================
   08 – POS PRODUCT TABLE (CRITICAL)
   ========================================================= */
#product_table tbody tr,
table.dataTable tbody tr {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* No zebra noise */
#product_table tbody tr:nth-of-type(odd),
#product_table tbody tr:nth-of-type(even),
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background: #ffffff !important;
}

/* Hover */
#product_table tbody tr:hover,
table.dataTable tbody tr:hover {
  background: var(--brand-primary-soft) !important;
  border-left-color: var(--brand-primary) !important;
}

/* Selected row */
#product_table tbody tr.selected,
table.dataTable tbody tr.selected {
  background: #ffedd5 !important;
  border-left-color: var(--brand-primary-dark) !important;
  font-weight: 600;
}

/* Table cell sizing (touch friendly) */
#product_table td,
table.dataTable td {
  padding: 10px 12px;
}

/* Numeric alignment */
.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   09 – POS TOTALS / SUMMARY
   ========================================================= */
.pos-total {
  background: #ffffff;
  border: 1px solid var(--brand-primary);
}

.pos-total span.number {
  color: var(--brand-primary-dark);
  font-weight: 700;
}

/* =========================================================
   10 – BADGES & LABELS
   ========================================================= */
.badge,
.discount-badge,
.discount-badge-small {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
}

/* =========================================================
   11 – ALERTS / INFO (ADMINLTE OVERRIDES)
   ========================================================= */
.bg-info,
.text-info,
.label-info,
.alert-info,
.callout.callout-info {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
  border-color: var(--brand-primary-dark) !important;
}

/* Ensure icons remain readable */
.text-info .fa,
.bg-info .fa {
  color: var(--text-inverse) !important;
}

/* =========================================================
   12 – LOGIN / AUTH
   ========================================================= */
.right-col {
  background: linear-gradient(
    to right,
    var(--brand-primary),
    var(--brand-primary-dark)
  ) !important;
}

.login-header,
.login-header a {
  color: var(--text-inverse) !important;
}

/* =========================================================
   13 – iCHECK (CUSTOM SKIN)
   ========================================================= */
.icheckbox_square-blue,
.iradio_square-blue {
  background: #ffffff !important;
  border: 2px solid var(--brand-primary) !important;
  border-radius: 3px !important;
}

.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
  background: var(--brand-primary) !important;
}

.icheckbox_square-blue.checked::after,
.iradio_square-blue.checked::after {
  content: "✓";
  color: #ffffff;
  font-size: 14px;
  display: block;
  text-align: center;
  line-height: 18px;
}

/* =========================================================
   14 – SWEETALERT
   ========================================================= */
.swal-modal .swal-button {
  background: var(--brand-primary) !important;
}

/* =========================================================
   15 – LOADERS / PROGRESS
   ========================================================= */
.ladda-button .ladda-progress {
  background: var(--focus-ring) !important;
}



/
/* =========================================
   FORCE PUBLIC HOME PAGE BACKGROUND
   ========================================= */

/* Body fallback */
body:not(.sidebar-mini) {
    background-color: #aa4302 !important; /* tiger orange */
}

/* Main public content wrapper */
.content-wrapper,
.wrapper,
.main-content,
.main-container,
.container-fluid {
    background-color: #c95202 !important; 
}

/* Home page specific sections */
section,
section.content,
.home-page,
.public-home,
.landing-page {
    background-color: b54402 !important; /* tiger orange */
}

/* Remove transparency overlays */
.bg-transparent,
.bg-light,
.bg-white {
    background-color: #c95202 !important;
}


/* ===== BRAND ICON COLOR (SAFE & PROFESSIONAL) ===== */

/* Font Awesome / AdminLTE icons only */
i.fa,
i.fas,
i.far,
i.fal,
i.fab,
.nav-icon,
.icon {
    color: #C96A2E;
}

/* Maintain brand color on hover & active states */
a:hover i.fa,
a:hover .nav-icon,
a:focus i.fa,
.menu-open > a .nav-icon {
    color: #C96A2E;
}

/* SVG icons that respect currentColor (SAFE) */
svg.icon,
svg.nav-icon {
    color: #f96714;
}

/* Ensure SVG paths using currentColor inherit correctly */
svg.icon path,
svg.nav-icon path {
    fill: currentColor;
}


/* ================================
   VINFASTOCK LOGIN – TIGER ORANGE
================================ */

/* Headings */
.tw-text-indigo-500,
.tw-from-indigo-500,
.tw-to-blue-500 {
    --tw-gradient-from: #c95202 !important;
    --tw-gradient-to: #c95202 !important;
}

/* Login button */
button[type="submit"] {
    background: #c95202 !important;
}

button[type="submit"]:hover {
    background: #e66f00 !important;
}

/* Links (forgot password, register) */
a.tw-bg-gradient-to-r {
    background: none !important;
    color: #c95202 !important;
}

a.tw-bg-gradient-to-r:hover {
    color: #e66f00 !important;
    text-decoration: underline;
}

/* Input focus */
input:focus {
    border-color: #c95202 !important;
    box-shadow: 0 0 0 2px rgba(255,127,17,0.25) !important;
}

/* Checkbox */
.tw-dw-checkbox:checked {
    background-color: #c95202 !important;
    border-color: #FF7F11 !important;
}




/* =========================================================
   VINFOTECH CUSTOM THEME
   Clean • Professional • Non-Destructive
   ========================================================= */

/* ================================
   01 – THEME VARIABLES
================================ */
:root {
  --brand-primary: #c95202;
  --brand-primary-dark: #a94201;
  --brand-primary-soft: #ffedd5;

  --text-main: #1f2937;
  --text-inverse: #ffffff;

  --gray-100: #f9fafb;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;

  --danger: #b91c1c;
  --success: #15803d;

  --focus-ring: rgba(201, 82, 2, 0.35);
}

/* ================================
   02 – BASE UI
================================ */
body {
  background-color: var(--gray-100);
  color: var(--text-main);
}

a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ================================
   03 – HEADER / NAVBAR
================================ */
.main-header,
.navbar {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

.main-header a,
.navbar a {
  color: var(--text-inverse);
}

.main-header a:hover {
  color: #ffe5d0;
}

/* ================================
   04 – SIDEBAR
================================ */
.side-bar {
  background-color: #9e4e1e;
  color: var(--text-inverse);
}

.side-bar a {
  color: var(--text-inverse);
}

.side-bar a:hover,
.side-bar .menu-open > a {
  background-color: #000000;
  color: var(--text-inverse);
}

/* Sidebar icons (safe) */
.side-bar i.fa,
.side-bar .nav-icon {
  color: var(--brand-primary);
}

/* ================================
   05 – BUTTONS
================================ */
.btn-primary,
.btn-info {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary-dark);
  color: var(--text-inverse);
}

.btn-primary:hover,
.btn-info:hover {
  background-color: var(--brand-primary-dark);
}

.btn-secondary {
  background-color: var(--gray-200);
  border-color: var(--gray-200);
  color: var(--text-main);
}

.btn-danger {
  background-color: var(--danger);
  color: #ffffff;
}

/* ================================
   06 – FORMS
================================ */
.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* ================================
   07 – TABLES
================================ */
.table thead th {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

.table tbody tr:hover {
  background-color: var(--brand-primary-soft);
}

/* ================================
   08 – POS PRODUCT TABLE
================================ */
#product_table tbody tr,
table.dataTable tbody tr {
  background-color: #ffffff;
  border-left: 4px solid transparent;
}

#product_table tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: var(--brand-primary-soft);
  border-left-color: var(--brand-primary);
}

#product_table tbody tr.selected,
table.dataTable tbody tr.selected {
  background-color: #ffedd5;
  border-left-color: var(--brand-primary-dark);
  font-weight: 600;
}

/* ================================
   09 – BADGES & LABELS
================================ */
.badge,
.label {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

/* ================================
   10 – ALERTS (ADMINLTE)
================================ */
.bg-info,
.alert-info,
.callout.callout-info {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary-dark);
}

/* ================================
   11 – LOGIN / AUTH PAGES
================================ */
.right-col {
  background: linear-gradient(
    to right,
    var(--brand-primary),
    var(--brand-primary-dark)
  );
}

.login-header,
.login-header a {
  color: var(--text-inverse);
}


* =========================================
   SIDEBAR CONTAINER REFINEMENT
   Force sidebar container background to tiger orange by vinfotech
   ========================================= */

.side-bar {
    background-color: #9e4e1e !important;
}

/* Sidebar links */
.side-bar a {
    background-color: transparent !important;
}

/* Hover & active */
.side-bar a:hover,
.side-bar .menu-open > a {
    background-color: rgba(201, 107, 50, 1) !important;
}

/* =========================================
   ICON BALANCE New update by Vinfotech
   ========================================= */

.nav-icon,
.side-bar i.fa {
    opacity: 0.85;
}

.side-bar a:hover .nav-icon {
    opacity: 1;
}

/* =========================================
   HEADER REFINEMENT
   ========================================= */

.main-header,
.navbar {
    background: linear-gradient(
        to right,
        #c95202,
        #a94201
    ) !important;
}

/* =========================================
   DASHBOARD CARDS (KPI) new by Vinfotech 10-02-26
   ========================================= */

.small-box,
.card,
.info-box {
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
    border: 1px solid #e5e7eb;
}

/* =========================================
   SECTION SPACING
   ========================================= */

.box,
.card {
    margin-bottom: 24px;
}
