/* ====== TINHPHANTRAM.ONLINE – CLEAN & RESPONSIVE (FINAL FIX) ====== */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ overflow-x:hidden; background:#f9fafb; color:#111827;
      font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif }
.wrap{ max-width:860px; margin:24px auto; padding:0 14px }
img{ max-width:100%; height:auto; display:block }

/* Hero */
.hero{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px; text-align:center; margin-bottom:18px }
.hero h1{ color:#2563eb; font-size:1.3rem; margin:0 0 6px }
.hero p{ color:#6b7280; margin:0 }

/* Grid & card */
.grid{ display:grid; gap:14px }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px }
.card h2{ margin:0 0 8px; color:#2563eb; font-size:1.06rem }

/* Row */
.row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; width:100% }
.label,.sep{ color:#6b7280; font-size:.9em }

/* ===== CONTROLS (SCOPED, COMPACT) ===== */
.pct-calc input,
.pct-calc select,
.pct-calc output{
  flex:1 1 40px; min-width:0; max-width:100%; width:100%;
  height:40 !important; min-height:40px !important;   /* gọn hơn */
  padding:4px 10px !important; line-height:30px !important;
  font:16px/1.2 inherit; color:#111827; background:#fff;
  border:1px solid #e5e7eb; border-radius:6px;
  -webkit-appearance:none; appearance:none;
  lig
}
.pct-calc input:focus,.pct-calc select:focus{ outline:none; border-color:#2563eb }

/* Select arrow gọn */
.pct-calc select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:right 10px center, right 6px center;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  padding-right:26px !important;
}

/* Output như ô readonly */
.pct-calc .result{
  border:1px solid #d1d5db; background:#f9fbff; color:#2563eb;
  text-align:center; font-weight:600; overflow-wrap:anywhere; word-break:break-word;
}

/* ===== Output + Copy luôn CÙNG HÀNG ===== */
.pct-calc .result-wrap{
  display:flex; align-items:center; gap:8px; width:100%;
  flex-wrap:nowrap;              /* không xuống dòng */
}
.pct-calc .result-wrap .result{ flex:1 1 auto; min-width:0 }
.pct-calc .result-wrap .btn.copy{
  flex:0 0 88px; min-width:88px;
  font-size: 14px;/* cố định, không chiếm full hàng */
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:0; border-radius:6px; padding:6px 10px; min-height:40px;
  background:#2563eb; color:#fff; font-weight:600; cursor:pointer }
.btn:hover{ opacity:.92 }
.copy{ background:#16a34a }

/* Hint & notes */
.hint{ margin-top:6px; font-size:.9em; color:#6b7280; background:#f3f4f6; border-left:3px solid #2563eb; padding:6px 8px; border-radius:4px }
.note{ margin:6px 0 0; font-size:.9em; display:none }
.note.info{ color:#1e40af } .note.warn{ color:#b45309 } .note.err{ color:#b91c1c } .note.show{ display:block }

/* Content & FAQ */
.seo-content{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px; margin-top:14px }
.seo-content h2{ color:#2563eb; margin:0 0 8px }
.faq{ margin-top:14px }
.faq h2{ color:#2563eb; margin:0 0 8px }
.faq details{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:10px; margin-bottom:8px }
.faq summary{ cursor:pointer; font-weight:600 }
.faq p{ margin:6px 0 0; color:#6b7280 }

/* Footer */
.site-footer-mt{ padding:20px 0 28px }
.footer-inner{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px; text-align:center }
.credit{ color:#6b7280; font-size:.9em; margin:0 }

/* Responsive */
@media (max-width:640px){
  .row{ flex-direction:column; align-items:stretch; gap:6px }
  /* GIỮ result + copy cùng hàng trên mobile */
  .pct-calc .result-wrap{ flex-direction:row; }
  .pct-calc .result-wrap .btn.copy{ min-width:88px }
}



/* ====== SEO CONTENT + FAQ (ĐỒNG BỘ, TỐI GIẢN) ====== */
/* Khối SEO */
.seo-content.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
  margin-top:14px;
}
.seo-content.card h2{
  margin:0 0 10px;
  color:#2563eb;
  font-size:20px;
}
.seo-content.card h3{
  margin:12px 0 6px;
  font-size:1rem;
  color:#111827;
}
.seo-content.card p{ margin:0 0 8px; color:#111827 }
.seo-content.card ul,
.seo-content.card ol{ margin:6px 0 8px 18px }
.seo-content.card li{ margin:4px 0; color:#111827 }

/* CTA trong SEO */
.seo-content.card .cta{
  margin-top:10px;
  padding:12px;
  border:1px dashed #2563eb;
  border-radius:8px;
  background:#f8fbff;
}
.seo-content.card .btn-cta{
  display:inline-block;
  margin-top:8px;
  padding:8px 14px;
  border-radius:6px;
  text-decoration:none;
  color:#fff;
  background:#2563eb;
  font-weight:700;
}
.seo-content.card .btn-cta:hover{ opacity:.92 }

/* ====== FAQ ====== */
.faq.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px;
  margin-top:14px;
}
.faq.card h2{
  margin:0 0 10px;
  color:#2563eb;
  font-size:20px;
}

/* Từng câu hỏi */
.faq.card details{
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:8px;
  background:#fff;
}
.faq.card summary{
  list-style:none;         /* ẩn bullet mặc định */
  cursor:pointer;
  font-weight:600;
  color:#111827;
  position:relative;
  padding-right:22px;
}
.faq.card summary::-webkit-details-marker{ display:none } /* Safari */
.faq.card summary::after{
  content:"▾";
  position:absolute; right:4px; top:0;
  color:#6b7280;
  transition:transform .2s ease;
}
.faq.card details[open] summary::after{ transform:rotate(180deg) }

.faq.card p{ margin:6px 0 0; color:#6b7280 }

/* Mobile spacing */
@media (max-width:640px){
  .seo-content.card, .faq.card{ padding:12px }
  .seo-content.card .btn-cta{ width:auto }
}

.intro h1 {
    color: #2563eb;
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
}
.intro--medium p {
    line-height: 24px;
}


/* Mobile responsive */
@media (max-width: 640px) {
  .intro--medium {
    padding: 14px;
  }
  .intro--medium h2 {
    font-size: 1.08rem;
  }
}
/* Intro medium */
.intro--medium {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
  line-height: 1.65;
  margin-bottom: 20px;
}
.intro--medium h2 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  color: #2563eb;
}
.intro--medium p {
  color: #111827;
  margin: 0 0 10px;
}
.intro--medium strong {
  color: #111827;
}
.intro--medium em {
  color: #2563eb;
  font-style: normal;
}