/* =======================================================
   HTP GLOBAL.CSS - STABLE BASE
   Version 1.3.0

   Nguyên tắc:
   - Global chỉ khai báo biến, body, link, button, layout guard.
   - Không ép font-weight heading toàn site.
   - Font từng template/page tự quản để tránh override lặp.
======================================================= */

:root {
  --htp-red: #e30613;
  --htp-red-2: #ed1c24;
  --htp-red-dark: #b9000b;
  --htp-black: #050505;
  --htp-navy: #132338;
  --htp-blue: #629de7;
  --htp-white: #ffffff;
  --htp-text: #1d1d1f;
  --htp-muted: #666666;
  --htp-border: #e5e5e5;
  --htp-bg: #f5f6f8;
  --htp-container: 1350px;
  --htp-radius: 5px;
  --htp-font-heading: 'Anton', Arial, sans-serif;
  --htp-font-body: 'Lato', Arial, sans-serif;
}

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--htp-bg);
  color: var(--htp-text);
  font-family: var(--htp-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

body,
button,
input,
select,
textarea {
  font-family: var(--htp-font-body);
}

a {
  color: var(--htp-red);
  text-decoration: none;
}

a:hover {
  color: var(--htp-red-dark);
}

.htp-container,
.site.grid-container,
.inside-article,
.woocommerce .site-main {
  max-width: var(--htp-container);
}

#page,
.site,
.site-content,
.content-area,
.site-main,
.htp-homepage,
.htp-solution-page,
.htp-single-product,
.htp-product-archive,
.htp-cart-page,
.htp-checkout-page {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

button,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: var(--htp-radius);
  font-family: var(--htp-font-heading);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.htp-home-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

.htp-home-hero__badges span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--htp-radius);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family: var(--htp-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.htp-cart-summary .wc-proceed-to-checkout a.checkout-button,
.htp-cart-checkout-direct,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  border: 0;
  background: var(--htp-red);
  color: #fff;
  font-family: var(--htp-font-heading);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}

.woocommerce #payment #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.htp-cart-checkout-direct:hover {
  background: var(--htp-red-dark);
  color: #fff;
}

@media (max-width: 767px) {
  html, body, #page, .site, .site-content, .content-area, main {
    max-width: 100%;
    overflow-x: hidden;
  }

  .htp-home-hero__badges span {
    flex: 0 1 auto;
    font-size: 14px;
  }
}

/* =========================================================
   HTP Quick Quote Popup + Thank You Page
========================================================= */
html.htp-quote-modal-open,
body.htp-quote-modal-open { overflow: hidden; }
.htp-quote-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 18px; overflow: hidden; }
.htp-quote-modal.is-open { display: flex; }
.htp-quote-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 7, 12, .78); backdrop-filter: blur(3px); }
.htp-quote-modal__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: 330px minmax(0, 1fr); width: min(100%, 1060px); max-height: calc(100dvh - 36px); overflow: auto; overflow-x: hidden; border: 1px solid rgba(237, 28, 36, .55); border-radius: 5px; background: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.36); }
.htp-quote-modal__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border: 1px solid #d9dde4; border-radius: 50%; background: #fff; color: #111; font-size: 30px; line-height: 1; cursor: pointer; }
.htp-quote-modal__brand { position: relative; min-height: 560px; padding: 34px 30px; overflow: hidden; color: #fff; background: linear-gradient(135deg, rgba(175,0,10,.98), rgba(80,0,8,.98)); }
.htp-quote-modal__brand:before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 32%, rgba(255,255,255,.08) 68%, transparent 69%); pointer-events: none; }
.htp-quote-modal__logo, .htp-quote-modal__headline, .htp-quote-modal__brand p, .htp-quote-modal__brand ul { position: relative; z-index: 1; }
.htp-quote-modal__logo { display: flex; align-items: center; gap: 14px; margin-bottom: 42px; text-transform: uppercase; }
.htp-quote-modal__logo span { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 5px; background: #fff; color: #d70b18; font: 400 18px/1 var(--htp-font-heading, Anton, Arial, sans-serif); }
.htp-quote-modal__logo strong { font: 700 18px/1.12 var(--htp-font-body, Lato, Arial, sans-serif); letter-spacing: .06em; }
.htp-quote-modal__headline span, .htp-quote-modal__headline em { display: block; font: 400 28px/1 var(--htp-font-heading, Anton, Arial, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.htp-quote-modal__headline strong { display: block; margin: 8px 0 12px; font: 400 clamp(54px, 5.2vw, 78px)/.9 var(--htp-font-heading, Anton, Arial, sans-serif); letter-spacing: .04em; text-transform: uppercase; }
.htp-quote-modal__headline em { font-style: normal; }
.htp-quote-modal__brand p { max-width: 280px; margin: 18px 0 26px; color: rgba(255,255,255,.9); font: 600 15px/1.55 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-quote-modal__brand ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.htp-quote-modal__brand li { display: grid; grid-template-columns: 42px 1fr; column-gap: 13px; align-items: center; }
.htp-quote-modal__brand li span { grid-row: 1/3; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #d90d18; font-weight: 700; }
.htp-quote-modal__brand li b { color: #fff; font: 700 15px/1.25 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-quote-modal__brand li small { color: rgba(255,255,255,.82); font: 500 13px/1.3 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-quote-modal__formwrap { min-width: 0; padding: 34px 38px 30px; }
.htp-quote-modal__formwrap header { margin: 0 0 18px; text-align: center; }
.htp-quote-modal__formwrap h2 { margin: 0 0 6px; color: #221b1b; font: 400 30px/1.08 var(--htp-font-heading, Anton, Arial, sans-serif); letter-spacing: .045em; text-transform: uppercase; }
.htp-quote-modal__formwrap p { margin: 0; color: #606774; font: 500 15px/1.5 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-quote-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.htp-quote-form label { display: grid; gap: 8px; min-width: 0; color: #15191f; font: 700 14px/1.2 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-quote-form label em { color: #e8121e; font-style: normal; }
.htp-quote-form input, .htp-quote-form select, .htp-quote-form textarea { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #d8dde5; border-radius: 5px; background: #fff; color: #111827; padding: 0 14px; font: 500 15px/1.3 var(--htp-font-body, Lato, Arial, sans-serif); outline: none; }
.htp-quote-form textarea { min-height: 74px; max-height: 110px; padding-top: 12px; resize: vertical; }
.htp-quote-form input:focus, .htp-quote-form select:focus, .htp-quote-form textarea:focus { border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.16); }
.htp-quote-form__message { margin-top: 13px; }
.htp-quote-form__trust { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin: 16px 0; overflow: hidden; border-radius: 5px; background: #f4dfe1; }
.htp-quote-form__trust div { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: center; padding: 12px; background: #fff3f4; }
.htp-quote-form__trust span { grid-row: 1/3; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #c50915; color: #fff; font-weight: 700; }
.htp-quote-form__trust b { color: #c50915; font: 700 14px/1.2 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-quote-form__trust small { color: #555; font: 500 12px/1.3 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-quote-form__submit { width: 100%; min-height: 52px; border: 0; border-radius: 5px; background: linear-gradient(90deg, #d50614, #ed1c24); color: #fff; cursor: pointer; font: 400 20px/1 var(--htp-font-heading, Anton, Arial, sans-serif); letter-spacing: .04em; text-transform: uppercase; }
.htp-quote-form__note { margin: 15px 0 0; text-align: center; color: #6b7280; font-size: 13px; }

.htp-thankyou-page { width: 100%; overflow: hidden; background: #f5f6f8; }
.htp-thankyou-container { width: min(100% - 32px, 1180px); margin: 0 auto; }
.htp-thankyou-hero { min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 56px 16px 86px; color: #fff; text-align: center; background: linear-gradient(rgba(0,0,0,.66), rgba(0,0,0,.72)), url('https://hungthinhpack.com/wp-content/uploads/2026/04/Hung-Thinh-Global-Pack.jpg') center/cover no-repeat; }
.htp-thankyou-hero__icon { width: 78px; height: 78px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; border: 6px solid #fff; border-radius: 50%; background: #cf101b; font-size: 42px; font-weight: 700; }
.htp-thankyou-hero h1 { margin: 0 0 10px; color: #fff; font: 700 clamp(28px, 4vw, 48px)/1.15 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-hero p, .htp-thankyou-hero span { display: block; margin: 0; color: rgba(255,255,255,.92); font: 600 16px/1.6 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-card { position: relative; margin-top: -54px; padding: 30px 34px 34px; border-radius: 5px; background: #fff; box-shadow: 0 18px 54px rgba(15,23,42,.12); }
.htp-thankyou-card h2 { margin: 0 0 18px; color: #111827; font: 700 20px/1.3 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #e2e7ee; border-radius: 5px; overflow: hidden; }
.htp-thankyou-summary div { display: grid; grid-template-columns: 44px 1fr; gap: 8px 14px; align-items: center; padding: 18px 22px; border-right: 1px solid #e2e7ee; }
.htp-thankyou-summary div:last-child { border-right: 0; }
.htp-thankyou-summary__icon { grid-row: 1/3; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #d50916; border: 1px solid #f1c3c7; font-weight: 700; }
.htp-thankyou-summary__icon.is-green, .htp-thankyou-summary strong.is-green { color: #11943a; }
.htp-thankyou-summary p { margin: 0; color: #667085; font: 600 13px/1.2 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-summary strong { color: #111827; font: 700 15px/1.25 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-order { margin-top: 22px; padding: 20px; border: 1px solid #edf0f4; border-radius: 5px; background: #fbfcfd; }
.htp-thankyou-order h3 { margin: 0 0 12px; font: 700 18px/1.3 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-order__grid { display: grid; gap: 8px; }
.htp-thankyou-order__item { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #e8edf3; font-weight: 700; }
.htp-thankyou-total { margin: 14px 0 0; text-align: right; }
.htp-thankyou-total strong { color: #e81722; font-size: 20px; }
.htp-thankyou-contacted { color: #667085; }
.htp-thankyou-next { margin-top: 26px; }
.htp-thankyou-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.htp-thankyou-next__grid div { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 10px 18px; align-items: center; padding: 18px; }
.htp-thankyou-next__grid i { grid-row: 1/3; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid #f3d3d6; background: #fff6f7; color: #d50916; font: 700 26px/1 var(--htp-font-body, Lato, Arial, sans-serif); font-style: normal; }
.htp-thankyou-next__grid b { color: #111827; font: 700 15px/1.3 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-next__grid span { color: #667085; font: 500 14px/1.45 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-support { margin-top: 24px; padding: 22px; border: 1px solid #f1c3c7; border-radius: 5px; background: #fff4f5; }
.htp-thankyou-support h3 { margin: 0 0 8px; color: #c50915; font: 700 20px/1.2 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-support p { margin: 0 0 12px; color: #555; }
.htp-thankyou-support a { display: inline-flex; margin-right: 18px; color: #c50915; font-weight: 700; text-decoration: none; }
.htp-thankyou-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.htp-thankyou-actions a { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d4dae3; border-radius: 5px; color: #1f2937; text-decoration: none; font: 700 14px/1 var(--htp-font-body, Lato, Arial, sans-serif); text-transform: uppercase; }
.htp-thankyou-actions a:last-child { border-color: #c50915; background: #c50915; color: #fff; }
.htp-thankyou-related { padding: 30px 0 42px; }
.htp-thankyou-related header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.htp-thankyou-related h2 { margin: 0; font: 700 18px/1.3 var(--htp-font-body, Lato, Arial, sans-serif); }
.htp-thankyou-related header a { color: #111; text-decoration: none; font-weight: 700; }
.htp-thankyou-related__slider { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.htp-thankyou-related__item { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid #e5e9f0; border-radius: 5px; background: #fff; text-decoration: none; color: #111; }
.htp-thankyou-related__item img { width: 86px; height: 58px; object-fit: cover; }
.htp-thankyou-related__item span { font: 700 13px/1.35 var(--htp-font-body, Lato, Arial, sans-serif); }
@media (max-width: 980px) {
  .htp-quote-modal__dialog { grid-template-columns: 1fr; width: min(100%, 720px); }
  .htp-quote-modal__brand { display: none; }
  .htp-quote-modal__formwrap { padding: 32px 24px 24px; }
  .htp-quote-form__trust { grid-template-columns: 1fr; }
  .htp-thankyou-summary { grid-template-columns: repeat(2, 1fr); }
  .htp-thankyou-summary div:nth-child(2) { border-right: 0; }
  .htp-thankyou-next__grid { grid-template-columns: 1fr; }
  .htp-thankyou-related__slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .htp-thankyou-related__item { flex: 0 0 250px; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .htp-quote-modal { padding: 8px; align-items: center; justify-content: center; }
  .htp-quote-modal__dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); border-radius: 5px; }
  .htp-quote-modal__close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 28px; background: #fff; }
  .htp-quote-modal__formwrap { padding: 44px 14px 16px; }
  .htp-quote-modal__formwrap header { margin-bottom: 12px; }
  .htp-quote-modal__formwrap h2 { font-size: 26px; line-height: 1.05; }
  .htp-quote-modal__formwrap p { font-size: 13px; }
  .htp-quote-form__grid { grid-template-columns: 1fr; gap: 10px; }
  .htp-quote-form label { gap: 6px; font-size: 13px; }
  .htp-quote-form input, .htp-quote-form select { min-height: 44px; font-size: 14px; }
  .htp-quote-form textarea { min-height: 56px; max-height: 74px; font-size: 14px; }
  .htp-quote-form__message { margin-top: 10px; }
  .htp-quote-form__trust { display: none; }
  .htp-quote-form__submit { min-height: 48px; font-size: 18px; position: sticky; bottom: 0; z-index: 2; }
  .htp-quote-form__note { margin-top: 8px; font-size: 12px; }
  .htp-thankyou-hero { min-height: 260px; padding-bottom: 70px; }
  .htp-thankyou-card { width: calc(100% - 24px); padding: 22px 16px; }
  .htp-thankyou-summary { grid-template-columns: 1fr; }
  .htp-thankyou-summary div { border-right: 0; border-bottom: 1px solid #e2e7ee; }
  .htp-thankyou-summary div:last-child { border-bottom: 0; }
  .htp-thankyou-actions { grid-template-columns: 1fr; gap: 10px; }
}

/* Quote popup responsive hardening */
.htp-quote-modal__dialog,
.htp-quote-modal__formwrap,
.htp-quote-form,
.htp-quote-form__grid,
.htp-quote-form label { min-width: 0; }
.htp-quote-form textarea { overflow: auto; }
@media (max-width: 420px) {
  .htp-quote-modal { padding: 6px; }
  .htp-quote-modal__formwrap { padding-left: 12px; padding-right: 12px; }
  .htp-quote-modal__formwrap h2 { font-size: 24px; }
  .htp-quote-form input, .htp-quote-form select, .htp-quote-form textarea { padding-left: 12px; padding-right: 12px; }
}


/* =========================================================
   HTP Quick Quote Popup - mobile compact fix
   - Removed product interest + quantity fields from template.
   - Keep popup short and usable on real mobile browser chrome.
========================================================= */
@media (max-width: 640px) {
  .htp-quote-modal {
    padding: 6px;
    align-items: center;
  }

  .htp-quote-modal__dialog {
    max-height: calc(100dvh - 12px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .htp-quote-modal__formwrap {
    padding: 38px 12px 12px;
  }

  .htp-quote-modal__formwrap header {
    margin-bottom: 10px;
  }

  .htp-quote-modal__formwrap h2 {
    font-size: 24px;
    line-height: 1.02;
  }

  .htp-quote-modal__formwrap p {
    font-size: 13px;
    line-height: 1.35;
  }

  .htp-quote-form__grid {
    gap: 8px;
  }

  .htp-quote-form label {
    gap: 5px;
  }

  .htp-quote-form input,
  .htp-quote-form select {
    min-height: 42px;
  }

  .htp-quote-form textarea {
    min-height: 68px;
    max-height: 92px;
  }

  .htp-quote-form__submit {
    min-height: 48px;
    margin-top: 10px;
    position: sticky;
    bottom: 0;
  }

  .htp-quote-form__note {
    display: none;
  }
}


/* =========================================================
   HTP Icon System - centralized SVG files from assets/icons
========================================================= */
.htp-icon {
	display: inline-block;
	width: 34px;
	height: 34px;
	object-fit: contain;
	flex: 0 0 auto;
	vertical-align: middle;
}

.htp-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(215, 25, 32, 0.08);
}

.htp-icon-wrap .htp-icon {
	width: 34px;
	height: 34px;
}

.htp-icon--check,
.htp-icon--star {
	width: 20px;
	height: 20px;
}

.htp-action-icon .htp-icon,
.htp-offcanvas-contact .htp-icon {
	width: 24px;
	height: 24px;
}

.htp-footer-box__social .htp-icon {
	width: 32px;
	height: 32px;
	max-width: 32px;
	max-height: 32px;
	object-fit: contain;
}

.htp-search-submit .htp-icon {
	width: 22px;
	height: 22px;
}

.htp-offcanvas-close .htp-icon,
.htp-filter-panel__head button .htp-icon,
.htp-quote-modal__close .htp-icon {
	width: 18px;
	height: 18px;
}

.htp-product-highlight-grid .htp-icon,
.htp-product-benefits .htp-icon,
.htp-archive-features .htp-icon,
.htp-commerce-benefits .htp-icon {
	width: 45px;
	height: 45px;
}


/* =========================================================
   HTP final icon + quote button normalization
========================================================= */
.htp-icon {
  display: inline-block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  vertical-align: middle;
  flex: 0 0 auto;
}

.htp-action-icon .htp-icon,
.htp-icon--header-action { width: 30px; height: 30px; }
.htp-contact-info__icon .htp-icon { width: 34px; height: 34px; object-fit: contain; }
.htp-footer-box__social .htp-icon { width: 32px; height: 32px; max-width: 32px; max-height: 32px; object-fit: contain; filter: brightness(0) invert(1); opacity: 1; }
.htp-footer-box__contact-list .htp-icon { width: 18px; height: 18px; }

/* Dark sections: icon must be white, not red/black. */
.htp-contact-info__icon .htp-icon,
.htp-contact-info__icon img,
.htp-footer-box .htp-icon,
.htp-footer-box img.htp-icon,
.htp-footer-box__contact-list .htp-icon,
.htp-footer-box__contact-list img,
.htp-quote-modal__brand .htp-icon,
.htp-offcanvas-panel .htp-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}


/* Capacity strip: keep HTP red/dark icon, slightly larger. */
.htp-home-capacity__icon .htp-icon,
.htp-home-capacity__icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Quote/request CTAs: text button + long sharp arrow, no old quote icon. */
.htp-btn-arrow { display: none; }
.htp-quote-btn .htp-icon,
.htp-home-btn--quote .htp-icon,
a[data-htp-quote-open] .htp-icon--quote,
.htp-icon--quote-btn { display: none; }

.htp-quote-btn,
.htp-home-btn--quote,
.htp-shop-quote-btn,
.htp-featured-product-card__cta,
.htp-related-product-card__btn,
.htp-product-outline-btn,
.htp-contact-info__cta,
.htp-contact-form__submit,
.htp-quote-form__submit,
.htp-shop-quote-band a,
.htp-product-quote,
.htp-offcanvas-cta a,
.htp-sol-btn--primary,
.htp-sol-cta-submit,
.htp-contact-page-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.htp-quote-btn::before,
.htp-home-btn--quote::before,
.htp-shop-quote-btn::before,
.htp-featured-product-card__cta::before,
.htp-related-product-card__btn::before,
.htp-product-outline-btn::before,
.htp-contact-info__cta::before,
.htp-contact-form__submit::before,
.htp-quote-form__submit::before,
.htp-shop-quote-band a::before,
.htp-product-quote::before,
.htp-offcanvas-cta a::before,
.htp-sol-btn--primary::before,
.htp-sol-cta-submit::before,
.htp-contact-page-submit::before {
  content: "➤";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin-right: 8px;
  flex: 0 0 auto;
  color: currentColor;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-family: Arial, sans-serif;
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}

.htp-quote-btn::after,
.htp-home-btn--quote::after,
.htp-shop-quote-btn::after,
.htp-featured-product-card__cta::after,
.htp-related-product-card__btn::after,
.htp-product-outline-btn::after,
.htp-contact-info__cta::after,
.htp-contact-form__submit::after,
.htp-quote-form__submit::after,
.htp-shop-quote-band a::after,
.htp-product-quote::after,
.htp-offcanvas-cta a::after,
.htp-sol-btn--primary::after,
.htp-sol-cta-submit::after,
.htp-contact-page-submit::after { content: none; }


/* Zalo technical CTA also uses the old sharp arrow. */
.htp-home-btn--zalo::before,
.htp-sol-btn--outline::before {
  content: "➤";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: currentColor;
  font-family: Arial, sans-serif;
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}
.htp-home-btn--zalo .htp-home-btn__icon { display: none; }

/* Home hero quote button should behave like quote popup trigger. */
.htp-home-btn--quote { text-decoration: none; }

@media (max-width: 768px) {
  .htp-action-icon .htp-icon,
  .htp-icon--header-action { width: 26px; height: 26px; }
}

/* =========================================================
   HTP CTA Arrow Alignment Fix
   Keep text visually centered; arrow is decorative and independent.
========================================================= */
.htp-quote-btn,
.htp-home-btn--quote,
.htp-shop-quote-btn,
.htp-featured-product-card__cta,
.htp-related-product-card__btn,
.htp-product-outline-btn,
.htp-contact-info__cta,
.htp-contact-form__submit,
.htp-quote-form__submit,
.htp-shop-quote-band a,
.htp-product-quote,
.htp-offcanvas-cta a,
.htp-sol-btn--primary,
.htp-sol-cta-submit,
.htp-contact-page-submit,
.htp-home-btn--zalo,
.htp-sol-btn--outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.htp-quote-btn::before,
.htp-home-btn--quote::before,
.htp-shop-quote-btn::before,
.htp-featured-product-card__cta::before,
.htp-related-product-card__btn::before,
.htp-product-outline-btn::before,
.htp-contact-info__cta::before,
.htp-contact-form__submit::before,
.htp-quote-form__submit::before,
.htp-shop-quote-band a::before,
.htp-product-quote::before,
.htp-offcanvas-cta a::before,
.htp-sol-btn--primary::before,
.htp-sol-cta-submit::before,
.htp-contact-page-submit::before,
.htp-home-btn--zalo::before,
.htp-sol-btn--outline::before {
  content: "➤";
  position: absolute;
  left: clamp(18px, 21%, 76px);
  top: 50%;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  color: currentColor;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-family: Arial, sans-serif;
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.htp-quote-btn::after,
.htp-home-btn--quote::after,
.htp-shop-quote-btn::after,
.htp-featured-product-card__cta::after,
.htp-related-product-card__btn::after,
.htp-product-outline-btn::after,
.htp-contact-info__cta::after,
.htp-contact-form__submit::after,
.htp-quote-form__submit::after,
.htp-shop-quote-band a::after,
.htp-product-quote::after,
.htp-offcanvas-cta a::after,
.htp-sol-btn--primary::after,
.htp-sol-cta-submit::after,
.htp-contact-page-submit::after,
.htp-home-btn--zalo::after,
.htp-sol-btn--outline::after {
  content: none;
}

.htp-quote-btn .htp-btn-arrow,
.htp-home-btn--quote .htp-btn-arrow,
.htp-shop-quote-btn .htp-btn-arrow,
.htp-featured-product-card__cta .htp-btn-arrow,
.htp-related-product-card__btn .htp-btn-arrow,
.htp-product-outline-btn .htp-btn-arrow,
.htp-contact-info__cta .htp-btn-arrow,
.htp-product-quote .htp-btn-arrow,
.htp-offcanvas-cta .htp-btn-arrow,
.htp-home-btn--zalo .htp-btn-arrow,
.htp-sol-btn--outline .htp-btn-arrow {
  display: none;
}

@media (max-width: 768px) {
  .htp-quote-btn::before,
  .htp-home-btn--quote::before,
  .htp-shop-quote-btn::before,
  .htp-featured-product-card__cta::before,
  .htp-related-product-card__btn::before,
  .htp-product-outline-btn::before,
  .htp-contact-info__cta::before,
  .htp-contact-form__submit::before,
  .htp-quote-form__submit::before,
  .htp-shop-quote-band a::before,
  .htp-product-quote::before,
  .htp-offcanvas-cta a::before,
  .htp-sol-btn--primary::before,
  .htp-sol-cta-submit::before,
  .htp-contact-page-submit::before,
  .htp-home-btn--zalo::before,
  .htp-sol-btn--outline::before {
    left: clamp(14px, 17%, 54px);
  }
}


/* =========================================================
   FINAL FIX - CTA arrow alignment
   Text stays centered. Arrow is decorative, absolute and does not push text.
========================================================= */
.htp-quote-btn,
.htp-home-btn--quote,
.htp-shop-quote-btn,
.htp-featured-product-card__cta,
.htp-related-product-card__btn,
.htp-product-outline-btn,
.htp-contact-info__cta,
.htp-contact-form__submit,
.htp-quote-form__submit,
.htp-shop-quote-band a,
.htp-product-quote,
.htp-offcanvas-cta a,
.htp-sol-btn--primary,
.htp-sol-cta-submit,
.htp-contact-page-submit,
.htp-home-btn--zalo,
.htp-sol-btn--outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.htp-quote-btn::before,
.htp-home-btn--quote::before,
.htp-shop-quote-btn::before,
.htp-featured-product-card__cta::before,
.htp-related-product-card__btn::before,
.htp-product-outline-btn::before,
.htp-contact-info__cta::before,
.htp-contact-form__submit::before,
.htp-quote-form__submit::before,
.htp-shop-quote-band a::before,
.htp-product-quote::before,
.htp-offcanvas-cta a::before,
.htp-sol-btn--primary::before,
.htp-sol-cta-submit::before,
.htp-contact-page-submit::before,
.htp-home-btn--zalo::before,
.htp-sol-btn--outline::before {
  content: "➤";
  position: absolute;
  left: clamp(18px, 20%, 76px);
  top: 50%;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  color: currentColor;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-family: Arial, sans-serif;
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.htp-quote-btn::after,
.htp-home-btn--quote::after,
.htp-shop-quote-btn::after,
.htp-featured-product-card__cta::after,
.htp-related-product-card__btn::after,
.htp-product-outline-btn::after,
.htp-contact-info__cta::after,
.htp-contact-form__submit::after,
.htp-quote-form__submit::after,
.htp-shop-quote-band a::after,
.htp-product-quote::after,
.htp-offcanvas-cta a::after,
.htp-sol-btn--primary::after,
.htp-sol-cta-submit::after,
.htp-contact-page-submit::after,
.htp-home-btn--zalo::after,
.htp-sol-btn--outline::after {
  content: none;
}

.htp-quote-btn .htp-btn-arrow,
.htp-home-btn--quote .htp-btn-arrow,
.htp-shop-quote-btn .htp-btn-arrow,
.htp-featured-product-card__cta .htp-btn-arrow,
.htp-related-product-card__btn .htp-btn-arrow,
.htp-product-outline-btn .htp-btn-arrow,
.htp-contact-info__cta .htp-btn-arrow,
.htp-contact-form__submit .htp-btn-arrow,
.htp-quote-form__submit .htp-btn-arrow,
.htp-product-quote .htp-btn-arrow,
.htp-offcanvas-cta .htp-btn-arrow,
.htp-home-btn--zalo .htp-btn-arrow,
.htp-sol-btn--outline .htp-btn-arrow {
  display: none;
}

/* Dark contact/footer icon color: force white where the background is dark. */
.htp-contact-info__icon,
.htp-contact-info__icon .htp-icon,
.htp-contact-info__icon img,
.htp-contact-info__icon svg,
.htp-footer .htp-icon,
.htp-footer img.htp-icon,
.htp-footer svg {
  color: #fff;
  filter: brightness(0) invert(1);
  opacity: 1;
}

@media (max-width: 768px) {
  .htp-quote-btn::before,
  .htp-home-btn--quote::before,
  .htp-shop-quote-btn::before,
  .htp-featured-product-card__cta::before,
  .htp-related-product-card__btn::before,
  .htp-product-outline-btn::before,
  .htp-contact-info__cta::before,
  .htp-contact-form__submit::before,
  .htp-quote-form__submit::before,
  .htp-shop-quote-band a::before,
  .htp-product-quote::before,
  .htp-offcanvas-cta a::before,
  .htp-sol-btn--primary::before,
  .htp-sol-cta-submit::before,
  .htp-contact-page-submit::before,
  .htp-home-btn--zalo::before,
  .htp-sol-btn--outline::before {
    left: clamp(14px, 17%, 54px);
  }
}

/* =========================================================
   FINAL FIX: Remove CTA arrows everywhere except header quote
   User request: only header "Nhận báo giá" keeps ➤ arrow.
========================================================= */
.htp-home-btn--quote::before,
.htp-shop-quote-btn::before,
.htp-featured-product-card__cta::before,
.htp-related-product-card__btn::before,
.htp-product-outline-btn::before,
.htp-contact-info__cta::before,
.htp-contact-form__submit::before,
.htp-quote-form__submit::before,
.htp-shop-quote-band a::before,
.htp-product-quote::before,
.htp-offcanvas-cta a::before,
.htp-sol-btn--primary::before,
.htp-sol-cta-submit::before,
.htp-contact-page-submit::before,
.htp-home-btn--zalo::before,
.htp-sol-btn--outline::before,
.single_add_to_cart_button::before,
button[type="submit"]::before {
  content: none;
  display: none;
}

.htp-home-btn--quote .htp-btn-arrow,
.htp-shop-quote-btn .htp-btn-arrow,
.htp-featured-product-card__cta .htp-btn-arrow,
.htp-related-product-card__btn .htp-btn-arrow,
.htp-product-outline-btn .htp-btn-arrow,
.htp-contact-info__cta .htp-btn-arrow,
.htp-contact-form__submit .htp-btn-arrow,
.htp-quote-form__submit .htp-btn-arrow,
.htp-shop-quote-band a .htp-btn-arrow,
.htp-product-quote .htp-btn-arrow,
.htp-offcanvas-cta .htp-btn-arrow,
.htp-sol-btn--primary .htp-btn-arrow,
.htp-sol-cta-submit .htp-btn-arrow,
.htp-contact-page-submit .htp-btn-arrow,
.htp-home-btn--zalo .htp-btn-arrow,
.htp-sol-btn--outline .htp-btn-arrow {
  display: none;
}

.htp-home-btn--quote,
.htp-shop-quote-btn,
.htp-featured-product-card__cta,
.htp-related-product-card__btn,
.htp-product-outline-btn,
.htp-contact-info__cta,
.htp-contact-form__submit,
.htp-quote-form__submit,
.htp-shop-quote-band a,
.htp-product-quote,
.htp-offcanvas-cta a,
.htp-sol-btn--primary,
.htp-sol-cta-submit,
.htp-contact-page-submit,
.htp-home-btn--zalo,
.htp-sol-btn--outline {
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-left: 22px;
  padding-right: 22px;
}

/* Header is the only place that keeps the old arrow style. */
.htp-header .htp-quote-btn::before,
.site-header .htp-quote-btn::before,
header .htp-quote-btn::before {
  content: "➤";
  display: inline-block;
  position: static;
  width: auto;
  height: auto;
  margin: 0 12px 0 0;
  background: none;
  color: currentColor;
  -webkit-mask: none;
  mask: none;
  font-family: Arial, sans-serif;
  font-size: .92em;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 1;
}

.htp-header .htp-quote-btn .htp-btn-arrow,
.site-header .htp-quote-btn .htp-btn-arrow,
header .htp-quote-btn .htp-btn-arrow {
  display: none;
}

.htp-header .htp-quote-btn,
.site-header .htp-quote-btn,
header .htp-quote-btn {
  justify-content: center;
  text-align: center;
  gap: 0;
}

/* Product detail quote button: title + small stay clean after arrow removal. */
.htp-product-quote {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.htp-product-quote__title {
  display: block;
  text-align: center;
  width: 100%;
}

.htp-product-quote small {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 0;
}


/* =========================================================
   HTP Thumbnail Display Control
   Hide singular featured-image wrappers only when editor selects hide.
========================================================= */
body.htp-hide-featured-thumbnail .featured-image,
body.htp-hide-featured-thumbnail .post-image,
body.htp-hide-featured-thumbnail .page-header-image,
body.htp-hide-featured-thumbnail .inside-article > .post-thumbnail {
	display: none;
}

/* DESKTOP CONTAINER SYNC HEADER FOOTER BODY FIX */
@media (min-width: 768px) {
	.htp-container,
	.site.grid-container,
	.inside-article,
	.woocommerce .site-main {
		width: min(calc(100% - 40px), var(--htp-container, 1350px));
		max-width: var(--htp-container, 1350px);
		margin-left: auto;
		margin-right: auto;
	}
}


/* v36: quote popup logo + close button visibility */
.htp-quote-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	padding: 0;
	color: #111827;
}

.htp-quote-modal__close span {
	display: block;
	color: inherit;
	font-family: Arial, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-1px);
	pointer-events: none;
}

.htp-quote-modal__close:hover,
.htp-quote-modal__close:focus {
	border-color: rgba(237, 28, 36, .45);
	background: #fff5f5;
	color: #ed1c24;
}

.htp-quote-modal__logo span {
	overflow: hidden;
	padding: 6px;
}

.htp-quote-modal__logo span img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 767px) {
	.htp-quote-modal {
		align-items: flex-start;
		padding: 10px;
		overflow-y: auto;
	}

	.htp-quote-modal__dialog {
		width: 100%;
		max-height: calc(100dvh - 20px);
		grid-template-columns: 1fr;
	}

	.htp-quote-modal__close {
		position: sticky;
		top: 10px;
		right: auto;
		justify-self: end;
		grid-column: 1;
		margin: 10px 10px -52px auto;
		width: 42px;
		height: 42px;
		background: #fff;
		box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
	}

	.htp-quote-modal__brand {
		min-height: auto;
		padding: 30px 22px 24px;
	}

	.htp-quote-modal__formwrap {
		padding: 26px 22px 22px;
	}

	.htp-quote-form__grid,
	.htp-quote-form__trust {
		grid-template-columns: 1fr;
	}
}


/* v38: quote popup uses child-theme SVG icons and full logo without white background */
.htp-quote-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 30;
	padding: 0;
}

.htp-quote-modal__close img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.htp-quote-modal__logo {
	display: block;
	margin-bottom: 42px;
}

.htp-quote-modal__logo img {
	display: block;
	width: min(100%, 245px);
	height: auto;
	max-height: 78px;
	object-fit: contain;
	object-position: left center;
	filter: brightness(0) invert(1);
}

.htp-quote-modal__logo span,
.htp-quote-modal__logo strong {
	display: none;
}

.htp-quote-modal__brand li span,
.htp-quote-form__trust span {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .82);
	color: #fff;
}

.htp-quote-modal__brand li span img,
.htp-quote-form__trust span img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.htp-quote-form__trust span {
	background: #c50915;
	border-color: #c50915;
}

.htp-quote-form__trust span img {
	width: 18px;
	height: 18px;
}

.htp-quote-form__trust div:first-child span img,
.htp-quote-form__trust div:nth-child(2) span img,
.htp-quote-form__trust div:nth-child(3) span img {
	filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
	.htp-quote-modal__logo {
		margin-bottom: 28px;
	}

	.htp-quote-modal__logo img {
		width: min(100%, 220px);
		max-height: 70px;
	}

	.htp-quote-modal__close img {
		width: 17px;
		height: 17px;
	}
}


/* v40: quote form validation color cleanup */
.htp-quote-form input.is-invalid,
.htp-quote-form textarea.is-invalid,
.htp-quote-form select.is-invalid {
	border-color: #e81722;
	box-shadow: 0 0 0 3px rgba(232, 23, 34, .10);
}

.htp-quote-form input:valid,
.htp-quote-form textarea:valid {
	border-color: #d8dde5;
}


/* v43: thank-you page typography + editable background cleanup */
.htp-thankyou-page,
.htp-thankyou-page p,
.htp-thankyou-page span,
.htp-thankyou-page a,
.htp-thankyou-page li,
.htp-thankyou-page div {
	font-family: var(--htp-font-body, Lato, Arial, sans-serif);
	font-weight: 500;
}

.htp-thankyou-hero {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.htp-thankyou-hero__icon,
.htp-thankyou-hero h1,
.htp-thankyou-card h2,
.htp-thankyou-order h3,
.htp-thankyou-summary strong,
.htp-thankyou-order__item,
.htp-thankyou-total strong,
.htp-thankyou-next__grid i,
.htp-thankyou-next__grid b,
.htp-thankyou-support h3,
.htp-thankyou-support a,
.htp-thankyou-actions a,
.htp-thankyou-related h2,
.htp-thankyou-related header a,
.htp-thankyou-related__item span {
	font-weight: 700;
}

.htp-thankyou-hero h1 {
	font-weight: 700;
}

.htp-thankyou-hero p,
.htp-thankyou-hero span,
.htp-thankyou-summary p,
.htp-thankyou-next__grid span,
.htp-thankyou-support p,
.htp-thankyou-contacted,
.htp-thankyou-total {
	font-weight: 500;
}

.htp-thankyou-summary__icon {
	font-weight: 700;
}


/* v44: thank-you icon library + reliable editable background */
.htp-thankyou-hero {
	background-image: linear-gradient(rgba(0,0,0,.66), rgba(0,0,0,.72)), var(--htp-thankyou-bg, url('https://hungthinhpack.com/wp-content/uploads/2026/04/Hung-Thinh-Global-Pack.jpg'));
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.htp-thankyou-hero__icon {
	font-size: 0;
}

.htp-thankyou-hero__icon img {
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.htp-thankyou-summary__icon {
	font-size: 0;
}

.htp-thankyou-summary__icon img {
	display: block;
	width: 19px;
	height: 19px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(4286%) hue-rotate(347deg) brightness(94%) contrast(102%);
}

.htp-thankyou-summary__icon.is-green img {
	filter: brightness(0) saturate(100%) invert(36%) sepia(85%) saturate(773%) hue-rotate(91deg) brightness(91%) contrast(87%);
}

.htp-thankyou-next__grid i {
	position: relative;
	font-size: 0;
}

.htp-thankyou-next__grid i img {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(4286%) hue-rotate(347deg) brightness(94%) contrast(102%);
}

.htp-thankyou-next__grid i em {
	position: absolute;
	right: -6px;
	bottom: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #d50916;
	color: #fff;
	font-family: var(--htp-font-body, Lato, Arial, sans-serif);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

.htp-thankyou-card h2,
.htp-thankyou-order h3,
.htp-thankyou-next__grid b,
.htp-thankyou-support h3,
.htp-thankyou-summary strong {
	font-weight: 700;
}

.htp-thankyou-summary p,
.htp-thankyou-next__grid span,
.htp-thankyou-support p,
.htp-thankyou-contacted {
	font-weight: 500;
}


/* v45: compact WooCommerce notices globally */
.woocommerce-notices-wrapper {
	width: min(100% - 48px, 1280px);
	max-width: 1280px;
	margin: 14px auto 0;
	position: relative;
	z-index: 6;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	box-sizing: border-box;
	min-height: auto;
	padding: 12px 16px;
	border: 1px solid #e3e7ee;
	border-radius: 5px;
	background: #fff;
	color: #1f2937;
	font-family: var(--htp-font-body, "Lato", Arial, sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	box-shadow: 0 10px 24px rgba(17, 24, 39, .06);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: right;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin: -3px 0 -3px 14px;
	padding: 0 16px;
	border-radius: 5px;
	background: #4b5563;
	color: #fff;
	font-family: var(--htp-font-heading, "Anton", Arial, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

@media (max-width: 767px) {
	.woocommerce-notices-wrapper {
		width: calc(100% - 28px);
		margin-top: 10px;
	}

	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		padding: 12px;
		font-size: 14px;
	}

	.woocommerce-message .button,
	.woocommerce-info .button,
	.woocommerce-error .button {
		float: none;
		width: 100%;
		margin: 8px 0 0;
	}
}