/* ============================================================
   Dexuat Deals — front-end (layout theo file ZIP gốc)
   Tự chứa brand tokens để chạy được kể cả ngoài child theme.
   ============================================================ */
.dd-wrap {
  --dd-green-50:#eef9f2; --dd-green-100:#d8f1e1; --dd-green-300:#7fd1a4;
  --dd-green-400:#45ba7f; --dd-green-500:#1fa45b; --dd-green-600:#178a4c; --dd-green-700:#12713e;
  --dd-ink:#10211a; --dd-slate-500:#5f6f67; --dd-slate-600:#4a5a52; --dd-muted:#7d8a83;
  --dd-line:#e6ece9; --dd-line-soft:#eef2f0; --dd-bg-soft:#f5f9f7; --dd-bg-tint:#f0f8f3;
  --dd-amber-500:#e8893d; --dd-radius:12px; --dd-radius-lg:18px;
  --dd-shadow-sm:0 1px 2px rgba(16,33,26,.05),0 1px 3px rgba(16,33,26,.06);
  --dd-shadow:0 4px 14px rgba(16,33,26,.06),0 2px 6px rgba(16,33,26,.04);
  --dd-shadow-green:0 10px 26px rgba(31,164,91,.28);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--dd-slate-600);
}
.dd-wrap *, .dd-wrap *::before, .dd-wrap *::after { box-sizing: border-box; }
.dd-wrap h2, .dd-wrap h3 { color: var(--dd-ink); letter-spacing:-.02em; line-height:1.15; margin:0 0 4px; }

/* Toolbar / filter */
.dd-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.dd-count { font-size:13.5px; color:var(--dd-muted); font-weight:600; }
.dd-chips { display:flex; gap:9px; flex-wrap:wrap; }
.dd-chip { font-size:14px; font-weight:600; color:var(--dd-slate-600); background:#fff;
  border:1px solid var(--dd-line); padding:8px 15px; border-radius:100px; cursor:pointer; transition:all .15s; }
.dd-chip:hover { border-color:var(--dd-green-300); color:var(--dd-green-700); }
.dd-chip.active { background:var(--dd-green-500); border-color:var(--dd-green-500); color:#fff; box-shadow:var(--dd-shadow-green); }

/* Provider mark */
.dd-prov { display:inline-flex; align-items:center; gap:10px; font-weight:800; color:var(--dd-ink); }
.dd-prov-mark { width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  font-size:15px; font-weight:800; color:#fff; letter-spacing:-.02em; flex-shrink:0; }
.dd-prov-name { font-size:15px; line-height:1.15; }
.dd-prov-name small { display:block; font-size:11.5px; font-weight:600; color:var(--dd-muted); }
.dd-pm-vietnix{background:linear-gradient(135deg,#7c4dff,#5b2ee0);} .dd-pm-azdigi{background:linear-gradient(135deg,#ef5b3c,#d23f22);}
.dd-pm-inet{background:linear-gradient(135deg,#2b7de9,#1a5fc4);} .dd-pm-tino{background:linear-gradient(135deg,#13b6c9,#0e93a3);}
.dd-pm-dynadot{background:linear-gradient(135deg,#f0a020,#d4810a);} .dd-pm-spaceship{background:linear-gradient(135deg,#222,#000);}
.dd-pm-godaddy{background:linear-gradient(135deg,#1bdbdb,#00a4a6);} .dd-pm-vultr{background:linear-gradient(135deg,#2563eb,#1e40af);}
.dd-pm-digitalocean{background:linear-gradient(135deg,#0080ff,#0061c2);} .dd-pm-linode{background:linear-gradient(135deg,#00b259,#00803f);}
.dd-pm-default{background:linear-gradient(135deg,#45ba7f,#178a4c);}

/* Pricing cards (hosting / vps) — kiểu pcard của ZIP */
.dd-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.dd-card { background:#fff; border:1px solid var(--dd-line); border-radius:var(--dd-radius-lg);
  box-shadow:var(--dd-shadow-sm); padding:24px; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s; }
.dd-card:hover { transform:translateY(-3px); box-shadow:var(--dd-shadow); border-color:var(--dd-green-300); }
.dd-card-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; gap:8px; }
.dd-pkg { font-size:17px; font-weight:800; color:var(--dd-ink); margin:6px 0 2px; }
.dd-price { display:flex; align-items:baseline; gap:6px; margin:8px 0 2px; }
.dd-price .now { font-size:28px; font-weight:800; color:var(--dd-ink); letter-spacing:-.03em; }
.dd-price .unit { font-size:13px; color:var(--dd-muted); font-weight:600; }
.dd-feat { list-style:none; padding:0; margin:16px 0 18px; flex:1; }
.dd-feat li { font-size:13.5px; color:var(--dd-slate-600); display:flex; align-items:flex-start; gap:9px; padding:5px 0; border-bottom:1px solid var(--dd-line-soft); }
.dd-feat li:last-child { border-bottom:none; }
.dd-feat li::before { content:""; flex-shrink:0; width:15px; height:15px; margin-top:2px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%231fa45b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dd-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-weight:700; font-size:14px; padding:11px 16px; border-radius:10px; text-decoration:none;
  background:var(--dd-green-500); color:#fff; box-shadow:var(--dd-shadow-green); transition:background .2s, transform .15s; }
.dd-btn:hover { background:var(--dd-green-600); transform:translateY(-1px); color:#fff; }
.dd-badge { display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:4px 9px; border-radius:7px; }
.dd-badge-green { background:var(--dd-green-50); color:var(--dd-green-700); }
.dd-badge-manual { background:#fdf3ea; color:var(--dd-amber-500); }

/* Tables (domain price + compare) — scroll ngang trên mobile */
.dd-tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--dd-line);
  border-radius:var(--dd-radius-lg); box-shadow:var(--dd-shadow-sm); background:#fff; }
.dd-table { width:100%; border-collapse:collapse; min-width:640px; }
.dd-table th { text-align:left; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--dd-muted); padding:15px 18px; background:var(--dd-bg-soft); border-bottom:1px solid var(--dd-line); white-space:nowrap; }
.dd-table td { padding:16px 18px; border-bottom:1px solid var(--dd-line-soft); font-size:14.5px; vertical-align:middle; }
.dd-table tbody tr:last-child td { border-bottom:none; }
.dd-table tbody tr:hover td { background:var(--dd-bg-tint); }
.dd-now { color:var(--dd-green-600); font-weight:800; font-size:16px; }
.dd-old { color:var(--dd-muted); font-size:13px; }
.dd-empty { padding:40px; text-align:center; color:var(--dd-muted); font-size:14.5px;
  background:var(--dd-bg-soft); border:1px dashed var(--dd-line); border-radius:var(--dd-radius-lg); }
.dd-updated { font-size:12px; color:var(--dd-muted); margin-top:14px; }

@media (max-width: 980px){ .dd-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .dd-grid { grid-template-columns:1fr; } }

/* ============================================================
   Domain Checker
   ============================================================ */
.dd-checker .dd-checker-note { margin: 14px 0 4px; font-size: 14px; color: var(--dd-slate-600); }
.dd-checker-result { margin-top: 12px; }
.dd-dc-card { background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-radius-lg); box-shadow: var(--dd-shadow); padding: 20px; }
.dd-dc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--dd-line-soft); }
.dd-dc-fav { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--dd-green-400), var(--dd-green-600)); color: #fff; font-weight: 800; display: grid; place-items: center; }
.dd-dc-head b { color: var(--dd-ink); font-size: 16px; }
.dd-dc-head small { display: block; color: var(--dd-muted); font-size: 12.5px; }
.dd-dc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.dd-dc-m { background: var(--dd-bg-soft); border-radius: 12px; padding: 13px 15px; }
.dd-dc-m .k { font-size: 12px; color: var(--dd-muted); font-weight: 600; }
.dd-dc-m .v { display: block; font-size: 24px; font-weight: 800; color: var(--dd-ink); letter-spacing: -.02em; margin-top: 4px; }
.dd-dc-m .v small { font-size: 13px; color: var(--dd-muted); font-weight: 600; }
.dd-top-checked { margin-top: 24px; }
.dd-top-checked h3 { font-size: 16px; margin-bottom: 10px; }
.dd-top-checked ol { margin: 0; padding-left: 20px; }
.dd-top-checked li { padding: 6px 0; font-size: 14.5px; }
.dd-top-checked li b { color: var(--dd-ink); }
.dd-muted { color: var(--dd-muted); font-size: 13px; margin-left: 6px; }
@media (max-width: 600px){ .dd-dc-metrics { grid-template-columns: 1fr 1fr; } }
.dd-checker { max-width: 720px; margin: 0 auto; }
.dd-checker-lead { text-align: center; color: var(--dd-slate-500); font-size: 16px; margin: 0 0 18px; }
.dd-checker .check-box { box-shadow: var(--dd-shadow); }

/* ============================================================
   Domain Checker — Modal (tự chứa, không phụ thuộc .dd-wrap)
   ============================================================ */
.ddm-overlay {
  position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(16,33,26,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .2s ease;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ddm-overlay.ddm-open { display: flex; opacity: 1; }
.ddm {
  background: #fff; width: 100%; max-width: 460px; border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(16,33,26,.32); transform: translateY(12px) scale(.98);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.ddm-overlay.ddm-open .ddm { transform: none; }
.ddm-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid #eef2f0; }
.ddm-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #10211a; letter-spacing: -.01em; }
.ddm-close { width: 34px; height: 34px; border: none; border-radius: 9px; background: #f5f9f7; color: #10211a; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.ddm-close:hover { background: #e6ece9; }
.ddm-close svg { width: 18px; height: 18px; }
.ddm-body { padding: 22px 20px 24px; }

/* progress */
.ddm-prog { text-align: center; }
.ddm-dom { font-weight: 700; color: #178a4c; font-size: 15px; margin-bottom: 16px; word-break: break-all; }
.ddm-spin { width: 56px; height: 56px; margin: 4px auto 20px; border-radius: 50%; border: 4px solid #e6ece9; border-top-color: #1fa45b; animation: ddm-spin .8s linear infinite; }
@keyframes ddm-spin { to { transform: rotate(360deg); } }
.ddm-steps { list-style: none; margin: 0; padding: 0; max-width: 300px; margin: 0 auto; text-align: left; }
.ddm-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: #9aa6a0; transition: color .2s; }
.ddm-steps li .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d8e2dd; flex-shrink: 0; position: relative; transition: all .2s; }
.ddm-steps li.on { color: #4a5a52; }
.ddm-steps li.done { color: #10211a; }
.ddm-steps li.done .dot { background: #1fa45b; border-color: #1fa45b; }
.ddm-steps li.done .dot::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ddm-steps li.on .dot { border-color: #1fa45b; border-top-color: transparent; animation: ddm-spin .7s linear infinite; }

/* result */
.ddm-res-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #eef2f0; }
.ddm-fav { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg,#45ba7f,#178a4c); color: #fff; font-weight: 800; font-size: 18px; display: grid; place-items: center; flex-shrink: 0; }
.ddm-res-head b { color: #10211a; font-size: 16px; display: block; }
.ddm-res-head small { color: #7d8a83; font-size: 12.5px; }
.ddm-badge { margin-left: auto; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 7px; }
.ddm-badge.cache { background: #eef2ff; color: #2b5fd4; }
.ddm-badge.live { background: #eef9f2; color: #178a4c; }
.ddm-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 4px; }
.ddm-m { background: #f5f9f7; border-radius: 13px; padding: 14px 15px; }
.ddm-m .k { font-size: 12px; color: #7d8a83; font-weight: 600; }
.ddm-m .v { display: block; font-size: 25px; font-weight: 800; color: #10211a; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; }
.ddm-m .v small { font-size: 13px; color: #7d8a83; font-weight: 600; }
.ddm-dr { display: flex; align-items: center; gap: 12px; }
.ddm-ring { width: 50px; height: 50px; flex-shrink: 0; }
.ddm-count { margin-top: 16px; text-align: center; font-size: 13.5px; color: #5f6f67; background: #f5f9f7; border-radius: 11px; padding: 11px; }
.ddm-count b { color: #178a4c; }
.ddm-note { text-align: center; color: #7d8a83; font-size: 14px; padding: 16px 0; }
.ddm-cta { display: block; margin-top: 16px; text-align: center; background: #1fa45b; color: #fff; font-weight: 700; padding: 13px; border-radius: 12px; text-decoration: none; }
.ddm-cta:hover { background: #178a4c; color: #fff; }
@media (max-width: 420px){ .ddm-metrics { grid-template-columns: 1fr 1fr; gap: 9px; } .ddm-m .v { font-size: 22px; } }

/* ============================================================
   Domain Checker — Widget đẹp (tự chứa, không phụ thuộc home.css)
   ============================================================ */
.dd-checker { max-width: 820px; margin: 0 auto; }
.dd-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--dd-green-600);
  background:var(--dd-green-50); border:1px solid var(--dd-green-100); padding:6px 13px; border-radius:100px; }
.dd-checker-panel {
  max-width: 680px; margin: 0 auto;
  background: linear-gradient(180deg, var(--dd-bg-tint), #fff);
  border: 1px solid var(--dd-line); border-radius: 22px; padding: 32px 26px;
  text-align: center; box-shadow: var(--dd-shadow);
}
.dd-checker-lead { font-size: 16.5px; color: var(--dd-slate-500); margin: 14px auto 20px; max-width: 480px; line-height:1.6; }
.dd-checker-lead b { color: var(--dd-ink); }
.dd-checker-form {
  display: flex; gap: 8px; background: #fff; border: 1px solid var(--dd-line);
  border-radius: 16px; box-shadow: var(--dd-shadow); padding: 9px; max-width: 540px; margin: 0 auto;
}
.dd-checker-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--dd-ink); padding: 0 16px;
}
.dd-checker-input::placeholder { color: var(--dd-muted); font-weight: 500; }
.dd-checker-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  background: var(--dd-green-500); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 12px;
  box-shadow: var(--dd-shadow-green); transition: background .2s, transform .15s;
}
.dd-checker-btn:hover { background: var(--dd-green-600); transform: translateY(-1px); }
.dd-checker-btn svg { width: 18px; height: 18px; }
.dd-checker-meta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 16px; font-size: 13.5px; color: var(--dd-muted); }
.dd-checker-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dd-checker-meta svg { width: 15px; height: 15px; color: var(--dd-green-500); }

/* Top checked card */
.dd-top-card { background: #fff; border: 1px solid var(--dd-line); border-radius: 18px; box-shadow: var(--dd-shadow-sm); padding: 20px 22px; margin-top: 24px; }
.dd-top-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; color: var(--dd-amber-500); }
.dd-top-head h3 { margin: 0; font-size: 16px; color: var(--dd-ink); }
.dd-top-list { margin-top: 8px; }
.dd-top-item { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px; transition: background .15s; }
.dd-top-item:hover { background: var(--dd-bg-soft); }
.dd-top-item + .dd-top-item { border-top: 1px solid var(--dd-line-soft); }
.dd-top-rank { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--dd-slate-600); background: var(--dd-bg-soft); flex-shrink: 0; }
.dd-top-rank-1 { background: linear-gradient(135deg,#ffd66b,#f0a020); color: #fff; }
.dd-top-rank-2 { background: linear-gradient(135deg,#dfe6ea,#aab6bf); color: #fff; }
.dd-top-rank-3 { background: linear-gradient(135deg,#f0b692,#cf8b5b); color: #fff; }
.dd-top-dom { font-weight: 700; color: var(--dd-ink); font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-top-dr { font-size: 12px; font-weight: 700; color: var(--dd-green-700); background: var(--dd-green-50); padding: 3px 9px; border-radius: 7px; flex-shrink: 0; }
.dd-top-cnt { font-size: 12.5px; color: var(--dd-muted); font-weight: 600; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px){
  .dd-checker-panel { padding: 26px 18px; }
  .dd-checker-form { flex-direction: column; }
  .dd-checker-btn { width: 100%; padding: 14px; }
}

/* Top list: clickable + lưới nhiều cột cho 100 domain */
.dd-top-head { flex-wrap: wrap; }
.dd-top-count { font-size: 12px; font-weight: 800; color: var(--dd-green-700); background: var(--dd-green-50); border:1px solid var(--dd-green-100); padding: 2px 9px; border-radius: 100px; }
.dd-top-sub { font-size: 13px; color: var(--dd-muted); margin: 2px 0 10px; }
.dd-top-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.dd-top-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 10px; border-radius: 12px; border: none; background: transparent;
  font-family: inherit; cursor: pointer; transition: background .15s;
}
.dd-top-item:hover { background: var(--dd-bg-soft); }
.dd-top-item + .dd-top-item { border-top: none; }
.dd-top-go { margin-left: 4px; color: var(--dd-green-600); opacity: 0; transform: translateX(-4px); transition: all .15s; flex-shrink: 0; display: inline-flex; }
.dd-top-go svg { width: 16px; height: 16px; }
.dd-top-item:hover .dd-top-go { opacity: 1; transform: none; }
@media (max-width: 720px){ .dd-top-list { grid-template-columns: 1fr; } .dd-top-go { opacity: 1; transform: none; } }

/* Modal mở rộng: nhiều chỉ số, chart, quốc gia, từ khóa, đối thủ */
.ddm { max-width: 500px; }
.ddm-body { max-height: 78vh; overflow-y: auto; }
.ddm-sec { margin-top: 18px; }
.ddm-sec-h { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #7d8a83; margin-bottom: 10px; }
.ddm-spark { width: 100%; height: 56px; display: block; }
.ddm-countries { display: flex; flex-direction: column; gap: 9px; }
.ddm-cty { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ddm-cty-l { width: 56px; flex-shrink: 0; font-weight: 700; color: #10211a; }
.ddm-cty-bar { flex: 1; height: 8px; background: #eef2f0; border-radius: 100px; overflow: hidden; }
.ddm-cty-bar i { display: block; height: 100%; background: linear-gradient(90deg,#45ba7f,#1fa45b); border-radius: 100px; }
.ddm-cty-v { width: 46px; text-align: right; flex-shrink: 0; color: #5f6f67; font-weight: 600; }
.ddm-kw { display: flex; align-items: center; gap: 10px; background: #f5f9f7; border-radius: 12px; padding: 12px 14px; }
.ddm-kw-rank { background: #1fa45b; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 7px; flex-shrink: 0; }
.ddm-kw b { color: #10211a; font-size: 15px; }
.ddm-kw-meta { color: #7d8a83; font-size: 12.5px; margin-left: auto; text-align: right; }
.ddm-comp { display: flex; flex-wrap: wrap; gap: 8px; }
.ddm-comp-chip { width: auto !important; display: inline-flex; align-items: center; padding: 8px 13px !important;
  background: #f5f9f7 !important; border: 1px solid #e6ece9 !important; border-radius: 100px; font-size: 13.5px; font-weight: 600; color: #178a4c; cursor: pointer; }
.ddm-comp-chip:hover { background: #eef9f2 !important; border-color: #7fd1a4 !important; }

/* Bảng từ khóa trong modal */
.ddm-kws { border: 1px solid #eef2f0; border-radius: 12px; overflow: hidden; }
.ddm-kw-row { display: grid; grid-template-columns: 1fr 72px 56px; align-items: center; gap: 8px; padding: 10px 13px; font-size: 14px; }
.ddm-kw-row + .ddm-kw-row { border-top: 1px solid #eef2f0; }
.ddm-kw-head { background: #f5f9f7; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #7d8a83; }
.ddm-kw-head span:not(.ddm-kw-name) { text-align: right; }
.ddm-kw-name { font-weight: 600; color: #10211a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ddm-kw-tr { text-align: right; font-weight: 700; color: #178a4c; }
.ddm-kw-pos { text-align: right; color: #5f6f67; font-weight: 600; }