:root{
  --qk-blue:#0b5ed7;
  --qk-blue-2:#0a58ca;
  --qk-text:#0f172a;
  --qk-muted:#475569;
  --qk-border:#e2e8f0;
  --qk-bg:#ffffff;
}

.qk-hero{ background: var(--qk-bg); padding: 48px 0; }

.qk-wrap{
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: center;
}

.qk-badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,94,215,.10);
  color: var(--qk-blue);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
}

.qk-title{
  margin: 14px 0 10px;
  color: var(--qk-text);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.2px;
}

.qk-desc{
  margin: 10px 0;
  color: var(--qk-muted);
  font-size: 16px;
  line-height: 1.75;
}

/* 4 bullets: 2 cột / 2 hàng */
.qk-points{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qk-point{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--qk-border);
  border-radius: 14px;
  background: #fff;
}

.qk-ic{
  flex: 0 0 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,94,215,.10);
  color: var(--qk-blue);
  font-weight: 900;
  font-size: 14px;
}

.qk-point-title{
  color: var(--qk-text);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
}

.qk-cta{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
}

.qk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration:none;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  user-select:none;
}

.qk-btn-primary{
  background: var(--qk-blue);
  color: #fff;
  box-shadow: 0 10px 22px rgba(11,94,215,.22);
}
.qk-btn-primary:hover{
  background: var(--qk-blue-2);
  transform: translateY(-1px);
}

.qk-btn-outline{
  background: #fff;
  color: var(--qk-blue);
  border: 2px solid rgba(11,94,215,.35);
}
.qk-btn-outline:hover{
  border-color: var(--qk-blue);
  transform: translateY(-1px);
}

.qk-imgbox{
  border: 1px solid var(--qk-border);
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

.qk-imgbox img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.qk-trust{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--qk-muted);
  font-size: 14px;
}
.qk-dot{
  width:10px;height:10px;border-radius:999px;background: var(--qk-blue);
  box-shadow: 0 0 0 6px rgba(11,94,215,.10);
}

.qk-note{ margin-top: 10px; font-size: 13px; color: var(--qk-muted); }

/* Responsive */
@media (max-width: 900px){
  .qk-wrap{ grid-template-columns: 1fr; }
  .qk-title{ font-size: 28px; }
  .qk-points{ grid-template-columns: 1fr; }
}











/* =========================
   DỊCH VỤ THU MUA (12 Ô) - FINAL
========================= */
:root{
  --qk-blue:#0b5ed7;
  --qk-blue-2:#0a58ca;
  --qk-text:#0f172a;
  --qk-muted:#475569;
  --qk-border:#e2e8f0;
  --qk-bg:#ffffff;
}

.qk-services, .qk-services *{ box-sizing: border-box; }

.qk-services{
  background: #fff;
  padding: 52px 0;
}

/* ✅ Không tràn màn hình */
.qk-services__wrap{
  width: 100%;
  max-width: 1140px;     /* chỉnh 1200 nếu muốn rộng hơn */
  margin: 0 auto;
  padding: 0 15px;
}

.qk-services__head{ margin-bottom: 18px; }

.qk-badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,94,215,.10);
  color: var(--qk-blue);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
}

.qk-services__title{
  margin: 12px 0 8px;
  color: var(--qk-text);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.qk-services__desc{
  margin: 0;
  color: var(--qk-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 780px;
}

/* ✅ Desktop + laptop nhỏ: vẫn 4 cột */
.qk-grid{
  margin-top: 16px;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100%;
  max-width: 100%;
  align-content: start;
}

/* nếu WP có chèn p/br thì ẩn luôn */
.qk-grid > p,
.qk-grid > br{ display:none !important; }

.qk-card{
  width: 100% !important;
  max-width: 100% !important;

  display:flex !important;
  align-items:center;
  gap: 12px;

  padding: 16px 14px;
  border: 1px solid var(--qk-border);
  border-radius: 16px;
  background: #fff;
  text-decoration:none;

  box-shadow: 0 10px 26px rgba(2,6,23,.05);
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;

  min-height: 84px;
  overflow: hidden;
}

.qk-card:hover{
  transform: translateY(-2px);
  border-color: rgba(11,94,215,.35);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
}

.qk-ico{
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,94,215,.10);
  color: var(--qk-blue);
  font-size: 18px;
  font-weight: 900;
}

.qk-card__text{ min-width: 0; }

.qk-card__name{
  display:block;
  color: var(--qk-text);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 4px 0;
}

.qk-card__desc{
  display:block;
  color: var(--qk-muted);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ Laptop nhỏ vẫn 4 cột: thu gọn nhẹ để không chật */
@media (max-width: 1100px){
  .qk-grid{ gap: 12px !important; }
  .qk-card{ padding: 14px 12px; min-height: 80px; }
  .qk-card__name{ font-size: 14px; }
  .qk-card__desc{ font-size: 13px; }
}

/* Tablet */
@media (max-width: 820px){
  .qk-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Mobile */
@media (max-width: 560px){
  .qk-grid{ grid-template-columns: 1fr !important; }
  .qk-services{ padding: 40px 0; }
}






/* =========================
   USP - LÝ DO CHỌN QUÂN KHOA
========================= */
.qk-usp, .qk-usp *{ box-sizing: border-box; }

.qk-usp{
  background:#fff;
  padding: 56px 0;
}

.qk-usp__wrap{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: center;
}

.qk-usp__title{
  margin: 12px 0 8px;
  color: var(--qk-text, #0f172a);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.qk-usp__desc{
  margin: 0 0 14px;
  color: var(--qk-muted, #475569);
  font-size: 15px;
  line-height: 1.7;
  max-width: 720px;
}

.qk-usp__list{
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}

.qk-usp__item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px;
  border: 1px solid var(--qk-border, #e2e8f0);
  border-radius: 14px;
  background: #fff;
}

.qk-usp__tick{
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(11,94,215,.10);
  color: var(--qk-blue, #0b5ed7);
  font-weight: 900;
  font-size: 14px;
  margin-top: 1px;
}

.qk-usp__text{
  color: var(--qk-text, #0f172a);
  font-size: 15px;
  line-height: 1.55;
}

.qk-usp__text strong{
  font-weight: 900;
}

.qk-usp__cta{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.qk-usp__note{
  margin-top: 10px;
  font-size: 13px;
  color: var(--qk-muted, #475569);
}

/* Right image */
.qk-usp__imgbox{
  border: 1px solid var(--qk-border, #e2e8f0);
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

.qk-usp__imgbox img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.qk-usp__trust{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--qk-muted, #475569);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 900px){
  .qk-usp__wrap{
    grid-template-columns: 1fr;
  }
  .qk-usp__title{ font-size: 24px; }
}







/* =========================
   KHU VỰC THU MUA
========================= */
.qk-area, .qk-area *{ box-sizing: border-box; }

.qk-area{
  background:#fff;
  padding: 56px 0;
}

.qk-area__wrap{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
}

.qk-area__title{
  margin: 12px 0 8px;
  color: var(--qk-text, #0f172a);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.qk-area__desc{
  margin: 0 0 14px;
  color: var(--qk-muted, #475569);
  font-size: 15px;
  line-height: 1.7;
  max-width: 760px;
}

.qk-area__list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}

.qk-area__item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--qk-border, #e2e8f0);
  border-radius: 14px;
  background: #fff;
}

.qk-area__tick{
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,94,215,.10);
  color: var(--qk-blue, #0b5ed7);
  font-weight: 900;
  font-size: 14px;
  margin-top: 1px;
}

.qk-area__note{
  margin-top: 10px;
  font-size: 13px;
  color: var(--qk-muted, #475569);
}

/* Right box */
.qk-area__box{
  border: 1px solid var(--qk-border, #e2e8f0);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: 18px;
}

.qk-area__boxTitle{
  color: var(--qk-text, #0f172a);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}

.qk-area__boxText{
  margin-top: 6px;
  color: var(--qk-muted, #475569);
  font-size: 14px;
  line-height: 1.5;
}

.qk-area__chips{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qk-chip{
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,94,215,.25);
  background: rgba(11,94,215,.08);
  color: var(--qk-blue, #0b5ed7);
  font-size: 13px;
  font-weight: 800;
}

.qk-area__cta{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qk-area__trust{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--qk-muted, #475569);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 900px){
  .qk-area__wrap{ grid-template-columns: 1fr; }
  .qk-area__title{ font-size: 24px; }
}










/* =========================
   KHU VỰC THU MUA - MAP OVERLAY
========================= */
.qk-area, .qk-area *{ box-sizing: border-box; }

.qk-area{
  background:#fff;
  padding: 56px 0;
}

.qk-area__wrap{
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;

  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
}

.qk-area__title{
  margin: 12px 0 8px;
  color: var(--qk-text, #0f172a);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.qk-area__desc{
  margin: 0 0 14px;
  color: var(--qk-muted, #475569);
  font-size: 15px;
  line-height: 1.7;
  max-width: 760px;
}

.qk-area__list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}

.qk-area__item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--qk-border, #e2e8f0);
  border-radius: 14px;
  background: #fff;
}

.qk-area__tick{
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,94,215,.10);
  color: var(--qk-blue, #0b5ed7);
  font-weight: 900;
  font-size: 14px;
  margin-top: 1px;
}

.qk-area__cta{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qk-area__note{
  margin-top: 10px;
  font-size: 13px;
  color: var(--qk-muted, #475569);
}

/* ===== RIGHT: Map ===== */
.qk-map{
  position: relative;
  border: 1px solid var(--qk-border, #e2e8f0);
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

.qk-map__img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* overlay tag style */
.qk-map__tag{
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,94,215,.30);
  background: rgba(255,255,255,.92);
  color: var(--qk-blue, #0b5ed7);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

/* chấm nhỏ trên tag (tạo cảm giác “pin”) */
.qk-map__tag::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  border-radius: 999px;
  background: var(--qk-blue, #0b5ed7);
  margin-right: 7px;
  box-shadow: 0 0 0 6px rgba(11,94,215,.12);
  vertical-align: middle;
}

/* ===== Vị trí overlay (chỉnh theo ảnh map của bạn) =====
   Mặc định theo %: top/left. Nếu map bạn khác bố cục, chỉ cần chỉnh các % này.
*/
.tag-hcm  { left: 58%; top: 62%; }
.tag-bd   { left: 56%; top: 50%; }
.tag-dn   { left: 70%; top: 56%; }
.tag-la   { left: 48%; top: 72%; }
.tag-tn   { left: 38%; top: 56%; }
.tag-brvt { left: 73%; top: 70%; }
.tag-bp   { left: 50%; top: 34%; }
.tag-kcn  { left: 50%; top: 18%; }

/* trust line */
.qk-area__trust{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--qk-muted, #475569);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 900px){
  .qk-area__wrap{ grid-template-columns: 1fr; }
  .qk-area__title{ font-size: 24px; }

  /* trên mobile tag nhỏ lại */
  .qk-map__tag{ font-size: 12px; padding: 6px 9px; }
}