/* ===========================================================================
   Chrome this clone fixes rather than clones: the Facebook page card in the
   footer (the real one is an SDK iframe that is never loaded) and the search
   results page (the real one is a WordPress query there is no server for).

   Palette follows the theme: blue #0082c6 · green #1a7b1c · orange #fcb040.
   =========================================================================== */

/* ── footer: Facebook page card ─────────────────────────────────────────────
   The live page reserves 340x200 for Facebook's page plugin. `overrides.css`
   keeps that box; this fills it with a card of the same proportions, so the
   footer's height is unchanged whether or not the SDK would have loaded. */

.fb-page-placeholder .fb-card {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 12px 12px;
  text-align: center;
  text-decoration: none;
  color: #1d2129;
}
.fb-page-placeholder .fb-card:hover { text-decoration: none; }

.fb-card-cover {
  display: block;
  margin: 0 -12px;
  height: 74px;
  background: linear-gradient(135deg, #3b5998 0%, #4c70ba 100%);
  color: rgba(255, 255, 255, 0.35);
  font-size: 40px;
  line-height: 74px;
}

.fb-card-avatar {
  display: block;
  width: 56px;
  height: 56px;
  margin: -28px auto 6px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #3b5998;
  color: #fff;
  font-size: 26px;
  line-height: 50px;
}

.fb-card-name {
  display: block;
  font-weight: 700;
  font-size: 13px;
  line-height: 17px;
  /* two lines at most, so a long page name cannot push the CTA out of the box */
  max-height: 34px;
  overflow: hidden;
}

.fb-card-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #90949c;
}

.fb-card-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  border-radius: 2px;
  background: #4267b2;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.fb-page-placeholder .fb-card:hover .fb-card-cta { background: #365899; }

/* ── search results ─────────────────────────────────────────────────────── */

.gp-search-summary {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaeaea;
  color: #666;
}
.gp-search-summary strong { color: #333; }

/* the results reuse the archive card, plus a kind badge and an optional price */
.gp-search-kind {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 2px;
  background: #0082c6;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.gp-search-kind[data-kind="Sản phẩm"] { background: #1a7b1c; }
.gp-search-kind[data-kind="Tin tức"]  { background: #fcb040; }
.gp-search-kind[data-kind="Chuyên mục"],
.gp-search-kind[data-kind="Danh mục"] { background: #777; }

.gp-search-price {
  display: block;
  margin: 4px 0 0;
  color: #e60f1e;
  font-weight: 700;
}

/* the thumbnail box is fixed so results of mixed shapes still line up */
.gp-search-results .post-thumbnail {
  width: 200px;
  height: 140px;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid #eaeaea;
}
.gp-search-results .post-thumbnail img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.gp-search-empty {
  padding: 40px 20px;
  text-align: center;
  color: #666;
  background: #fafafa;
  border: 1px solid #eaeaea;
}
.gp-search-empty i {
  display: block;
  margin-bottom: 12px;
  font-size: 40px;
  color: #ccc;
}
.gp-search-empty h3 { margin: 0 0 8px; font-size: 18px; color: #333; }
.gp-search-empty ul {
  display: inline-block;
  margin: 12px 0 0;
  padding: 0;
  text-align: left;
  list-style: none;
}
.gp-search-empty li { padding: 2px 0; }
.gp-search-empty li:before {
  content: "\f105";
  font: normal normal normal 14px/1 FontAwesome;
  padding-right: 8px;
  color: #1a7b1c;
}

.gp-search-more {
  margin-top: 20px;
  text-align: center;
}
.gp-search-more button {
  padding: 8px 22px;
  border: 1px solid #eaeaea;
  background: #fafafa;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}
.gp-search-more button:hover {
  background: #fcb040;
  border-color: #fcb040;
  color: #fff;
}

@media (max-width: 600px) {
  .gp-search-results .post-thumbnail,
  .gp-search-results .post-thumbnail img {
    float: none;
    width: 100%;
    height: auto;
    margin-right: 0;
  }
  .gp-search-results .post-thumbnail { margin-bottom: 12px; }
}

/* matched terms inside a result; the browser default yellow is too loud next
   to the theme's palette */
.gp-search-results mark {
  padding: 0 1px;
  background: #fff3d6;
  color: inherit;
  font-weight: 700;
}

/* ── header: search + cart on one row below 992px ───────────────────────────
   The theme stacks them. Below 768px `.top-mid-right` goes full width and
   centres, the search form keeps `float:left` while `.cart-header` keeps
   `float:right`, and below 500px `#s` picks up a `margin-bottom` that drops the
   submit button onto a line of its own — three rows on a phone. Between 768 and
   991px the cart still wraps under the field. This lays the same three controls
   out as one flex row instead; nothing changes at 992px and up, where the theme
   already fits them on one line. */

@media (max-width: 991px) {
  .site-header .top-mid-right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 15px;
  }

  .site-header .top-mid-right .search-form {
    display: flex;
    flex: 1 1 auto;
    float: none;
    width: auto;
    /* a flex item will not shrink past its content unless told to */
    min-width: 0;
    margin-right: 10px;
  }

  /* beats the theme's `margin-bottom: 10px` at ≤500px on source order */
  .site-header .search-form input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-bottom: 0;
  }

  .site-header .search-form button.search-submit {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .site-header .top-mid-right .cart-header {
    flex: 0 0 auto;
    float: none;
  }

  /* the mini-cart hangs off the right edge; keep it inside the viewport */
  .site-header .cart-header .cart-container-list {
    right: 0;
    max-width: calc(100vw - 30px);
  }
}

/* the narrowest phones cannot fit "Tìm kiếm" next to the field as well as the
   cart — keep the button, drop its label to the magnifier alone */
@media (max-width: 400px) {
  .site-header .search-form button.search-submit {
    font-size: 0;
    padding: 0 10px;
  }
  .site-header .search-form button.search-submit .fa {
    font-size: 14px;
  }
}

/* ── header: the two menu items this clone adds ─────────────────────────────
   The theme sized the bar for exactly five items: at ≥1200px they are 1020px
   wide inside a 1140px <ul>, leaving 120px — not enough for "TIN TỨC" and
   "LIÊN HỆ", so the bar wrapped to two rows. Tightening the gaps keeps all
   seven on one row at every width where the live site fits its five. */

@media (min-width: 1200px) {
  /* theme: padding 13px 25px → 7 items need 1229px of a 1140px bar */
  ul#navigation > li > a {
    padding-left: 17px;
    padding-right: 17px;
  }
}

/* The live bar stops wrapping at exactly 952px, where `#navigation` reaches its
   920px cap and the five items' 920px just fit. Seven have to fit the same
   920px, so from there up to 1199px the gaps tighten and the label drops a
   point: 811px of text + 14 x 7px = 909px. Below 952px both sites wrap. */
@media (min-width: 952px) and (max-width: 1199px) {
  ul#navigation > li > a {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 12px;
  }
}

/* ───────────────────────────────────────────── Liên hệ: request form

   The live page is an address list and nothing else. The clone leads with the
   form — the reason people open a contact page — and keeps the address list
   beside it. Field, button and success styling is shared with the checkout
   (`shop.css`); only the two-column shell lives here.
   ------------------------------------------------------------------------- */

.gp-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin: 18px 0 24px;
}
.gp-contact__main { flex: 1 1 400px; min-width: 0; }
.gp-contact__aside { flex: 1 1 260px; min-width: 0; }

.gp-contact__title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #0082c6;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: #222;
}
.gp-contact__lead { margin: 0 0 14px; color: #555; }

.gp-contact-form {
  margin: 0;
  padding: 16px;
  border: 1px solid #eaeaea;
  background: #fafafa;
}
.gp-contact-form[hidden] { display: none; }
.gp-contact-form .gp-btn { margin-top: 4px; }
.gp-contact__hint { margin: 12px 0 0; font-size: 13px; color: #777; }
.gp-contact__hint a { color: #0082c6; font-weight: 700; }

.gp-contact__aside #address-box {
  padding: 14px 16px;
  border: 1px solid #eaeaea;
  background: #fff;
}
.gp-contact__aside #address-list { margin: 0; }
.gp-contact__aside .info-item { margin-bottom: 10px; }
.gp-contact__aside .info-item:last-child { margin-bottom: 0; }

/* Two fields per row needs room for both; below that they stack. */
@media (max-width: 600px) {
  .gp-contact-form .gp-field-row { display: block; }
}