/* ===== KOME88 Footer Styles ===== */
/* Migrated from inline <style> in snippets/footer.liquid — WCAG Phase 2 */

.k88f{background:var(--bg,#FCFAF2);color:var(--text,#333);font-size:14px;line-height:1.8}
.k88f a{color:var(--text-secondary,#555);text-decoration:none;transition:color .2s}
.k88f a:hover{color:var(--hover,#c83838)}
.k88f a:focus-visible{outline:var(--focus-ring-width,3px) solid var(--focus-ring,#1A56DB);outline-offset:var(--focus-ring-offset,2px);border-radius:2px}
.k88f__main{padding-top:60px;padding-bottom:40px}
.k88f__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 0.8fr 1.2fr;gap:40px}
.k88f__brand{display:flex;flex-direction:column;gap:10px}
.k88f__logo{display:block}
.k88f__logo img{max-height:75px;width:auto}
.k88f__tagline{color:var(--text,#222);font-size:15px;font-weight:600;margin:10px 0 0}
.k88f__jp{color:var(--text-secondary,#444);font-size:14px;line-height:1.6;margin:0}
.k88f__intro{max-width:340px;color:var(--text-secondary,#555);font-size:13px;line-height:1.65;margin:2px 0 0}
.k88f__social{display:flex;gap:16px;margin-top:10px}
.k88f__social-link{color:var(--text,#222);transition:color .2s;display:inline-flex;align-items:center;justify-content:center;min-width:var(--interactive-min-size,44px);min-height:var(--interactive-min-size,44px)}
.k88f__social-link:hover{color:var(--hover,#c83838)}
.k88f__social-link:focus-visible{outline:var(--focus-ring-width,3px) solid var(--focus-ring,#1A56DB);outline-offset:var(--focus-ring-offset,2px);border-radius:4px}
.k88f__col:last-of-type{padding-left:24px;border-left:1px solid var(--border,#e5ddd0)}
.k88f__col-title{color:var(--text,#111);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 0 14px;padding-bottom:10px;position:relative}
.k88f__col-title::after{content:'';position:absolute;bottom:0;left:0;width:24px;height:2px;background:var(--hover,#A82E2E)}
.k88f__col-list{list-style:none;margin:0;padding:0}
.k88f__col-list li{margin-bottom:8px}
.k88f__col-list a{font-size:13px}
.k88f__newsletter-sub{font-size:13px;color:var(--text-secondary,#666);margin:0 0 14px}
.k88f__newsletter-form{display:flex;border-radius:4px;overflow:hidden;border:1px solid var(--border,#ddd)}
.k88f__newsletter-form:focus-within{border-color:var(--hover,#c83838)}
.k88f__newsletter-input{flex:1;background:#fff;border:0;color:var(--text,#222);font-size:16px;padding:12px 16px;outline:none;min-width:0}
.k88f__newsletter-input:focus-visible{outline:var(--focus-ring-width,3px) solid var(--focus-ring,#1A56DB);outline-offset:-2px}
.k88f__newsletter-input::placeholder{color:#6B6B6B}
.k88f__newsletter-btn{background:var(--hover,#A82E2E);border:0;color:#fff;cursor:pointer;padding:12px 18px;flex-shrink:0;transition:background .2s;display:flex;align-items:center;min-width:var(--interactive-min-size,44px);min-height:var(--interactive-min-size,44px)}
.k88f__newsletter-btn:hover{background:color-mix(in srgb,var(--hover,#c83838) 85%,#000)}
.k88f__newsletter-btn:focus-visible{outline:var(--focus-ring-width,3px) solid var(--focus-ring,#1A56DB);outline-offset:-2px}
.k88f__newsletter-btn svg{stroke:#fff}
.k88f__bct{display:inline-flex;margin-top:16px}
.k88f__bct img{display:block;width:180px;height:auto;object-fit:contain}
.k88f__trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,240px));justify-content:center;gap:24px;margin-top:36px;padding-top:28px;border-top:1px solid var(--border,#e0dcd6)}
.k88f__trust-item{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.k88f__trust-item img{width:48px;height:48px;flex:0 0 48px;object-fit:contain}
.k88f__trust-item span{color:var(--text-secondary,#555);font-size:13px;font-weight:600;line-height:1.4}
.k88f__bottom{border-top:1px solid var(--border,#e0dcd6);padding:20px 0}
.k88f__bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.k88f__copyright{margin:0;color:var(--text-secondary,#888);font-size:13px}
.k88f__contact{display:flex;align-items:center;gap:24px}
.k88f__contact-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary,#555);font-size:13px;white-space:nowrap;min-height:var(--interactive-min-size,44px)}
.k88f__contact-link:hover{color:var(--hover,#c83838)}
.k88f__contact-link:focus-visible{outline:var(--focus-ring-width,3px) solid var(--focus-ring,#1A56DB);outline-offset:var(--focus-ring-offset,2px);border-radius:2px}
.k88f__contact-link svg{flex-shrink:0;color:var(--text-secondary,#888)}
.k88f__payments{display:flex;align-items:center;gap:8px}
.k88f__pay-icon{height:16px;width:auto;display:block;object-fit:contain}

.k88f__bct--bottom {
  display: none !important;
}

@media(max-width:1199px){.k88f__grid{grid-template-columns:1fr 1fr 1fr;gap:32px}}

/* ACCORDION & RESPONSIVE FOOTER STYLES (≤ 1024px) */
@media (max-width: 1024px) {
  .k88f {
    background: #FCFAF2 !important;
    padding-bottom: 20px !important;
  }
  .k88f__main {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }
  .k88f__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .k88f__col {
    border-bottom: 1px solid #eae5dc !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: none !important;
  }
  .k88f__col:first-child {
    border-top: 1px solid #eae5dc !important;
  }
  .k88f__col-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 15px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #222222 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
  .k88f__col-title::after {
    content: "+" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #222222 !important;
    line-height: 1 !important;
  }
  .k88f__col.is-open .k88f__col-title::after {
    content: "−" !important;
  }
  .k88f__col--newsletter .k88f__col-title::after {
    display: none !important;
    content: none !important;
  }
  .k88f__col-list {
    display: none !important;
    padding-bottom: 15px !important;
  }
  .k88f__col.is-open .k88f__col-list,
  .k88f__col.is-open .k88f__newsletter-sub,
  .k88f__col.is-open .k88f__newsletter-form {
    display: block !important;
  }
  .k88f__col.is-open .k88f__newsletter-form {
    display: flex !important;
  }
  .k88f__col:not(.is-open):not(.k88f__col--newsletter) .k88f__newsletter-sub,
  .k88f__col:not(.is-open):not(.k88f__col--newsletter) .k88f__newsletter-form {
    display: none !important;
  }
  .k88f__col .k88f__bct {
    display: none !important;
  }
  .k88f__logo img {
    max-height: 38px !important;
    width: auto !important;
    display: block !important;
  }
  /* Trust Badges 4 Pillars Grid */
  .k88f__trust {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px 6px !important;
    margin-top: 20px !important;
    padding-top: 0 !important;
    border-top: none !important;
    text-align: center !important;
  }
  .k88f__trust-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 6px !important;
  }
  .k88f__trust-item img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
  }
  .k88f__trust-item span {
    font-size: 10px !important;
    line-height: 1.25 !important;
    color: #444444 !important;
    text-align: center !important;
  }
  /* Social Links Row */
  .k88f__social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    margin: 18px 0 14px 0 !important;
  }
  .k88f__social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #222222 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 22px !important;
    height: 22px !important;
  }
  /* Copyright, Contact Links & Payment Footer Bottom */
  .k88f__bottom {
    border-top: none !important;
    padding: 0 0 24px 0 !important;
    background: transparent !important;
  }
  .k88f__bottom-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .k88f__contact {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #eae5dc !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    order: 1 !important;
  }
  .k88f__contact-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #222222 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    min-height: 0 !important;
  }
  .k88f__contact-link:first-child {
    flex: 1 !important;
    justify-content: flex-start !important;
  }
  .k88f__contact-link:last-child {
    flex: 1 !important;
    justify-content: flex-start !important;
    padding-left: 16px !important;
    border-left: 1px solid #eae5dc !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
  .k88f__contact-link svg {
    flex-shrink: 0 !important;
    color: #D85427 !important;
    width: 18px !important;
    height: 18px !important;
  }
  .k88f__copyright {
    font-size: 12px !important;
    color: #666666 !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin: 0 !important;
    order: 2 !important;
  }
  .k88f__bct--bottom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px auto 0 auto !important;
    order: 3 !important;
  }
  .k88f__bct--bottom img {
    width: 140px !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .k88f__payments {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    width: 100% !important;
    order: 4 !important;
  }
  .k88f__pay-icon {
    height: 18px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* IPAD & TABLET SPECIFIC FOOTER REFINEMENTS (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .k88f__main {
    padding-top: 36px !important;
    padding-bottom: 20px !important;
  }
  .k88f__grid {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 0 40px !important;
    align-items: stretch !important;
  }
  .k88f__brand {
    grid-column: 1 !important;
    grid-row: 1 / span 6 !important;
    padding-bottom: 0 !important;
    padding-right: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
  }
  .k88f__social {
    margin-top: auto !important;
    padding-top: 14px !important;
    margin-bottom: 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .k88f__col {
    grid-column: 2 !important;
    border-bottom: 1px solid #eae5dc !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: none !important;
  }
  /* REMOVE TOP BORDER LINE ABOVE CHINHSÁCH ON IPAD */
  .k88f__grid > .k88f__col:nth-child(2),
  .k88f__grid > .k88f__col:first-of-type {
    border-top: none !important;
  }
  .k88f__col-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 16px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #222222 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
  .k88f__col-title::after {
    content: "+" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #222222 !important;
    line-height: 1 !important;
  }
  .k88f__col.is-open .k88f__col-title::after {
    content: "−" !important;
  }
  .k88f__col-list {
    display: none !important;
    padding-bottom: 16px !important;
  }
  .k88f__col-list li {
    margin-bottom: 8px !important;
  }
  .k88f__col-list a {
    font-size: 13px !important;
  }
  .k88f__col.is-open .k88f__col-list {
    display: block !important;
  }

  /* NEWSLETTER IS ALWAYS OPEN ON IPAD & BỘ CÔNG THƯƠNG ICON ALIGNED LEFT BELOW EMAIL INPUT */
  .k88f__col--newsletter {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
  .k88f__col--newsletter .k88f__col-title {
    cursor: default !important;
    padding: 6px 0 4px 0 !important;
  }
  .k88f__col--newsletter .k88f__col-title::after {
    display: none !important;
  }
  .k88f__col--newsletter .k88f__newsletter-sub {
    display: block !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    color: #666666 !important;
  }
  .k88f__col--newsletter .k88f__newsletter-form {
    display: flex !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }
  .k88f__newsletter-input {
    font-size: 14px !important;
    padding: 10px 14px !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .k88f__col--newsletter .k88f__bct {
    display: inline-flex !important;
    margin-top: 14px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    align-self: flex-start !important;
  }
  .k88f__col--newsletter .k88f__bct img {
    width: 140px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }
  .k88f__bct--bottom {
    display: none !important;
  }
  
  .k88f__trust {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid #eae5dc !important;
  }
  .k88f__trust-item {
    flex-direction: row !important;
    text-align: left !important;
    gap: 10px !important;
  }
  .k88f__trust-item img {
    width: 36px !important;
    height: 36px !important;
  }
  .k88f__trust-item span {
    font-size: 12px !important;
    text-align: left !important;
  }

  /* FOOTER BOTTOM BAR ON IPAD MATCHES DESKTOP HORIZONTAL LAYOUT */
  .k88f__bottom {
    grid-column: 1 / -1 !important;
    border-top: 1px solid #eae5dc !important;
    padding: 20px 0 !important;
    margin-top: 24px !important;
    background: transparent !important;
  }
  .k88f__bottom-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .k88f__copyright {
    display: inline-block !important;
    font-size: 13px !important;
    color: #555555 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    order: 1 !important;
    text-align: left !important;
  }
  .k88f__contact {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    order: 2 !important;
  }
  .k88f__contact-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    min-height: 0 !important;
  }
  .k88f__contact-link:first-child {
    border-right: 1px solid #eae5dc !important;
    padding-right: 16px !important;
  }
  .k88f__contact-link:last-child {
    padding-left: 0 !important;
    border-left: none !important;
  }
  .k88f__payments {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    order: 3 !important;
    width: auto !important;
  }
}
@media(max-width:359px){.k88f__trust-item span{font-size:9px}}