/* ==========================================================================
   NLICT Coupon
   Bố cục ba cột: mức giảm, nội dung, nút lấy mã.
   Màu nhấn lấy từ --cp-accent, đổi trong phần Cài đặt.
   ========================================================================== */

:root { --cp-accent: #e8542f; }

.cp-list {
  --_ink:   var(--ink, #16233d);
  --_soft:  var(--ink-soft, #55617a);
  --_muted: var(--muted, #7b869b);
  --_line:  var(--line, #e2e6ec);
  --_paper: var(--paper, #fff);
  --_surf:  var(--surface, #f5f6f8);
  --_radius: var(--radius, 10px);

  margin: 28px 0;
}

.cp-list__title { font-size: 20px; margin: 0 0 16px; }

.cp-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: var(--_paper, #fff);
  border: 1px solid var(--_line, #e2e6ec);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.cp-row:hover { border-color: color-mix(in srgb, var(--cp-accent) 45%, transparent); }

/* Cột trái: logo phía trên, mức giảm phía dưới */
.cp-row__side { display: grid; gap: 8px; justify-items: center; }

.cp-row__logo img {
  max-width: 100%; max-height: 34px; width: auto; height: auto;
  object-fit: contain; display: block;
}

/* Mức giảm: chữ lớn, là thứ mắt bắt vào đầu tiên */
.cp-row__label {
  display: block;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: var(--cp-accent); text-align: center;
}

/* Không logo, không mức giảm thì bỏ hẳn cột trái */
.cp-row--bare { grid-template-columns: minmax(0, 1fr) auto; }

.cp-row__title {
  font-size: 16px; font-weight: 600; line-height: 1.45;
  margin: 0 0 8px; color: var(--_ink, #16233d);
}

.cp-row__meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }

.cp-tag { font-size: 12.5px; color: var(--_muted, #7b869b); display: inline-flex; align-items: center; gap: 5px; }
.cp-tag--ok { color: #12805c; }
.cp-tag--ok::before { content: "\2713"; font-weight: 700; }
.cp-tag--soon { color: var(--cp-accent); font-weight: 600; }

.cp-row__act { display: grid; gap: 6px; justify-items: stretch; }

/* --- Nút lấy mã: kiểu vé xé, đuôi mã lộ ra bên phải --- */
.cp-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 168px; padding: 0 16px 0 18px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--cp-accent); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; overflow: hidden;
}
.cp-list .cp-btn, .cp-row .cp-btn { text-decoration: none; color: #fff; }
.cp-btn:hover { filter: brightness(1.06); }

/* Phần đuôi mã: nền mờ hơn, có đường răng cưa ngăn cách */
.cp-btn__tail {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; padding: 0 12px;
  background: rgba(255, 255, 255, .22);
  font-size: 13px; letter-spacing: .06em;
  border-left: 2px dashed rgba(255, 255, 255, .6);
}
.cp-btn__text { padding-right: 46px; }
.cp-btn__tail:empty { display: none; }
.cp-btn__tail:empty + .cp-btn__text,
.cp-btn--deal .cp-btn__text { padding-right: 0; }

/* Sau khi bấm: nút thành ô mã nét đứt, đọc và chép lại được */
.cp-btn.is-open {
  background: var(--_surf, #f5f6f8);
  color: var(--_ink, #16233d);
  border: 2px dashed var(--cp-accent);
  text-transform: none;
}
.cp-list .cp-btn.is-open { color: var(--_ink, #16233d); }
.cp-btn__code { font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.cp-btn.is-flash { background: color-mix(in srgb, var(--cp-accent) 16%, transparent); }

.cp-row__hint { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: #12805c; }

/* --- Chi tiết mở ra --- */
.cp-row__more { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--_line, #e2e6ec); padding-top: 10px; }
.cp-row__more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--_soft, #55617a); list-style: none; }
.cp-row__more summary::-webkit-details-marker { display: none; }
.cp-row__more summary::after { content: " \25BE"; }
.cp-row__more[open] summary::after { content: " \25B4"; }
.cp-row__terms { padding-top: 10px; font-size: 14.5px; color: var(--_soft, #55617a); }
.cp-row__terms ul { margin: 0 0 8px; padding-left: 1.15em; }
.cp-row__terms li { margin-bottom: 5px; }
.cp-row__terms p { margin: 0 0 8px; }

.cp-list__note { font-size: 12.5px; color: var(--_muted, #7b869b); margin: 14px 0 0; }

/* Ưu đãi không cần mã: bỏ cột mức giảm nếu để trống */
.cp-row--deal .cp-btn { min-width: 148px; }

@media (max-width: 720px) {
  .cp-row { grid-template-columns: 1fr auto; gap: 12px 14px; padding: 16px; }
  .cp-row__label { grid-column: 1 / -1; text-align: left; font-size: 19px; }
  .cp-row__act { grid-column: 1 / -1; }
  .cp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-btn { transition: none; }
}