/* ===========================
   index.css — Reorganized & Optimized (Updated: badge left-aligned)
   - Site container max-width: 1200px
   - Badge (product-id-badge) moved to overlay at the left edge of the card info area
     WITHOUT affecting title centering. Removed reserved padding for the badge.
   - Navigation glyphs (modal) remain glyph-only and larger.
   =========================== */

/* ===========================
   1) CÁC QUY ĐỊNH CHUNG
   (Variables, Reset, Base, Components, Accessibility, Modals, Header, Grid/Cards, Price)
   =========================== */

/* Variables / tuning */
:root{
  --green: #18a04a;
  --orange: #f26b1f;
  --bg: #f8fbf9;
  --card-bg: #ffffff;
  --muted: #6b6b6b;

  /* branding colors */
  --brand-blue: #0a6fb4;
  --brand-red: #c21807;
  --brand-green: #0b7a2d;
  --text: #111;

  /* layout */
  --gap: 8px;
  --card-padding: 8px;
  --img-max-w: 144px;
  --img-max-h: 108px;
  --border-weak: rgba(0,0,0,0.06);

  /* site container width (updated to 1200px) */
  --site-max-width: 1200px;

  /* info area sizing */
  --info-height: 56px;
  --title-font-size: 16px;
  --desc-font-size: 12px;
  --desc-font-scale: 0.85;

  /* stack gap */
  --stack-gap: 4px;

  /* modal / glass */
  --modal-blur: 28px;
  --modal-saturate: 140%;

  /* liquid glass tuning reused across site */
  --lg-blur: 14px;
  --lg-saturate: 135%;
  --lg-border-alpha: 0.14;
  --lg-bg-top: rgba(255,255,255,0.18);
  --lg-bg-bottom: rgba(255,255,255,0.06);
  --lg-radius: 14px;
  --lg-box-shadow: 0 12px 36px rgba(0,0,0,0.12);

  /* NOTE: removed reserved horizontal space for product-id badge so title stays centered */
  --pid-space: 0px;

  /* breakpoints (used conceptually in media queries below) */
  --bp-phone-max: 420px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
}

/* Reset / base */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility helper */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); border:0;
}

/* ===========================
   Mobile tap highlight / touch behavior for interactive elements
   - Keep keyboard outlines for accessibility
   - Only limit touch-specific artifacts on interactive elements
   =========================== */
a, button, input, textarea, select,
.tw-img, .price-pair, .price-corner, .tw-card, .price-btn {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent default :active background changes on target elements */
a:active, button:active, .price-pair:active, .price-corner:active, .tw-img:active, .price-btn:active {
  background-color: transparent !important;
  color: inherit !important;
  -webkit-tap-highlight-color: transparent;
}

/* Focus outlines - visible for keyboard users */
.price-pair:focus, .price-btn:focus, a:focus, button:focus {
  outline: 3px solid rgba(24,160,74,0.12);
  outline-offset: 3px;
}

/* ===========================
   Header / Badge / Banner / Intro
   =========================== */
.tw-header { padding: 10px 8px; text-align: center; }
.tw-badge { display:inline-block; background:#0c8c3b; color:#fff; padding:6px 12px; border-radius:16px; font-weight:800; font-size:13px; }

 /* Header card (compact by default; can be overridden per breakpoint) */
.tw-header-card {
  width: 100%;
  margin: 6px 0 10px;
  box-sizing: border-box;
}
.tw-header-card .tw-card-inner {
  display: block;
  padding-left: 0;
  padding-right: 0;
  padding-top: 6px;   /* compacted (from original 14 -> 6) */
  padding-bottom: 14px;
  border-radius: 15px;
  background: var(--card-bg);
  border: 1px solid var(--border-weak);
  box-shadow: 0 6px 18px rgba(20,20,20,0.03);
}

/* Banner & Intro (layout aligned with .tw-wrap) */
.banner {
  border: none !important;
  background: transparent;
  padding: 2px 10px 4px; /* compacted */
  width: 100%;
  box-sizing: border-box;
}
.banner-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  width: 100%;
}
.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: 2px 6px;
  width: 100%;
}

/* Header-scoped logo sizing (won't affect .tw-img product images) */
.tw-header-card .logo,
.tw-header-card .qr { width: 120px; height: auto; display:block; }

/* Typography for header
   Updated to match donhang.php exactly across breakpoints */
.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 styles */
.intro {
  border: none !important;
  padding: 10px 10px 6px;
  text-align: center;
  background: transparent;
}
.intro .sheet-title::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 0 0 8px 0;
  box-sizing: border-box;
}
.sheet-title { color: var(--brand-green); font-size: 16px; margin: 6px 0 4px; font-weight:700; }
.current-datetime { font-size: 11px; font-weight:700; margin-top:4px; color: #222; }

/* Suppress decorative pseudo-elements inside banner/intro to keep layout simple */
.banner *::before, .banner *::after, .intro *::before, .intro *::after {
  display: none !important;
}
.banner hr, .intro hr { display: none !important; }
.banner svg, .intro svg { stroke: none !important; }

/* ===========================
   Grid / Cards
   =========================== */
/* Container - now controlled by --site-max-width */
.tw-wrap { max-width: var(--site-max-width); margin:10px auto; padding: 0 10px 26px; }
.tw-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); align-items: stretch; }

/* Card shell */
.tw-card { background: transparent; outline: none; }
.tw-card-inner {
  background: var(--card-bg);
  border-radius: 10px;
  padding: var(--card-padding);
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  border: 1px solid var(--border-weak);
  box-shadow: 0 6px 18px rgba(20,20,20,0.03);
  position: relative;
  overflow: visible;
}

/* Image wrapper and image */
.tw-img-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  min-height:64px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  overflow: visible;
}
.tw-img {
  max-width: calc(var(--img-max-w));
  max-height: calc(var(--img-max-h));
  object-fit: contain;
  display:block;
  cursor:pointer;
  border-radius: 10px;
  background: transparent !important;
}
.tw-img--pending { opacity: 0.85; transition: opacity .18s ease; filter: saturate(0.95); }
.tw-img--failed { opacity: 0.7; filter: grayscale(0.35); }
.tw-card-inner .tw-img-wrap { background-clip: padding-box; }

/* Separator */
.tw-sep { height:1px; background: rgba(0,0,0,0.06); margin:2px 0; }

/* ===========================
   Title + Description (Info block)
   =========================== */
.info-block {
  position: relative; /* important: badge will be absolute inside this container */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  border-bottom: 1px solid var(--border-weak);
  padding-bottom: 2px;
  margin-bottom: 2px;
}

/* Title remains visually centered; removed reserved padding-left/right so title is not shifted */
.tw-title {
  margin: 0;
  font-size: var(--title-font-size);
  text-align: center;
  font-weight: 700;
  color: #333;
  display:flex;
  align-items:center;           /* vertical centering for text */
  justify-content:center;       /* keep title text centered */
  padding-top: var(--stack-gap);
  padding-bottom: 0;
  gap: 8px;
  position: relative;
  /* ensure no reserved horizontal padding that would shift visual center */
  padding-left: 0;
  padding-right: 0;
}

/* product id badge is absolutely positioned inside .info-block (overlay),
   vertically centered and flush-left.
   It does NOT participate in layout flow so title stays centered. */
.product-id-badge {
  position: absolute;
  left: 2px;               /* very close to the left edge of the info area */
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: inline-block;
  font-size: 12px;
  color: #6b7585;
  font-weight: 800;
  background: transparent;
  padding: 0;              /* no extra padding so it's tight to the left */
  border: none;
  box-shadow: none;
  line-height: 1;
  pointer-events: none;    /* avoid intercepting mouse events so title remains interactive */
}

/* If you prefer the badge to visually hang over the card edge (outside padding),
   uncomment and adjust the calc using --card-padding:
.product-id-badge {
  left: calc(2px - var(--card-padding));
}
*/

/* Ensure the title text occupies remaining space and is centered */
.tw-title-text {
  display: inline-block;
  flex: 1 1 auto;
  text-align: center;
  width: auto;
  padding: 0 8px;
}

.tw-desc {
  margin: 0;
  font-size: calc(var(--desc-font-size) * var(--desc-font-scale));
  color: #c21807;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  display:flex; align-items:center; justify-content:center;
  padding-top: 0;
  padding-bottom: var(--stack-gap);
}
.tw-desc--empty {
  color: transparent;
  min-height: calc(var(--desc-font-size) * var(--desc-font-scale) * 1.4);
  display:flex; align-items:center; justify-content:center;
}

/* (legacy) inline chip disabled */
.product-id-inline { display: none !important; }

/* ===========================
   Price block & Buttons
   =========================== */
.price-block {
  display:flex;
  align-items:center;
  justify-content:center;
  height: calc(var(--info-height) * 0.6);
  cursor: pointer;
  width: 100%;
}
.price-pair {
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  user-select: none;
  position: relative;
  padding: 4px 0;
  min-height: 48px;
  cursor: pointer;
  outline: none;
}
.price-left { color: var(--green); font-weight:900; font-size: 0.78em; text-align:center; }
.price-right { color: var(--orange); font-weight:900; font-size: 0.78em; text-align:center; }
.price-sep { color: #666; font-size: 0.78em; padding: 0 2px; }

/* price button (kept for potential use) */
.price-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  height: 36px;
  padding: 6px 10px;
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 18px rgba(24,160,74,0.12);
}
.price-btn > span, .price-btn { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.price-btn:focus { outline: 3px solid rgba(24,160,74,0.18); outline-offset: 2px; }

/* ===========================
   4-corner price chips (no white surrounding box)
   =========================== */
/* color + placement (updated) */
.price-tl { top: 12px; left: 16px; color: #18a04a; }   /* 200: xanh lá */
.price-tr { top: 12px; right: 16px; color: #0a6fb4; }  /* 100: xanh dương */
.price-bl { bottom: 6px; left: 16px; color: #f26b1f; } /* 50: cam */
.price-br { bottom: 6px; right: 16px; color: #000000; }/* >10: đen */

.price-corner {
  position: absolute;
  font-weight: 600;
  font-size: 10px;
  background: transparent;
  padding: 0 4px;
  border-radius: 4px;
  box-shadow: none;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  transition: none;
}

/* ensure no hover visual change */
.price-pair .price-corner {
  background: transparent;
  padding: 0 4px;
  border-radius: 4px;
}

/* price-pair focus */
.price-pair:focus {
  outline: 3px solid rgba(24,160,74,0.12);
  outline-offset: 3px;
}

/* Modal: image modal */
.tw-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 22000;
  padding: 12px;
}
.tw-modal.open { display:flex; }
.tw-modal-inner {
  border-radius: 16px;
  width: 90vw;
  height: 90vw;
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;
  position: relative;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  border: none;
  padding: 0;
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  -webkit-backdrop-filter: blur(var(--modal-blur)) saturate(var(--modal-saturate));
  backdrop-filter: blur(var(--modal-blur)) saturate(var(--modal-saturate));
}
.tw-modal-viewport { position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; }
.tw-modal-viewport img { width:100%; height:100%; object-fit:cover; display:block; margin:0 auto; z-index:10; max-width:100%; max-height:100%; }

/* NAV BUTTONS: glyph-only (no round background), larger (~+50%) and fixed at left/right edges of modal viewport */
.tw-modal-prev, .tw-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 30px; /* increased from 20px -> 30px (~+50%) */
  line-height: 1;
  z-index: 40;
  transition: color .12s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* place glyphs at edges of modal viewport */
.tw-modal-prev { left: 12px; }
.tw-modal-next { right: 12px; }

/* hide default focus ring but keep accessible outline on keyboard focus */
.tw-modal-prev:focus, .tw-modal-next:focus {
  outline: 3px solid rgba(255,255,255,0.08);
  outline-offset: 4px;
}

/* caption & counter */
.tw-modal-caption {
  position:absolute;
  left:0; right:0; bottom: 40px;
  margin:0 auto;
  padding:0 12px;
  color: rgba(255,255,255,0.95);
  font-weight:700;
  font-size:15px;
  text-align:center;
  z-index:40;
  pointer-events:none;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  line-height:1;
}
.tw-modal-counter {
  position:absolute;
  left:0; right:0; bottom: 12px;
  margin:0 auto;
  color: rgba(255,255,255,0.92);
  font-size:13px;
  text-align:center;
  z-index:40;
  pointer-events:none;
  font-weight:700;
}

/* Price-detail modal (liquid glass) */
.tw-price-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.32); z-index: 23000; padding: 14px; }
.tw-price-modal.open { display:flex; }
.tw-price-modal-inner {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.50);
  padding: 16px;
  min-width: 260px;
  max-width: 88vw;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.10));
  -webkit-backdrop-filter: blur(36px) saturate(150%);
  backdrop-filter: blur(36px) saturate(150%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.26);
}
.tw-price-modal-content { display:flex; flex-direction:column; gap: calc(14px * 0.6); }
.tw-price-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding: calc(12px * 0.6) 8px; border-radius:8px; }
.tw-price-row .label { color: rgba(255,255,255,0.92); opacity:0.95; font-weight:700; font-size:18px; }
.tw-price-row .value { color: rgba(255,255,255,0.98); font-weight:800; font-size:18px; }

/* Modal value color helpers (updated with !important to override base) */
.tw-price-row .value.green  { color: #18a04a !important; } /* 200 */
.tw-price-row .value.blue   { color: #0a6fb4 !important; } /* 100 */
.tw-price-row .value.orange { color: #f26b1f !important; } /* 50 */
.tw-price-row .value.black  { color: #000000 !important; } /* >10 */

/* Small cleanups (global) */
.banner img, .intro img { display:block; max-height: none; }

/* Small utility color classes */
.tw-price-row .value.green { color: #18a04a; }
.tw-price-row .value.orange { color: #f26b1f; }

/* ===========================
   2) MÀN HÌNH NHỎ - PORTRAIT (điện thoại)
   - breakpoint: max-width: var(--bp-phone-max)
   =========================== */
@media (max-width: 420px) {
  /* Grid tighter */
  .tw-grid { grid-template-columns: repeat(2, 1fr); gap:6px; }

  /* Image sizing */
  .tw-img { max-width:120px; max-height:90px; }

  /* Typography adjustments */
  .tw-title { font-size: 14px; padding-top: calc(var(--stack-gap) - 1px); }
  .tw-desc { font-size: calc(var(--desc-font-size) * var(--desc-font-scale) - 1px); padding-bottom: calc(var(--stack-gap) - 1px); }

  /* Price size reduction */
  .price-left, .price-right, .price-sep { font-size: 0.7em; }
  .price-pair { min-height: 44px; }

  /* Modal buttons & captions */
  .tw-modal-prev, .tw-modal-next { font-size: 24px; padding: 6px 6px; }
  .tw-modal-caption { height:40px; bottom:34px; font-size:14px; }
  .tw-modal-counter { bottom: 8px; top: auto; font-size:12px; }

  /* Corner chips smaller */
  .price-corner { font-size: 10px; padding: 0 3px; border-radius: 4px; }

  /* Product ID badge tweaks for small screens */
  .product-id-badge {
    left: 2px;
    font-size: 10px;
  }

  /* Header / Banner adjustments for mobile portrait */
  .banner-left, .banner-right { flex: 0 0 72px; }
  .tw-header-card .logo, .tw-header-card .qr { width: 72px; height: auto; }
  .brand { font-size: 20px; }
  .meta-line { font-size: 9.5px !important; }
  .bank { font-size: 15px !important; }
  .sheet-title { font-size: 14px; }
  .current-datetime { font-size: 9px; }
  .tw-header-card .tw-card-inner { padding-top: 12px; padding-bottom: 12px; }
  
  .tw-price-modal .tw-title,
  .tw-price-modal.open .tw-title {
    font-size: calc(var(--title-font-size) * 1.35);
    line-height: 1.12;
  }
  .tw-price-modal .tw-desc,
  .tw-price-modal.open .tw-desc {
    font-size: calc(var(--desc-font-size) * var(--desc-font-scale) * 1.35);
    line-height: 1.12;
  }
  
}

/* ===========================
   3) MÀN HÌNH TRUNG BÌNH - TABLET
   - breakpoint: between phone and desktop (min-width: 421px && max-width: var(--bp-tablet-max))
   - dùng để cân chỉnh padding / layout trung gian
   =========================== */
@media (min-width: 421px) and (max-width: 1023px) {
  /* Slight grid adjustment for tablets */
  .tw-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--gap); }

  /* Moderate image sizing */
  .tw-img { max-width: 130px; max-height: 96px; }

  /* Header banner spacing */
  .banner { padding: 6px 10px; }
  .banner-center { padding: 2px 6px; }

  /* Modal and card padding tweaks */
  .tw-modal-inner { width: 88vw; height: 88vw; max-width: 92vw; }
  .tw-card-inner { padding: calc(var(--card-padding) + 2px); border-radius: 12px; }

  .tw-modal-prev, .tw-modal-next { font-size: 28px; }
}

/* ===========================
   4) MÀN HÌNH RỘNG - LANDSCAPE (desktop lớn / wide)
   - breakpoint: min-width: var(--bp-desktop-min)
   - increase font sizes and spacing to match donhang.php exactly
   =========================== */
@media (min-width: 1024px) {
  /* price corner chips + modal text scale up by ~20% */
  .price-corner { font-size: 12px; }
  .tw-price-row .label { font-size: 22px; }
  .tw-price-row .value { font-size: 22px; }

  /* inline price helper sizes */
  .price-left, .price-right, .price-sep { font-size: 0.94em; }

  /* price-btn scale */
  .price-btn { font-size: 120%; }

  /* spacing adjustments to match scale */
  .tw-price-row { padding: calc(14px * 0.6) 10px; }
  .tw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--gap) + 2px); }

  /* increase image limits a bit */
  .tw-img { max-width: 160px; max-height: 160px; }

  /* modal sizing */
  .tw-modal-inner { width: 70vw; height: 70vw; max-width: 85vw; max-height: 90vh; }

  /* scale nav glyph size up slightly on wide screens */
  .tw-modal-prev, .tw-modal-next { font-size: 34px; }

  /* ================
     Match donhang.php header sizing exactly on wide screens
     ================ */
  .company-line { font-size: 18px; }
  .brand { font-size: 40px; }            /* from 20px -> 40px */
  .meta-line { font-size: 16px; }
  .bank { font-size: 16px; }
  .sheet-title { font-size: 20px; }      /* match donhang.php landscape */
  .current-datetime { font-size: 17px !important; }

  /* Increase product title and description sizes on wide screens (main page + price modal) */
  .tw-title,
  body.page-index .tw-title {
    font-size: calc(var(--title-font-size) * 1.1);
    line-height: 1.5;
  }
  .tw-desc,
  body.page-index .tw-desc {
    font-size: calc(var(--desc-font-size) * var(--desc-font-scale) * 1.1);
    line-height: 1.5;
  }

  .tw-price-modal .tw-title,
  .tw-price-modal.open .tw-title {
    font-size: calc(var(--title-font-size) * 1.55);
    line-height: 1.12;
  }
  .tw-price-modal .tw-desc,
  .tw-price-modal.open .tw-desc {
    font-size: calc(var(--desc-font-size) * var(--desc-font-scale) * 1.55);
    line-height: 1.12;
  }

  /* Price chip font sizing on wide screens */
  .price-corner {
    font-size: 12px;
    font-weight: 700;
  }
}