/** Shopify CDN: Minification failed

Line 232:42 Expected ":"

**/
/**
 * Coupon #2 - Flexbox Layout Rewrite
 */

.tpt-coupon-2 {
  box-sizing: border-box;
}

.tpt-coupon-2 *,
.tpt-coupon-2 *::after,
.tpt-coupon-2 *::before {
  box-sizing: border-box;
}

/* --- Main Container --- */
.tpt-coupon-2_container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tpt-coupon-2_coupon {
  position: relative;
  width: 100%;
  max-width: 34.125em; /* ~546px */
  margin: 1.25em 0;
  filter: drop-shadow(0 0.5em 1.5em rgba(0, 0, 0, 0.15));
  transition: all 0.3s ease;
}

.tpt-coupon-2_coupon:hover {
  transform: translateY(-0.125em);
  filter: drop-shadow(0 0.75em 2em rgba(0, 0, 0, 0.25));
}

/* --- Layer 1: SVG Background --- */
.coupon-svg__container {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}

.coupon-template-svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Color Overrides Logic */
.tpt-coupon-2[data-bg-type="solid"] .coupon-template-svg stop {
  stop-color: var(--coupon-bg-color) !important;
}

.tpt-coupon-2[data-bg-type="gradient"] .coupon-template-svg stop:first-child {
  stop-color: var(--coupon-bg-gradient-start) !important;
}

.tpt-coupon-2[data-bg-type="gradient"] .coupon-template-svg stop:last-child {
  stop-color: var(--coupon-bg-gradient-end) !important;
}

/* Specific ID targeting for compatibility */
.tpt-coupon-2[data-bg-type="solid"] [id^="coupon_gradient_type_"] stop {
  stop-color: var(--coupon-bg-color) !important;
}
.tpt-coupon-2[data-bg-type="gradient"] [id^="coupon_gradient_type_"] stop:first-child {
  stop-color: var(--coupon-bg-gradient-start) !important;
}
.tpt-coupon-2[data-bg-type="gradient"] [id^="coupon_gradient_type_"] stop:last-child {
  stop-color: var(--coupon-bg-gradient-end) !important;
}

/* --- Layer 2: Flexbox Overlay (The Magic) --- */
.tpt-coupon-2_layout-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 5;
}

/* Column 1: Text Content (Left) */
.tpt-coupon-2_col-text {
  flex: 0 0 70%; /* Chiếm 70% chiều rộng (khớp với thiết kế SVG) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 8%; /* Dùng % để scale đều */
  padding-right: 2%;
  gap: 0.375em;
}

.tpt-coupon-2_col-text.tpt-coupon-2_col-text--type_6 {
  flex: 0 0 65%;
}

/* Column 2: Separator (Middle) */
.tpt-coupon-2_col-separator {
  flex: 0 0 auto;
  width: 2px; /* Chiều rộng khu vực chứa đường kẻ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tpt-coupon-2_separator-line {
  width: 2px;
  height: 70%; /* Chiều cao đường kẻ so với coupon */
  background: linear-gradient(to bottom, 
    transparent 0%, 
    rgba(255, 255, 255, 0.6) 5%, 
    rgba(255, 255, 255, 0.6) 10%, 
    transparent 12%,
    transparent 18%,
    rgba(255, 255, 255, 0.6) 20%,
    rgba(255, 255, 255, 0.6) 25%,
    transparent 27%,
    transparent 33%,
    rgba(255, 255, 255, 0.6) 35%,
    rgba(255, 255, 255, 0.6) 40%,
    transparent 42%,
    transparent 48%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.6) 55%,
    transparent 57%,
    transparent 63%,
    rgba(255, 255, 255, 0.6) 65%,
    rgba(255, 255, 255, 0.6) 70%,
    transparent 72%,
    transparent 78%,
    rgba(255, 255, 255, 0.6) 80%,
    rgba(255, 255, 255, 0.6) 85%,
    transparent 87%,
    transparent 93%,
    rgba(255, 255, 255, 0.6) 95%,
    rgba(255, 255, 255, 0.6) 100%);
  opacity: 0.8;
}

/* Column 3: Button (Right) */
.tpt-coupon-2_col-button {
  flex: 1; /* Chiếm toàn bộ phần còn lại */
  display: flex;
  align-items: center;
  justify-content: center; /* TỰ ĐỘNG CĂN GIỮA NÚT */
  padding: 0 2%;
}

/* --- Typography Styles --- */
.tpt-coupon-2_main-text {
  font-size: var(--main-text-size, 1.75em);
  font-weight: 800;
  line-height: 1.1;
  color: var(--main-text-color, #FFFFFF);
  word-wrap: break-word;
  text-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, 0.3);
}

.tpt-coupon-2_subtitle-text {
  font-size: var(--subtitle-text-size, 1em);
  font-weight: 500;
  line-height: 1.2;
  color: var(--subtitle-text-color, #FFFFFF);
  text-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, 0.2);
}

.tpt-coupon-2_expiry-text {
  font-size: var(--expiry-text-size, 0.75em);
  font-weight: 400;
  line-height: 1.3;
  color: var(--expiry-text-color, #FFFFFF);
  font-style: italic;
  opacity: 0.9;
  text-shadow: 0 0.0625em 0.25em rgba(0, 0, 0, 0.2);
}

/* --- Button Styles --- */
.tpt-coupon-2_copy-button {
  background-color: var(--button-background-color, #F1C40F);
  color: var(--button-text-color, #2C3E50);
  font-size: calc(var(--button-text-size, 1em) * 0.85);
  font-weight: 700;
  padding: 0.5em 1em;
  border: none;
  border-radius: var(--button-border-radius, 0.5em);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  min-width: 4em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.375em;
  /* Đảm bảo nút không bị méo khi không gian hẹp */
  flex-shrink: 0; 
}

.tpt-coupon-2_copy-button svg {
  width: 0.875em;
  height: 0.875em;
  flex-shrink: 0;
}

.tpt-coupon-2_copy-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.tpt-coupon-2_copy-button:hover::before {a
  left: 100%;
}

.tpt-coupon-2_copy-button:hover {
  background-color: color-mix(in srgb, var(--button-background-color, #F1C40F) 85%, white 15%);
  transform: scale(1.05);
  box-shadow: 0 0.375em 0.75em rgba(0, 0, 0, 0.25);
}

.tpt-coupon-2_copy-button:active {
  transform: scale(0.98);
  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.2);
}


.tpt-coupon-2_col-button.tpt-coupon-2_col-button--type_2 {
   
   transform: translateX(-7%);
}
/* --- Responsive Design --- */

/* Large Desktop */
@media screen and (min-width: 80em) {
  .tpt-coupon-2_coupon {
    max-width: 37.125em;
  }
}

/* Tablet & Mobile (Adjust Flex Basis for SVG scaling) */
@media screen and (max-width: 79.9375em) {
  .tpt-coupon-2_copy-button{
    scale: 0.8;
    }
  .tpt-coupon-2_coupon {
    max-width: 31.125em;
  }
  .tpt-coupon-2_col-text.tpt-coupon-2_col-text--type_2{
    flex: 0 0 65%;
  }
  .tpt-coupon-2_main-text {
    font-size: calc(var(--main-text-size, 1.75em) * 0.9);
  }
  
  .tpt-coupon-2_subtitle-text {
    font-size: calc(var(--subtitle-text-size, 1em) * 0.9);
  }
  
  .tpt-coupon-2_expiry-text {
    font-size: calc(var(--expiry-text-size, 0.75em) * 0.9);
  }
}

/* Mobile (< 768px) */
@media screen and (max-width: 47.9375em) {
  .tpt-coupon-2_container {
    padding: 0 0.5em;
  }
  
  .tpt-coupon-2_coupon {
    max-width: 28.125em;
  }

  /* Điều chỉnh tỷ lệ cột khi SVG co lại trên mobile */
  .tpt-coupon-2_col-text {
    flex: 0 0 72%; 
    padding-left: 6%;
  }
  
  .tpt-coupon-2_main-text {
    font-size: calc(var(--main-text-size, 1.75em) * 0.8);
  }
  
  .tpt-coupon-2_copy-button {
    font-size: calc(var(--button-text-size, 1em) * 0.75);
    padding: 0.35em 0.7em;
  }
}

/* Small Mobile (< 480px) */
@media screen and (max-width: 29.9375em) {
  .tpt-coupon-2_coupon {
    max-width: 25em;
  }

  /* Điều chỉnh tỷ lệ cột cho màn hình nhỏ */
  .tpt-coupon-2_col-text {
    flex: 0 0 70%;
    padding-left: 5%;
  }
  
  .tpt-coupon-2_main-text {
    font-size: calc(var(--main-text-size, 1.75em) * 0.7);
  }
  
  .tpt-coupon-2_copy-button {
    font-size: calc(var(--button-text-size, 1em) * 0.7);
    padding: 0.3em 0.6em;
    min-width: 3em;
  }
}

/* Very Small Mobile (< 384px) */
@media screen and (max-width: 23.9375em) {
  .tpt-coupon-2_coupon {
    max-width: 22em;
  }
  
  .tpt-coupon-2_col-text {
    flex: 0 0 70%;
  }

  .tpt-coupon-2_main-text {
    font-size: calc(var(--main-text-size, 1.75em) * 0.6);
  }
  
  .tpt-coupon-2_copy-button {
    font-size: calc(var(--button-text-size, 1em) * 0.65);
    padding: 0.25em 0.5em;
    min-width: 2.5em;
  }
}

/* Ultra Small (< 300px) - Fallback layout */
@media screen and (max-width: 18.75em) {
  .tpt-coupon-2_layout-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .tpt-coupon-2_col-text {
    flex: 0 0 auto;
    width: 100%;
    padding: 0.5em;
    align-items: center;
  }
  
  .tpt-coupon-2_col-separator {
    display: none;
  }
  
  .tpt-coupon-2_col-button {
    flex: 0 0 auto;
    width: 100%;
    padding-bottom: 1em;
  }
}

/* --- Accessibility & Print --- */
@media (prefers-reduced-motion: reduce) {
  .tpt-coupon-2_coupon,
  .tpt-coupon-2_copy-button,
  .tpt-coupon-2_copy-button::before {
    transition: none;
  }
  .tpt-coupon-2_coupon:hover { transform: none; }
}

@media print {
  .tpt-coupon-2_coupon { filter: none !important; break-inside: avoid; }
  .tpt-coupon-2_copy-button { 
    background: white !important; 
    color: black !important; 
    border: 1px solid black !important; 
    box-shadow: none !important;
  }
}

/* Fallback for color-mix */
@supports not (background-color: color-mix(in srgb, #F1C40F 85%, white 15%)) {
  .tpt-coupon-2_copy-button:hover {
    filter: brightness(1.15);
  }
}