:root {
  --brand-blue: #0a6fb4;
  --brand-red: #c21807;
  --brand-green: #0b7a2d;
  --text: #111;
  --border-color: rgba(0,0,0,0.13); /* nhẹ hơn, tối ưu khi chụp hình */
  --donhang-num-font-scale: 0.8;
  --donhang-num-font-weight: 400;
  --donhang-num-color: var(--text);
  --donhang-num-line-height: 1.1;
  --donhang-num-padding: 2px 6px;
  --unified-border-width: 0.5px;
}

/* reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: "SF Pro Display", "SF Pro Text", "San Francisco", "Segoe UI", "Roboto", Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background: #fff;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 400;
}
.page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 6px; }

/* banner (header) - no visible border (override) */
.banner {
  border: none !important; /* hidden as requested */
  background: #fff;
  padding: 6px;
}
.banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.banner-left, .banner-right {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-center {
  flex: 1 1 auto;
  text-align: center;
  padding: 4px 6px;
}
.logo, .qr { width: 120px; height: auto; display: block; }

.company-line { color: var(--brand-blue); font-weight: 700; font-size: 11px; }
.brand { color: var(--brand-red); font-size: 20px; font-weight: 700; margin: 4px 0 4px 0; }
.meta-line { color: var(--brand-blue); font-weight: 600; font-size: 8px; margin: 2px 0 2px 0; }
.meta-highlight { color: var(--brand-red); }
.bank { margin-top: 6px; font-size: 12px; }

/* intro/title - no visible border (override) */
.intro {
  border: none !important; /* hidden as requested */
  padding: 10px 8px;
  text-align: center;
  background: #fff;
}
.intro-text { font-size: 9px; line-height: 1.25; margin: 0 0 8px; }
.sheet-title { color: var(--brand-green); font-size: 13px; margin: 0px 0 0; font-weight: 700; vertical-align: middle; }

/* table */
.table-wrap {
  margin-top: 0px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  padding: 0;
  border: none !important; /* ensure wrapper has no visible border */
}
.price-table {
  width: 100%;
  border: none !important;    /* hide outer border */
  outline: none !important;   /* hide outline */
  border-collapse: collapse !important;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 100%;
  background: #fff;
  /* keep layout widths defined below */
}
.price-table th, .price-table td {
  border: none !important; /* hide cell borders */
  padding: 0px 0px;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* no global 'background: transparent !important' here so alternating backgrounds can apply */
}
.head-top th { padding: 6px 6px; font-size: 88%; line-height: 1; font-weight: 700; }

/* columns - equal widths for numeric columns */
.col-stt { width: 6.3%; }
.col-name { width: 18.225%; }
.col-img { width: 18.225%; }
.col-qty, .col-price, .col-total { width: 19.083333% !important; }

/* product text & image */
/* Center product name/description by default for consistent layout */
.prod-name { font-weight: 700; font-size: 115%; margin: 0; text-align: center !important; }
.prod-desc { color: var(--brand-red); font-weight: 600; margin: 4px 0 0; font-size: 95%; text-align: center !important; line-height: 1.1; }

td.col-img { padding: 6px; text-align: center; vertical-align: middle; }
td.col-img .img-box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
td.col-img .img-box img, td.col-img .img-box .prod-img { display: block; margin: 0 auto; max-width: 100%; height: auto; object-fit: contain; max-height: 160px; }

.price-table th, .price-table td { text-align: center; vertical-align: middle; }

/* ---- UNIFIED STYLES FOR COLUMNS 4 (qty), 5 (price), 6 (total) ---- */
td.col-qty .qty-text,
td.col-price .price-text,
td.col-total .total-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-sizing: border-box;
  min-height: 28px;
}
.price-table td .qty-text,
.price-table td .price-text,
.price-table td .total-text {
  padding: 2px 6px;
  box-sizing: border-box;
}

/* Số lượng, Đơn giá, Thành tiền - cùng font nhỏ (chỉ span) */
td.col-qty .qty-text .plain,
td.col-price .price-text .plain,
td.col-total .total-text .plain {
  font-size: 0.4em !important;
  font-weight: var(--donhang-num-font-weight) !important;
  color: var(--donhang-num-color) !important;
  line-height: var(--donhang-num-line-height) !important;
  text-align: center !important;
  font-family: inherit !important;
  padding: var(--donhang-num-padding);
  background: transparent;
  border: none !important; /* hide small span borders */
  outline: none;
  box-sizing: border-box;
}

/* Make product price numbers green on donhang.php (override index/global blue) */
.price-table td.col-price .price-text .plain,
.price-table td.col-total .total-text .plain {
  color: var(--brand-green) !important;
}

/* Footer (order total) formatting: keep visual emphasis but no border */
#order-total-row .total-label,
#order-total-row .total-value {
  color: var(--brand-red) !important;
  font-weight: 700;
  font-size: calc(100% * 1.2) !important;
  line-height: 1.1;
  text-align: center !important;
  background: transparent;
  border: none !important;
}

/* responsive tweaks */
@media (max-width: 420px) {
  .col-stt { width: 7%; }
  .col-name { width: 24%; }
  .col-img { width: 23%; }
  .col-qty, .col-price { width: 16.5% !important; }
  .col-total { width: 18.5% !important; }
  .price-table th, .price-table td { padding: 0px 0px; }
  .price-table,
  .price-table th,
  .price-table td,
  .price-table tfoot tr#order-total-row td {
   border: none !important;
  }

  /* Match index.css mobile header sizing: shrink banner logo/qr back to 72px on small phones */
  .banner-left, .banner-right { flex: 0 0 72px; }
  .logo, .qr { width: 72px; height: auto; display: block; }

  .brand { font-size: 20px; }
  .meta-line { font-size: 9.5px !important; }
  .meta-highlight { font-size: 9.5px !important; }
  .bank { font-size: 15px !important; }
  .sheet-title { font-size: 14px; }
  .current-datetime { font-size: 9px; }
}

/* Tăng chiều cao của dòng đầu tiên (thead) và dòng cuối cùng (tfoot) thêm 50% */
.price-table thead tr.head-top th {
  padding-top: 9px;
  padding-bottom: 9px;
  min-height: 21px;
  color: #1976d2;
}
.price-table tfoot tr#order-total-row td {
  padding-top: 9px;
  padding-bottom: 9px;
  min-height: 21px;
  border: none !important;
}

/* Row text sizing */
td.col-qty .qty-text,
td.col-price .price-text,
td.col-total .total-text {
  font-size: 0.9em !important;
  font-weight: 400 !important;
  color: #222 !important;
}

/* ===========================================================
   Desktop landscape: increase font sizes by ~30% for many elements,
   but ensure product name/desc remain at our desired large size.
   =========================================================== */
@media (min-width: 1000px) and (orientation: landscape) {
  body { font-size: 18px; }
  .current-datetime { font-size: 17px!important;; } /* từ 11px -> 22px (100% tăng) */
  .company-line { font-size: 18px; }
  .brand { font-size: 40px; }
  .meta-line { font-size: 16px; }
  .bank { font-size: 16px; }
  .intro-text { font-size: 26px; }
  .sheet-title { font-size: 20px; }
  .price-table th, .price-table td {
    padding: 8px 6px;
  }

  /* Keep product name & description fixed to our large size (40px) in landscape and centered */
  .price-table td .prod-name,
  .prod-name {
    font-size: 200% !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
  .price-table td .prod-desc,
  .prod-desc {
    font-size: 160% !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  td.col-qty .qty-text,
  td.col-price .price-text,
  td.col-total .total-text {
    font-size: 1.17em !important;
  }
  td.col-qty .qty-text .plain,
  td.col-price .price-text .plain,
  td.col-total .total-text .plain {
    font-size: 0.52em !important;
  }
  #order-total-row .total-label,
  #order-total-row .total-value {
    font-size: calc(100% * 1.2 * 1.0) !important;
  }

  /* Increase images by 50% on landscape:
     original max-height: 200px -> increased to 300px */
  td.col-img .img-box img,
  td.col-img .img-box .prod-img {
    max-height: 300px !important;
  }

  .price-table thead tr.head-top th {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* increase logo/qr size on large landscape like index.php */
  .banner-left, .banner-right { flex: 0 0 120px; }
  .logo, .qr { width: 120px; height: auto; display: block; }
}

/* ================================
   OVERRIDES (placed at end) - ensure borders hidden and even rows shaded
   ================================ */

/* Strongly hide separators on banner, intro and table (and their children) */
/* NOTE: removed 'background: transparent !important' to allow intended row backgrounds to be rendered by html2canvas */
.banner, .banner * ,
.intro, .intro * ,
.table-wrap, .table-wrap * ,
.price-table, .price-table * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
  border-image: none !important;
}

/* Hide pseudo-elements that might draw separators */
.banner *::before, .banner *::after,
.intro *::before, .intro *::after,
.table-wrap *::before, .table-wrap *::after,
.price-table *::before, .price-table *::after {
  display: none !important;
  content: "" !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure table structural elements have no border */
/* Removed background: transparent !important; so that explicit background-color on header/rows can take effect */
.price-table, .price-table thead, .price-table tbody, .price-table tfoot,
.price-table tr, .price-table th, .price-table td {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: none !important;
  /* background intentionally not forced to transparent here */
}

/* Remove any hr/svg strokes inside these areas */
.banner hr, .intro hr, .price-table hr { display:none !important; }
.banner svg, .intro svg, .price-table svg { stroke: none !important; }

/* --- Alternating rows: các dòng sản phẩm chẵn có nền xám nhạt --- */
.price-table tbody#order-products-tbody tr:nth-child(even),
.price-table tbody#order-products-tbody tr:nth-child(even) td {
  background-color: #f6f6f6 !important; /* xám nhạt cho hàng chẵn */
}

/* If you want the placeholder row to also have the same bg */
.price-table tbody#order-products-tbody tr.no-products,
.price-table tbody#order-products-tbody tr.no-products td {
  background-color: #f6f6f6 !important;
}

/* Extra-specific fallback to beat inline overrides */
.page .table-wrap .price-table tbody#order-products-tbody tr:nth-child(even),
.page .table-wrap .price-table tbody#order-products-tbody tr:nth-child(even) td,
.page .table-wrap .price-table tbody#order-products-tbody tr.no-products,
.page .table-wrap .price-table tbody#order-products-tbody tr.no-products td {
  background-color: #f6f6f6 !important;
}

/* --- Header (dòng tiêu đề) có nền xám nhạt --- */
.price-table thead tr.head-top th,
.price-table thead tr.head-top {
  background-color: #f6f6f6 !important;
}

/* --- Footer parity: nếu số hàng trong tbody là lẻ thì footer (Tổng Tiền) sẽ là vị trí chẵn và cần tô xám --- */
.price-table tbody#order-products-tbody:has(tr:last-child:nth-child(odd)) + tfoot tr#order-total-row,
.price-table tbody#order-products-tbody:has(tr:last-child:nth-child(odd)) + tfoot tr#order-total-row td {
  background-color: #f6f6f6 !important;
}

/* Keep padding accessible (adjust if you want different spacing) */
.price-table th, .price-table td {
  padding: 6px 6px;
}

/* =========================
   Ensure header/logo/typography exactly matches index.css across breakpoints
   (re-asserted here at end to beat previous rules if necessary)
   ========================= */

/* Base (desktop-like default) - already set above but re-assert to ensure parity */
.banner-left, .banner-right { flex: 0 0 120px; }
.logo, .qr { width: 120px; height: auto; display: block; }

.company-line { color: var(--brand-blue); font-weight: 700; font-size: 11px; }
.brand { color: var(--brand-red); font-size: 20px; font-weight:700; margin: 4px 0 4px 0; }
.meta-line { color: var(--brand-blue); font-weight: 600; font-size: 8px; margin: 2px 0 2px 0; }
.meta-highlight { color: var(--brand-red); }
.bank { margin-top:6px; font-size:12px; }

/* Mobile portrait overrides (match index.css mobile behavior) */
@media (max-width: 420px) {
  .banner-left, .banner-right { flex: 0 0 72px; }
  .logo, .qr { width: 72px; height: auto; display: block; }

  .brand { font-size: 20px; }
  .meta-line { font-size: 9.5px !important; }
  .meta-highlight { font-size: 9.5px !important; }
  .bank { font-size: 15px !important; }
  .sheet-title { font-size: 14px; }
  .current-datetime { font-size: 9px; }
}

/* Wide / desktop (match index.css large-screen behavior) */
@media (min-width: 1024px) {
  .company-line { font-size: 18px; }
  .brand { font-size: 40px; }
  .meta-line { font-size: 16px; }
  .bank { font-size: 16px; }
  .sheet-title { font-size: 20px; }
  .current-datetime { font-size: 17px !important; }

  /* ensure logo/qr keep the larger size on wide screens */
  .banner-left, .banner-right { flex: 0 0 120px; }
  .logo, .qr { width: 120px; height: auto; display: block; }
}