/* DNSWatch clone — bám sát CSS gốc của dnswatch.info, đã bỏ mọi vùng quảng cáo.
   2 trạng thái: .state-home (canh giữa khi mới vào) / .state-result (canh trái khi đã check).
   Mobile-first; màu & kích thước giữ như bản gốc. */

* { box-sizing: border-box; }

body {
  margin: .5rem;
  text-align: left;
  font-size: .75rem;                 /* 12px */
  font-family: verdana, arial, sans-serif;
  color: #000;
  background: #fff;
}

a          { color: blue; text-decoration: underline; }
a:visited  { color: #813116; }

H3 {
  color: #c26b1d;
  font-weight: bold;
  font-size: 100%;
  margin: 0 0 5px;
  letter-spacing: .15em;
}

#container {
  max-width: 728px;
  margin: 0 auto;                    /* home: canh giữa */
  text-align: left;
}
#container.state-result {
  margin-left: 0;                    /* result: canh trái (sát mép như dnswatch) */
  margin-right: auto;
}

/* -------------------------------------------------------------- logo + subtitle */
#logo { text-align: center; }
#logo img { border: 0; max-width: 100%; height: auto; }
.subtitle {
  color: #8a8a8a;
  font-weight: bold;
  letter-spacing: .2em;
  font-size: .8125rem;
  margin-top: 2px;
  text-transform: none;
}

/* -------------------------------------------------------------- form */
.lookup-heading { margin-top: 6px; }
.dnsform {
  background-color: #b9dc9a;
  border: solid #426523 1px;
  color: #426523;
  font-size: 105%;
  padding: 5px 5px;
}
.dnsformentry { display: inline-block; vertical-align: top; }
.label { font-weight: normal; }

input, select { padding: 3px; }
/* Ẩn mũi tên dropdown của datalist (gợi ý vẫn hiện khi gõ) */
#host::-webkit-calendar-picker-indicator { display: none !important; }
#host::-webkit-list-button { display: none !important; }
input[type="submit"] { padding-left: 8px; padding-right: 8px; cursor: pointer; }

/* -------------------------------------------------------------- toolbar (chụp ảnh / copy link) */
.tools-row {
  display: flex;
  justify-content: flex-start;       /* sát mép trái */
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px 0;
}
.tool-group { display: inline-flex; gap: 16px; }
.tool-btn {
  font-family: arial, sans-serif;
  font-size: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c26b1d;
  cursor: pointer;
  line-height: 1.2;
  text-decoration: none;             /* không gạch chân */
}
.tool-btn:hover  { color: #a95a15; }
.tool-msg { font-size: 12px; color: #2f7a2f; }

/* -------------------------------------------------------------- nav / content */
.nav {
  font-family: verdana, arial, sans-serif;
  margin: 1rem 0 1.4rem;
  font-size: .8125rem;
}
#content { font-family: arial, sans-serif; font-size: 130%; }

.searchpath {
  letter-spacing: 0;
  line-height: 1.4em;
  padding: 7px 10px 0 0;
  font-size: .8125rem;
}
.query_duration { font-weight: bold; }
.doh-note { color: #888; font-style: italic; }

.error { color: #ea173b; }
.sugg  { color: green; padding-right: 10px; }

/* -------------------------------------------------------------- result table */
table.resultTable { margin: 2em 1em 0 0; border-collapse: collapse; width: 100%; }
th.resultTable { color: #c26b1d; font-weight: bold; text-align: left; padding: 9px; }
.resultTable tr.answerRow { border-bottom: solid #e2e1df 1px; border-top: solid #e2e1df 1px; }
.resultTable tr.answerRow td { padding: 9px; }

/* Thụt trái 9px đồng nhất cho nội dung kết quả để thẳng hàng với cột đầu của bảng,
   đồng thời chừa khoảng đệm cho chữ khi hover nền cam. */
.nav,
.searchpath,
#found, #err-msg, #sugg,
.tools-row,
#total,
#footer,
#mail-result { padding-left: 9px; }

/* -------------------------------------------------------------- Mail check */
#mail-result { margin-top: 1.4em; }
.mail-sec { margin: 0 0 20px; }
.mail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mail-name { color: #c26b1d; font-weight: bold; font-size: 15px; }
.mail-status { font-size: 11px; font-weight: bold; padding: 2px 9px; border-radius: 11px; letter-spacing: .02em; }
.mail-status.ok   { color: #2f7a2f; background: #e7f3e1; }
.mail-status.bad  { color: #b02b2b; background: #f8e7e7; }
.mail-status.warn { color: #9a6a12; background: #f7efd9; }
.mail-desc { color: #555; font-size: 13px; margin: 0 0 7px; line-height: 1.5; }
.mail-desc code { background: #f3efe7; padding: 1px 5px; border-radius: 3px; font-size: 12px; color: #7a4a12; }
.mail-box {
  position: relative;
  background: #f8f8f6; border: 1px solid #e6e4df; border-radius: 5px;
  padding: 9px 12px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px; color: #333; overflow-wrap: anywhere; line-height: 1.55; max-width: 700px;
}
/* Tô nền theo trạng thái (Mẫu 3) */
.mail-box.ok  { background: #eef7ea; border-color: #cbe6c2; color: #244a2a; }
.mail-box.bad { background: #fdeeee; border-color: #f1cbcb; color: #7a2a2a; }
.mail-box .mb-text { padding-right: 26px; }
.mb-copy {
  position: absolute; top: 6px; right: 6px; opacity: 0;
  background: #fff; border: 1px solid #d8d8d2; border-radius: 4px; color: #888;
  padding: 3px 5px; cursor: pointer; line-height: 0; transition: opacity .12s ease;
}
.mail-box:hover .mb-copy { opacity: 1; }
.mb-copy:hover  { color: #c26b1d; border-color: #c9a06f; }
.mb-copy.copied { color: #2f7a2f; border-color: #8ec98e; }
.mb-copy svg { display: block; }
.mail-loading { color: #888; font-style: italic; font-size: 13px; padding: 6px 0; }

.dkim-form { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; flex-wrap: wrap; }
.dkim-label { font-size: 13px; color: #555; }
.dkim-form input {
  width: auto; padding: 5px 7px; border: 1px solid #b7b7b7; border-radius: 3px; font-size: 14px;
}
#dkim-domain { width: 220px; }
#dkim-selector { width: 220px; }
.dkim-btn {
  padding: 5px 13px; border: 1px solid #c26b1d; background: #fff; color: #c26b1d;
  border-radius: 4px; cursor: pointer; font-size: 13px;
}
.dkim-btn:hover { background: #c26b1d; color: #fff; }
.dkim-common { font-size: 12.5px; color: #777; margin-bottom: 6px; }
.dkim-chip {
  display: inline-block; color: #5a6b7d; text-decoration: none;
  background: #eef2f6; border: 1px solid #dde3ea; border-radius: 12px;
  padding: 2px 11px; margin: 0 3px 5px 0; font-size: 12px;
}
.dkim-chip:hover { background: #e2e9f1; border-color: #cbd6e2; color: #3f5163; }
#dkim-results { margin-top: 6px; }
#dkim-results .mail-sec { margin-bottom: 0; }
.resultTable td.sp-answer { word-break: break-all; }

#total { margin-top: 1.5em; }
#footer { margin-top: 15px; font-size: .8125rem; }

/* ============================================================== STATES */
/* mặc định (mobile): các phần tử động ẩn/hiện qua thuộc tính hidden hoặc class */
.subtitle, .lookup-heading, .home-hint { display: none; }
.state-home .subtitle,
.state-home .lookup-heading,
.state-home .home-hint { display: block; }

/* Home: logo/subtitle canh giữa; heading + form full-width canh trái (giống bản gốc) */
.state-home #logo { float: none; text-align: center; }
.state-home .mainform { margin-left: 0; text-align: left; }
.state-home .lookup-heading { text-align: left; }
.state-home .dnsform {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  width: auto;
  max-width: 680px;                  /* thu hẹp lại, không kéo dài hết trang */
  text-align: left;
  margin: 0;
}
.state-home .dnsformentry { margin: 0; width: auto; max-width: none; }
.state-home .dnsformentry:first-of-type { flex: 1 1 200px; max-width: none; }
.state-home .dnsformentry:first-of-type input { width: 100%; }
.state-home #content { display: none; }

/* -------------------------------------------------------------- home info */
.home-info { display: none; }
.state-home .home-info {
  display: block;
  margin-top: 26px;
  max-width: 720px;
  font-size: .8125rem;
  line-height: 1.6;
  color: #333;
}
.home-info h3 { margin: 0 0 8px; }
.home-info p { margin: 0; }
.home-info code {
  background: #f3efe7;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: #7a4a12;
}
.home-info { max-width: 720px; }
.home-info .info-cols { display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.home-info .info-block.about  { flex: 1 1 330px; }
.home-info .info-block.rectypes { flex: 0 1 300px; }
.home-info .rec-list { list-style: none; margin: 0; padding: 0; }
.home-info .rec-list li { padding: 2px 0; white-space: nowrap; }
.home-info .rec-list b { color: #c26b1d; display: inline-block; min-width: 56px; }

/* Result: canh trái */
.state-result .subtitle,
.state-result .lookup-heading { display: none; }

/* -------------------------------------------------------------- breakpoints */
@media only screen and (min-width: 480px) {
  .dnsform { width: auto; max-width: 380px; }
  input { width: 100%; }
  .dnsformentry:first-of-type { max-width: 180px; width: 100%; margin-right: 5px; }
  input[type="submit"] { padding-left: 3px; padding-right: 3px; }

  /* Home: giữ form 1 hàng full-width, host input co giãn */
  .state-home .dnsformentry:first-of-type { max-width: none; width: auto; margin-right: 0; }
}

@media only screen and (min-width: 600px) {
  body { margin: 10px; }
  /* Result: logo float trái, form sang phải */
  .state-result #logo { float: left; vertical-align: bottom; }
  .state-result .mainform { margin-left: 180px; }
  .state-result .dnsform { width: auto; max-width: 380px; margin-left: 0; }
}

@media only screen and (min-width: 768px) {
  body { margin: 10px 20px; padding: 1rem 0; }
  input { width: 100%; }
  table.resultTable { min-width: 500px; max-width: 700px; }
  .state-result .mainform { margin-left: 200px; }
  .state-result .dnsform { display: inline-flex; align-items: flex-end; gap: 12px; max-width: none; }
  .state-result .dnsformentry { margin: 0; }
  .state-result .dnsformentry:first-of-type { max-width: none; }
  .state-result .dnsformentry:first-of-type input { width: 304px; }
}

/* hover trên desktop lớn (giống bản gốc) */
@media only screen and (min-device-width: 1025px) {
  table.resultTable tr.answerRow:hover { background-color: #c26b1d; color: #fff; }
  table.resultTable tr.answerRow:hover a { color: #fff; }
}

/* -------------------------------------------------------------- mobile table */
@media only screen and (max-width: 480px) {
  table.resultTable, thead, tbody, th, td, tr { display: block; }
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  .resultTable tr.answerRow { border-bottom: 1px solid #ccc; }
  .resultTable tr.answerRow td { border: 0; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
  .resultTable td:before {
    position: absolute; left: 6px; width: 45%; padding-right: 10px;
    white-space: nowrap; color: #c26b1d; font-weight: bold; text-align: left;
  }
  .resultTable td:nth-of-type(1):before { content: "Domain"; }
  .resultTable td:nth-of-type(2):before { content: "Type"; }
  .resultTable td:nth-of-type(3):before { content: "TTL"; }
  .resultTable td:nth-of-type(4):before { content: "Answer"; }
}

/* -------------------------------------------------------------- server picker (trong toolbar) */
.tool-btn .gear { font-size: 13px; }
#btn-server.active { color: #2f7a2f; font-weight: bold; }
.server-select {
  font-family: arial, sans-serif;
  font-size: 13px;
  padding: 3px 4px;
  border: 1px solid #c8b48f;
  border-radius: 3px;
  background: #fff;
  color: #333;
}

/* -------------------------------------------------------------- IP origin (hover + popup) */
.ip-cell { cursor: default; }

.ip-popup {
  position: absolute;
  z-index: 999;
  min-width: 250px;
  max-width: 320px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  font-family: arial, sans-serif;
  font-size: 13px;
  color: #333;
  padding: 0;
  overflow: hidden;
}
.ip-popup .ipp-close {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 1;
  cursor: pointer;
  color: #9a9a9a;
  font-weight: bold;
  font-size: 13px;
  line-height: 1;
}
.ip-popup .ipp-close:hover { color: #555; }
.ip-popup .ipp-ip { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; }

.ip-popup .ipp-body {
  padding: 13px 16px 13px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 8px;
  column-gap: 16px;
  align-items: center;
}
.ip-popup .ipp-body .k { color: #8a8a8a; font-size: 12px; white-space: nowrap; }
.ip-popup .ipp-body .v { color: #1f1f1f; word-break: break-word; line-height: 1.35; }
.ip-popup .ipp-country { display: inline-flex; align-items: center; gap: 8px; }
.ip-popup .ipp-flag { font-size: 16px; line-height: 1; }
.ip-popup .ipp-loading, .ip-popup .ipp-err { padding: 13px; color: #666; }
.ip-popup .ipp-err { color: #b02b2b; }