/* #root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
} */

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.flash-message {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  font-size: 20px;
  transition: all 0.2s ease-out;
}

.flash-message.success {
  background-color: #EFE;
  border: 1px solid #DED;
  color: #9A9;
}

.flash-message.danger {
  color: #A66;
  background-color: #FEE;
  border: 1px inset #EDD;
}

.flash-message.warning {
  color: #000;
  background-color: rgb(255, 193, 7, 1);
  border: 1px inset #EDD;
}

.flash-message.active {
  transform: translateY(100px);
  transition: all 0.2s ease-out;
  z-index: 5000;
}

.flash-card {
  position: absolute;
  top: -100px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  padding: 20px;
}

a.setting-button {
  position: relative;
  display: inline-block;
  padding: 8px 4px 12px;
  text-decoration: none;
  color: #000;
  cursor: pointer;
  transition: color 0.25s ease, font-weight 0.25s ease;
}

a.setting-button.active {
  color: #000;
  font-weight: 600;
}

a.setting-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #000, #fff);
  border-radius: 999px;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

a.setting-button.active::after {
  transform: scaleX(1);
}

.table-spacing {
  border-collapse: separate;
  border-spacing: 8px;
}

.table-spacing thead tr th {
  border-radius: 50rem;
}

.preview-quotation .unit-table {
  border-right: 1px solid #000;
}

.preview-quotation tbody tr td,
.preview-quotation tfoot tr td {
  border-bottom: 0 none !important;
}

.preview-quotation tbody tr:nth-child(even) td {
  background-color: #abdef6 !important;
}

.preview-quotation tbody tr:nth-child(even) td:nth-child(1) {
  border-radius: .375rem 0 0 .375rem;
}

.preview-quotation tbody tr:nth-child(even) td:nth-last-child(1) {
  border-radius: 0 .375rem .375rem 0;
}

.preview-quotation tfoot .total-vat {
  border-radius: 10px;
  background: linear-gradient(to right, #004cbf, #00398f);
  color: #fff;
}

.preview-quotation thead .th-left {
  color: #000a39;
}

/* .preview-quotation thead .th-right {
  background: linear-gradient(to right, #666, #000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
} */

.preview-quotation thead {
  border-bottom: 1px solid #00398f;
}

.no-print {
  display: block;
}

@media print {
  .no-print {
    display: none;
  }
}

.weekly thead tr th,
.weekly tbody tr td,
.prediction thead tr th,
.prediction tbody tr td,
.prediction tfoot tr td {
  text-align: center;
  white-space: normal;
  vertical-align: middle;
  border-collapse: collapse;
}

.prediction tbody tr td:nth-child(1),
.prediction tfoot tr td:nth-child(1) {
  width: 200px !important;
}

.prediction thead tr th:not(:nth-child(1)),
.prediction tbody tr td:not(:nth-child(1)),
.prediction tfoot tr td:not(:nth-child(1)) {
  width: 100px !important;
}

.prediction tbody tr td:nth-child(1),
.prediction tfoot tr td:nth-child(1) {
  text-align: left !important;
}

.prediction tbody tr td {
  background-color: #97c0ff14;
}

.prediction thead tr th,
.weekly thead th {
  background: linear-gradient(to bottom, #00398f, #000a39);
  color: #fff;
  border: none;
}

.weekly thead tr th,
.weekly tbody tr td {
  border: 1px solid #00398f
}

.weekly tbody tr td {
  background-color: #97c0ff14;
}

.chart-container {
  position: relative;
  z-index: 50 !important;
  height: 250px;
}

canvas {
  position: relative;
  z-index: 51 !important;
}

.top-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  /* ⭐ ให้อยู่เหนือทุกอย่าง */
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  /* ⭐ ไม่ block hover chart */
}

.top-labels .left,
.top-labels .right {
  width: 50%;
  text-align: center;
  font-weight: bold;
}

.top-labels::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: -100%;
  width: 1px;
  background: #000;
}