/* ==========================================================================
   dns-ui.css - design system dung chung cho cac trang DNS giao dien moi.
   Port tu ban thiet ke da duoc duyet (prototype dns-setting.html).
   KHONG phu thuoc bootstrap / style.css cu - cac trang dung file nay phai
   render bang layout templates/layout/dns_app.tpl.
   ========================================================================== */

:root{
  color-scheme:light;
  /* Mau theo trang landing tenten.vn/vi/Landing/tenten-domain-mcp (navy + xanh #0066B2)
     de 2 trang cung 1 nhan dien. ink-3 #536A7E van >= 4.9:1 tren moi nen (WCAG AA). */
  --bg:#F5F8FB; --surface:#FFFFFF; --surface-2:#F7FAFC; --surface-3:#EEF3F8;
  --ink:#112D49; --ink-2:#405C75; --ink-3:#536A7E;
  --line:#E1E8EF; --line-2:#D3DEE8;
  --brand:#0066B2; --brand-hover:#004D88; --brand-bg:#EAF5FF; --brand-ink:#0A5C98; --on-brand:#FFFFFF;
  --ok:#1A7A4C; --ok-bg:#E8F4EE; --warn:#935700; --warn-bg:#FBF2E1; --err:#B3362B; --err-bg:#FBEDEB;
  --focus:#0066B2;
  --logo-1:#12489C; --logo-2:#1CA3E0; --logo-dim:#8A98AB;
  --tile-b:#E6EEF9; --tile-b-ink:#1B5AA8; --tile-r:#FBE9E6; --tile-r-ink:#B3362B;
  --tile-g:#E5F2EA; --tile-g-ink:#1B7A4B; --tile-o:#FBF0DE; --tile-o-ink:#8E5600;
  /* Mau theo NHOM loai ban ghi - nhin cot Loai la biet ban ghi lam gi:
     dia chi (A/AAAA), bi danh (CNAME/ALIAS), thu (MX), van ban (TXT),
     ha tang (NS/SRV), bao mat (CAA), web (REDIRECT/FRAME/Page). */
  --t-addr:#E6EEF9; --t-addr-ink:#1D4F8F;
  --t-alias:#EFEBFA; --t-alias-ink:#55389E;
  --t-mail:#FBF0DE; --t-mail-ink:#87500A;
  --t-text:#E3F2EF; --t-text-ink:#16655A;
  --t-infra:#ECEEF2; --t-infra-ink:#3C4657;
  --t-sec:#FAEAEE; --t-sec-ink:#962B45;
  --t-web:#E2F2F7; --t-web-ink:#135E73;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --shadow:0 1px 2px rgba(19,26,36,.04), 0 1px 1px rgba(19,26,36,.02);
  --shadow-pop:0 16px 48px -8px rgba(19,26,36,.22), 0 2px 6px rgba(19,26,36,.06);
  --scrim:rgba(15,21,31,.44);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark; --bg:#111419; --surface:#181C23; --surface-2:#1D222A; --surface-3:#252B35;
    --ink:#E4E8EE; --ink-2:#ABB4C1; --ink-3:#808A99;
    --line:#282E38; --line-2:#363D49;
    --brand:#79A9E4; --brand-hover:#93BAEA; --brand-bg:#1B2738; --brand-ink:#A9C7EE; --on-brand:#0F1722;
    --ok:#62C290; --ok-bg:#15271E; --warn:#E2AA55; --warn-bg:#2C2416; --err:#EE8175; --err-bg:#341C19;
    --logo-1:#6FA4E6; --logo-2:#55C2F0; --logo-dim:#8A94A3;
    --tile-b:#1E2E44; --tile-b-ink:#8FB6E8; --tile-r:#3A2220; --tile-r-ink:#EE8175;
    --tile-g:#182C22; --tile-g-ink:#62C290; --tile-o:#332818; --tile-o-ink:#E2AA55;
    --t-addr:#1C2A3E; --t-addr-ink:#94B9EA; --t-alias:#262039; --t-alias-ink:#BBA8EE;
    --t-mail:#30261A; --t-mail-ink:#E6B46A; --t-text:#162B28; --t-text-ink:#76CDBE;
    --t-infra:#232933; --t-infra-ink:#AEB8C6; --t-sec:#33202A; --t-sec-ink:#EE9AB0;
    --t-web:#152A31; --t-web-ink:#7CC9DE;
    --focus:#93BAEA;
    --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-pop:0 16px 48px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3); --scrim:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark; --bg:#111419; --surface:#181C23; --surface-2:#1D222A; --surface-3:#252B35;
  --ink:#E4E8EE; --ink-2:#ABB4C1; --ink-3:#808A99;
  --line:#282E38; --line-2:#363D49;
  --brand:#79A9E4; --brand-hover:#93BAEA; --brand-bg:#1B2738; --brand-ink:#A9C7EE; --on-brand:#0F1722;
  --ok:#62C290; --ok-bg:#15271E; --warn:#E2AA55; --warn-bg:#2C2416; --err:#EE8175; --err-bg:#341C19;
  --logo-1:#6FA4E6; --logo-2:#55C2F0; --logo-dim:#8A94A3;
  --tile-b:#1E2E44; --tile-b-ink:#8FB6E8; --tile-r:#3A2220; --tile-r-ink:#EE8175;
  --tile-g:#182C22; --tile-g-ink:#62C290; --tile-o:#332818; --tile-o-ink:#E2AA55;
  --t-addr:#1C2A3E; --t-addr-ink:#94B9EA; --t-alias:#262039; --t-alias-ink:#BBA8EE;
  --t-mail:#30261A; --t-mail-ink:#E6B46A; --t-text:#162B28; --t-text-ink:#76CDBE;
  --t-infra:#232933; --t-infra-ink:#AEB8C6; --t-sec:#33202A; --t-sec-ink:#EE9AB0;
  --t-web:#152A31; --t-web-ink:#7CC9DE;
  --focus:#93BAEA;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-pop:0 16px 48px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3); --scrim:rgba(0,0,0,.6);
}

*{ box-sizing:border-box; }
/* Font Open Sans dung chung voi trang tenten.vn/vi/Landing/tenten-domain-mcp - tu host, khong qua Google.
   woff2 (@fontsource/open-sans 5.0.28) tach theo bo ky tu: trinh duyet chi tai phan can (latin + vietnamese).
   Du 4 muc dam 400/500/600/700 - truoc day chi co Regular + Bold nen 500 hien thanh 400, 600 thanh 700. */
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-vietnamese-400.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-ext-400.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-400.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-vietnamese-500.woff2') format('woff2'); font-weight:500; font-display:swap; unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-ext-500.woff2') format('woff2'); font-weight:500; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-500.woff2') format('woff2'); font-weight:500; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-vietnamese-600.woff2') format('woff2'); font-weight:600; font-display:swap; unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-ext-600.woff2') format('woff2'); font-weight:600; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-600.woff2') format('woff2'); font-weight:600; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-vietnamese-700.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-ext-700.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Open Sans"; src:url('/font/open-sans-latin-700.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
html, body{ margin:0; padding:0; }
/* Thuoc tinh hidden PHAI thang moi rule display cua minh (vi du .bulkbar,
   .menu deu dat display:flex/grid nen se de bep rule [hidden] mac dinh cua
   trinh duyet). Thieu dong nay, thanh thao tac hang loat hien ca khi chua
   chon ban ghi nao. */
[hidden]{ display:none !important; }
body{ background:var(--bg); color:var(--ink); font:400 14px/1.6 "Open Sans", Arial, sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button, input, select, textarea{ font:inherit; color:inherit; }
a{ color:var(--brand); }
h1,h2,h3{ margin:0; text-wrap:balance; font-weight:700; letter-spacing:-.01em; }
.num{ font-variant-numeric:tabular-nums; }
svg.i{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Thay cho thuoc tinh style="" - CSP style-src khong co 'unsafe-inline' nen
   style="" trong HTML (ca HTML do JS gan qua innerHTML) bi chan. */
.svg-sprite{ position:absolute; }
.u-m0{ margin:0; }
.u-mb12{ margin:0 0 12px; }
.u-mt16{ margin-top:16px; }
.u-mb16{ margin-bottom:16px; }
.u-fw500{ font-weight:500; }
.xbtn.xbtn-sm{ width:24px; height:24px; }

/* ---------- app shell ---------- */
/* Header 1 hang: [logo] ......... ten-mien · han dung · ho so | [tai khoan].
   Dinh tren dau khi cuon (desktop) - luon thay dang thao tac tren ten mien nao. */
.topbar{ background:color-mix(in srgb, var(--surface) 92%, transparent); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
  -webkit-backdrop-filter:saturate(1.6) blur(10px); backdrop-filter:saturate(1.6) blur(10px); }
.topbar-in{ max-width:min(1600px,100%); min-height:60px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; gap:14px; }
/* Khoa chieu cao o chua logo: 2 file logo co khung cao khac nhau (40/30px)
   nen neu de chung tu quyet dinh thi header se cao thap khac nhau giua 2
   giao dien (do bang anh chup that: 60px vs 58px). */
.topbar .logo{ display:flex; align-items:center; gap:10px; height:40px; }
.topbar .logo img{ display:block; width:auto; max-width:100%; }
/* 2 file khac ti le khung: logo_domain.png 310x89 nhung phan co muc chi cao
   66px (74% khung), con logo_tenten_dark.svg 174x38 sat vien. Dat 40px/30px
   de phan chu o 2 logo cao bang nhau (~30px) va rong bang nhau (~137px),
   doi giao dien KHONG lam header nhay. */
/* logo_domain.png co le trang KHONG can xung (tren 7px, duoi 16px tren
   khung 89px) nen phan chu bi cao hon 2px so voi ban SVG. Day xuong 5%
   chieu cao chinh no (=2px o 40px, 1.6px o 32px) de doi giao dien thi
   logo dung yen. transform khong lam thay doi layout. */
.topbar .logo .logo-light{ height:40px; transform:translateY(5%); }
.topbar .logo .logo-dark{ height:30px; display:none; }
.topbar .spacer{ flex:1; }

/* Thong tin ten mien ben phai, ngan voi nut tai khoan bang 1 vach doc. */
.domaininfo{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px 12px; min-width:0;
  padding-right:16px; margin-right:2px; border-right:1px solid var(--line); }
.domaininfo .dname{ margin:0; font-size:15px; font-weight:700; line-height:1.3; letter-spacing:-.011em; color:var(--ink); word-break:break-all; }
.domaininfo .sep{ width:3px; height:3px; border-radius:50%; background:var(--line-2); flex:none; }
.fact-inline{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 7px; min-width:0; font-size:14px; }
.fact-inline .k{ font-size:14px; color:var(--ink-3); }
.fact-inline .v{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-weight:500; color:var(--ink-2); }
.fact-inline .v .num{ color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* Menu nguoi dung (nut tron + dropdown). */
.usermenu{ position:relative; flex:none; }
.avatarbtn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); cursor:pointer; display:grid; place-items:center; }
.avatarbtn:hover{ background:var(--surface-2); border-color:var(--ink-3); color:var(--ink); }
.avatarbtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.avatarbtn[aria-expanded="true"]{ background:var(--brand-bg); border-color:var(--brand); color:var(--brand-ink); }
.avatarbtn .i{ width:20px; height:20px; }
.menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:30; min-width:236px; padding:6px; display:grid; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop); }
.menu .menu-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:8px;
  background:none; color:var(--ink); font-size:14px; font-weight:450; text-align:left; text-decoration:none; cursor:pointer; }
.menu .menu-item:hover{ background:var(--surface-2); }
.menu .menu-item:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.menu .menu-item .i{ width:17px; height:17px; color:var(--ink-3); }
.menu .menu-item.danger{ color:var(--err); } .menu .menu-item.danger .i{ color:var(--err); }
.menu .menu-item.danger:hover{ background:var(--err-bg); }
.menu .menu-sep{ height:1px; margin:4px 2px; background:var(--line); }
/* Muc doi giao dien: hien mat trang khi dang sang, hien mat troi khi dang toi. */
#theme-toggle .ic-moon{ display:inline; } #theme-toggle .ic-sun{ display:none; }
:root[data-theme="dark"] #theme-toggle .ic-moon{ display:none; }
:root[data-theme="dark"] #theme-toggle .ic-sun{ display:inline; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #theme-toggle .ic-moon{ display:none; }
  :root:not([data-theme="light"]) #theme-toggle .ic-sun{ display:inline; }
}
.wrap{ max-width:min(1600px,100%); margin:0 auto; padding-inline:20px; padding-block:20px 48px; display:grid; gap:16px; }
/* Footer ban quyen luon nam SAT DAY man hinh khi noi dung ngan; noi dung dai
   thi footer bi day xuong duoi nhu binh thuong. */
body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body > .wrap{ width:100%; }
.sitefoot{ margin-top:auto; }
.sitefoot{ border-top:1px solid var(--line); background:transparent; color:var(--ink-3); font-size:12.5px; }
.sitefoot-in{ max-width:min(1600px,100%); margin:0 auto; padding:16px 20px; display:flex; flex-wrap:wrap; gap:2px 16px; justify-content:space-between; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-weight:600; font-size:14px; letter-spacing:-.003em; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .12s, border-color .12s, color .12s; }
.btn:hover{ background:var(--surface-2); border-color:var(--ink-3); }
.btn:focus-visible, .linkbtn:focus-visible, .quick:focus-visible, .rowbtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.btn.primary, #panel-page-form .btn.btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 1px 2px rgba(19,26,36,.12); }
.btn.primary:hover, #panel-page-form .btn.btn-primary:hover{ background:var(--brand-hover); border-color:var(--brand-hover); }
.btn.danger{ background:var(--err); border-color:var(--err); color:var(--surface); }
.btn.danger:hover{ filter:brightness(.95); }
/* Nut dang goi AJAX (webroot/js/busy.js): khoa + spinner, chong bam 2 lan. */
[aria-busy="true"]{ cursor:progress; }
.btn[aria-busy="true"], .btn:disabled{ opacity:.75; }
.btn[aria-busy="true"]:hover{ filter:none; }
a[aria-busy="true"]{ pointer-events:none; }
.busy-spin{ display:inline-block; width:14px; height:14px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:busyspin .7s linear infinite; }
@keyframes busyspin{ to{ transform:rotate(360deg); } }
/* Spinner la tin hieu trang thai, khong phai hieu ung: giu quay (cham) ca khi giam chuyen dong. */
@media (prefers-reduced-motion: reduce){ .busy-spin{ animation:busyspin 1.6s linear infinite !important; } }
.btn.ghost{ border-color:transparent; background:transparent; color:var(--ink-2); }
.btn.ghost:hover{ background:var(--surface-3); color:var(--ink); }
.btn.sm{ height:30px; padding:0 10px; font-size:14px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.linkbtn{ border:0; background:none; padding:0; color:var(--brand); cursor:pointer; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.linkbtn:hover{ text-decoration:underline; }
.linkbtn.danger{ color:var(--err); }

/* ---------- domain summary ---------- */
.domainbar{ background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); align-items:stretch; overflow:hidden; }
.domainbar > *{ padding:16px 20px; }
.domainbar .dom{ background:var(--brand-bg); display:flex; gap:12px; align-items:center; }
.domainbar .dom .ic{ width:40px; height:40px; border-radius:10px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; flex:none; }
.domainbar .dom .ic svg{ width:22px; height:22px; }
.domainbar .name{ font-size:21px; font-weight:700; letter-spacing:-.01em; word-break:break-all; color:var(--brand-ink); line-height:1.2; }
.domainbar .sys{ margin-top:5px; }
.fact{ border-left:1px solid var(--line); display:grid; gap:6px; align-content:start; }
.fact .k{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3); letter-spacing:.03em; text-transform:uppercase; }
.fact .k .t{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex:none; }
.fact .k .t svg{ width:14px; height:14px; }
.fact .k .t.b{ background:var(--tile-b); color:var(--tile-b-ink); }
.fact .k .t.o{ background:var(--tile-o); color:var(--tile-o-ink); }
.fact .k .t.g{ background:var(--tile-g); color:var(--tile-g-ink); }
.fact .v{ font-weight:500; font-size:15px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.fact .sub{ font-size:14px; color:var(--ink-2); }

/* ---------- chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip.ok{ background:var(--ok-bg); color:var(--ok); }
.chip.warn{ background:var(--warn-bg); color:var(--warn); }
.chip.err{ background:var(--err-bg); color:var(--err); }
.chip.muted{ background:var(--surface-3); color:var(--ink-2); }
.chip.brand{ background:var(--brand); color:var(--on-brand); box-shadow:none; }
.typebadge{ display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:22px; padding:0 8px; border-radius:5px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--t-infra); color:var(--t-infra-ink); }
.typebadge[data-t]{ font:700 12px/1 "Open Sans", Arial, sans-serif; letter-spacing:.02em; }
.typebadge[data-t="A"], .typebadge[data-t="AAAA"]{ background:var(--t-addr); color:var(--t-addr-ink); }
.typebadge[data-t="CNAME"], .typebadge[data-t="ALIAS"]{ background:var(--t-alias); color:var(--t-alias-ink); }
.typebadge[data-t="MX"]{ background:var(--t-mail); color:var(--t-mail-ink); }
.typebadge[data-t="TXT"]{ background:var(--t-text); color:var(--t-text-ink); }
.typebadge[data-t="CAA"]{ background:var(--t-sec); color:var(--t-sec-ink); }
.typebadge[data-t="REDIRECT"], .typebadge[data-t="FRAME"], .typebadge[data-t="Page"]{ background:var(--t-web); color:var(--t-web-ink); }

/* ---------- layout ---------- */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 328px; gap:20px; align-items:start; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); min-width:0; }
.card-h{ padding:18px 20px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.card-h h2{ font-size:17px; }
.rail .card-h h2, details.card .card-h h2{ font-size:14.5px; }
.card-h .desc{ font-size:14px; color:var(--ink-3); flex-basis:100%; margin:-8px 0 0; }
.card-h h2 + .stats{ flex-basis:auto; margin:1px 0 0 -2px; }
.card-h .actions{ margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.toolbar{ padding:0 20px 14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.field-search{ position:relative; flex:1 1 260px; max-width:420px; }
.field-search svg{ position:absolute; left:11px; top:10px; color:var(--ink-3); pointer-events:none; }
.input, .select, .textarea{ width:100%; height:36px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); padding:0 11px; transition:border-color .12s, box-shadow .12s; }
.input::placeholder, .textarea::placeholder{ color:var(--ink-3); opacity:.85; }
.input:hover:not(:focus):not([readonly]), .select:hover:not(:focus), .textarea:hover:not(:focus){ border-color:color-mix(in srgb, var(--ink-3) 60%, var(--line-2)); }
/* Gia tri DNS (ten, IP, chuoi TXT...) go bang chu don cach - de soat tung ky tu. */
#rec-form .input:not(.num), #rec-form .textarea{ font-family:var(--mono); font-size:14px; }
/* O Ten (@, www, mail) dung chu thuong nhu cot Ten trong bang - mono lam '@' nho lech va placeholder tieng Viet bi gian. */
#rec-form #f-host{ font-family:"Open Sans", Arial, sans-serif; font-size:14px; }
.textarea{ height:auto; min-height:84px; padding:8px 10px; resize:vertical; line-height:1.5; }
.field-search .input{ padding-left:34px; }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.input.invalid, .select.invalid, .textarea.invalid{ border-color:var(--err); box-shadow:0 0 0 3px var(--err-bg); }
.input[readonly], .input[disabled], .select[disabled]{ background:var(--surface-3); color:var(--ink-2); cursor:not-allowed; }
.toolbar .select{ width:auto; min-width:150px; }
.toolbar .meta{ margin-left:auto; font-size:14px; color:var(--ink-3); }
.select{ appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px; }

.stats{ display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%; }
.stats{ gap:6px 18px; margin-top:-4px; }
.stat{ display:inline-flex; align-items:center; gap:7px; height:20px; font-size:14px; color:var(--ink-2); }
.stat b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
/* So luong ban ghi: badge canh tieu de the. */
.stats .count{ display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 7px; border-radius:999px;
  background:var(--surface-3); color:var(--ink-2); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.stat::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--line-2); }
/* Bien the theo trang thai - dung o trang DNS he thong moi (co zone_id),
   noi moi ban ghi co trang thai rieng: dang hoat dong / dang xu ly / loi. */
.stat.ok::before{ background:var(--ok); }
.stat.warn::before{ background:var(--warn); }
.stat.err::before{ background:var(--err); }
.bulkbar{ margin:0 20px 14px; padding:7px 8px 7px 14px; border-radius:10px; background:var(--brand-bg); color:var(--brand-ink); display:flex; align-items:center; gap:12px; font-weight:500; flex-wrap:wrap; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.bulkbar .spacer{ flex:1; }

/* ---------- table ---------- */
.tablewrap{ overflow-x:auto; border-top:1px solid var(--line); }
.card table{ width:100%; border-collapse:collapse; }
.card th, .card td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.card th{ padding-block:9px; font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.03em; text-transform:uppercase; background:var(--surface-2); white-space:nowrap; }
.card tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:var(--surface-2); }
tbody tr.sel td{ background:var(--brand-bg); }
tbody tr.sel td:first-child{ box-shadow:inset 3px 0 0 var(--brand); }
td.cb, th.cb{ width:44px; padding-right:0; }
/* Ten ban ghi hien dung nhu nguoi dung nhap (@, www, mail); ten day du o title. */
td.host{ font-weight:500; word-break:break-all; min-width:110px; }
#panel-records td.host{ font:600 14px/1.45 "Open Sans", Arial, sans-serif; word-break:normal; }
td.host .hn{ color:var(--ink); word-break:break-all; }
td.val{ word-break:break-all; max-width:560px; }
/* Nut sao chep gia tri: an tren desktop, hien khi re chuot/tab vao dong. */
#panel-records td.val{ position:relative; padding-right:40px; font:400 14px/1.5 var(--mono); color:var(--ink); }
#panel-records td.val .copy{ position:absolute; right:8px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .12s; }
#panel-records tbody tr:hover td.val .copy, #panel-records td.val .copy:focus-visible{ opacity:1; }
@media (hover:none){ #panel-records td.val .copy{ opacity:1; } }
td.val .sub{ display:block; font-size:14px; color:var(--ink-3); margin-top:2px; }
/* Chip trang thai xuong DONG RIENG duoi gia tri - de cung dong thi no dinh
   sat chu va o Gia tri bi day hep lai. */
td.val .statusline{ display:block; margin-top:6px; }
td.st{ white-space:nowrap; }
/* Trang thai trong bang: chi la cham mau + chu (khong vien) - 10 dong cung
   "Dang hoat dong" thi vien xanh lap lai rat on ao. */
td.st .chip{ height:auto; padding:0; background:none; box-shadow:none; font-size:14px; font-weight:450; color:var(--ink-2); gap:8px; }
td.st .chip::before{ width:7px; height:7px; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
td.st .chip.ok::before{ background:var(--ok); color:var(--ok); }
td.st .chip.warn{ color:var(--warn); } td.st .chip.err{ color:var(--err); font-weight:500; }
td.st .chip.warn::before{ animation:stpulse 1.4s ease-in-out infinite; }
@keyframes stpulse{ 50%{ opacity:.35; } }
td.prio{ width:90px; }
/* Do uu tien MX dung truoc gia tri ("10 mail.example.com") nhu zone file. */
#panel-records td.val .prio{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:20px; padding:0 5px; margin-right:8px;
  border-radius:4px; background:var(--surface-3); color:var(--ink-2); font:500 11.5px/1 var(--mono); vertical-align:1px; }
td.act{ width:1%; white-space:nowrap; }
input[type=checkbox]{ appearance:none; -webkit-appearance:none; flex:none; width:16px; height:16px; margin:0; vertical-align:middle; cursor:pointer;
  border:1.5px solid var(--line-2); border-radius:4px; background:var(--surface) center/12px no-repeat;
  transition:background-color .12s, border-color .12s, box-shadow .12s; }
input[type=checkbox]:hover:not(:disabled){ border-color:var(--ink-3); }
input[type=checkbox]:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); border-color:var(--brand); }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate{ background-color:var(--brand); border-color:var(--brand); }
input[type=checkbox]:checked{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type=checkbox]:indeterminate{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
input[type=checkbox]:disabled{ opacity:.45; cursor:not-allowed; }
.rowacts{ display:inline-flex; gap:2px; }
/* Bang ban ghi DNS: nut Sua/Xoa chi con icon (co tooltip + aria-label) -
   cot Thao tac gon, khong tran ra mep the. */
#panel-records .rowbtn{ width:32px; height:32px; padding:0; justify-content:center; }
#panel-records .rowbtn span.lb{ display:none; }
#panel-records td.act{ text-align:right; }
#panel-records th:first-child, #panel-records td:first-child{ padding-left:20px; }
#panel-records th:last-child, #panel-records td.act{ padding-right:14px; }
.rowbtn{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 9px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--ink-2); font-size:14px; font-weight:500; cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.rowbtn .i{ width:15px; height:15px; }
.rowbtn:hover{ border-color:var(--line); color:var(--brand-ink); background:var(--brand-bg); }
.rowbtn.del{ color:var(--ink-3); }
.rowbtn.del:hover{ border-color:color-mix(in srgb, var(--err) 25%, transparent); color:var(--err); background:var(--err-bg); }
.rowbtn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.muted{ color:var(--ink-3); }
.tfoot{ padding:12px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:14px; color:var(--ink-2); border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 11px 11px; }
.tfoot .effect-note{ margin:0; color:var(--ink-3); display:inline-flex; align-items:center; gap:7px; }
.tfoot .effect-note::before{ content:""; width:14px; height:14px; flex:none; background:currentColor; opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat; }
.tfoot:has(.pager:empty):has(.effect-note[hidden]){ display:none; }
.pager{ margin-left:auto; display:flex; gap:4px; align-items:center; }
.pagesize{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.pagesize[hidden]{ display:none; }
.pagesize .select{ width:auto; min-width:0; height:32px; padding-block:0; }
.pagesize:not([hidden]) + .pager{ margin-left:0; }
.pager button{ min-width:32px; height:32px; border-radius:7px; border:1px solid var(--line); background:var(--surface); cursor:pointer; padding:0 8px; font-variant-numeric:tabular-nums; }
.pager button:not(:disabled):not([aria-current="page"]):hover{ background:var(--surface-3); }
.pager button[aria-current="page"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:500; }
.pager button:disabled{ opacity:.45; cursor:not-allowed; }
.pager button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.pager .gap{ padding:0 4px; color:var(--ink-3); }
.empty{ padding:44px 20px; text-align:center; color:var(--ink-2); }
.empty strong{ display:block; color:var(--ink); font-weight:500; font-size:15px; margin-bottom:4px; }
.empty .btn{ margin-top:14px; }

/* ---------- side rail ---------- */
.rail{ display:grid; gap:16px; position:sticky; top:80px; }
.rail .card-h{ padding-bottom:8px; }
.rail-body{ padding:0 8px 8px; display:grid; gap:2px; }
.quick{ display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; padding:11px 12px; border:1px solid transparent; border-radius:10px; background:transparent; cursor:pointer; transition:border-color .12s, background .12s; }
.quick:hover{ border-color:var(--line); background:var(--surface-2); }
.quick:hover b{ color:var(--brand-ink); }
.quick .ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none; }
.quick .ic.b{ background:var(--tile-b); color:var(--tile-b-ink); }
.quick .ic.r{ background:var(--tile-r); color:var(--tile-r-ink); }
.quick .ic.g{ background:var(--tile-g); color:var(--tile-g-ink); }
.quick .ic.o{ background:var(--tile-o); color:var(--tile-o-ink); }
.quick .ic svg{ width:18px; height:18px; }
.quick b{ display:block; font-weight:500; color:var(--ink); }
.quick b .ext{ width:13px; height:13px; margin-left:3px; vertical-align:-2px; color:var(--ink-3); }
.quick span{ display:block; font-size:14px; color:var(--ink-3); line-height:1.45; margin-top:2px; text-wrap:pretty; }
/* Dong "Nameserver: ..." duoi mo ta the Ban ghi DNS - nho gon, khong chiem cho. */
.card-h .nsline{ flex-basis:100%; margin:-4px 0 0; display:flex; flex-wrap:wrap; align-items:center; line-height:1.5; gap:6px; font-size:14px; color:var(--ink-3); }
.nsline .k{ color:var(--ink-2); font-weight:500; margin-right:2px; }
/* Moi NS la 1 the rieng: o so thu tu nho mau nhat + ten NS - de phan biet
   tung NS thay vi 1 chuoi dai noi bang dau cham. */
.nsline .nsitem{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px 0 3px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); white-space:nowrap; }
.nsline .mono{ font-family:var(--mono); }
.nsline .nsno{ display:grid; place-items:center; min-width:18px; height:18px; padding:0 3px; border-radius:4px; background:var(--surface-3); color:var(--ink-3); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.nsline .mono{ color:var(--ink); font-size:12px; line-height:1; }
.nsline .nschange{ margin-left:4px; display:inline-flex; align-items:center; gap:3px; }
/* The Nameserver o cot phai: moi NS 1 dong, so thu tu + ten + nut sao chep. */
.nscard .card-h{ padding-bottom:10px; }
.nscard .nsline{ margin:0; padding:0 12px 14px; display:grid; gap:4px; font-size:14px; color:var(--ink-3); }
.nscard .nsline > .k{ display:none; }
.nscard .nsline > .muted{ padding:0 8px; }
.nscard .nsline .nsitem{ display:flex; height:34px; padding:0 4px 0 8px; gap:10px; border:0; border-radius:8px; background:var(--surface-2); }
.nscard .nsline .nsitem .mono{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.nscard .nsline .nsno{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.nscard .nsline .copy{ opacity:.7; }
.nscard .nsline .nsitem:hover .copy{ opacity:1; }
.nscard .nsline .nschange{ margin:6px 0 0; padding:0 8px; }
.nsline .nschange .i{ width:12px; height:12px; }
details.card > summary{ list-style:none; cursor:pointer; padding-bottom:16px; }
details.card > summary::-webkit-details-marker{ display:none; }
details.card > summary:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; border-radius:12px; }
details.card > summary:hover h2{ color:var(--brand-ink); }
details.card > summary .chev{ margin-left:auto; color:var(--ink-3); transition:transform .15s; }
details.card[open] > summary{ padding-bottom:8px; }
/* The thu gon: le tren = le duoi de tieu de nam giua (rule .rail .card-h
   o tren dat padding-bottom 8px cho the dang mo, thang rule chung). */
.rail details.card:not([open]) > summary{ padding-bottom:18px; }
details.card[open] > summary .chev{ transform:rotate(180deg); }
.notes{ padding:0 20px 16px; margin:0; display:grid; gap:8px; font-size:14px; color:var(--ink-2); list-style:none; }
.notes li{ padding-left:14px; position:relative; text-wrap:pretty; }
.notes li::before{ content:""; position:absolute; left:2px; top:9px; width:4px; height:4px; border-radius:50%; background:var(--ink-3); }
.notes strong{ color:var(--ink); font-weight:500; }
#panel-records .notes strong{ font-family:var(--mono); font-size:14px; }

/* ---------- callouts ---------- */
.callout{ display:flex; gap:10px; padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.5; }
.callout svg{ margin-top:2px; }
.callout.warn{ background:var(--warn-bg); color:var(--ink); }
.callout.warn svg{ color:var(--warn); }
.callout.info{ background:var(--brand-bg); color:var(--ink); }
.callout.info svg{ color:var(--brand-ink); }
.callout.err{ background:var(--err-bg); color:var(--ink); }
.callout.err svg{ color:var(--err); }

/* ---------- drawer & dialog ---------- */
.scrim{ position:fixed; inset:0; background:var(--scrim); z-index:40; animation:fade .15s ease; }
@keyframes fade{ from{ opacity:0; } }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(520px,100%); background:var(--surface); z-index:41; display:flex; flex-direction:column; box-shadow:var(--shadow-pop); animation:slide .2s ease; }
@keyframes slide{ from{ transform:translateX(24px); opacity:0; } }
.drawer-h{ padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding-top:calc(18px + env(safe-area-inset-top, 0px)); }
.drawer-h h3{ font-size:16px; flex:1; }
.drawer-b{ padding:20px; overflow-y:auto; flex:1; display:grid; gap:16px; align-content:start; }
.drawer-f{ padding:14px 20px; border-top:1px solid var(--line); background:var(--surface-2); display:flex; gap:8px; justify-content:flex-end; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
.dialog{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(680px, calc(100% - 32px)); max-height:calc(100% - 48px); overflow:auto; background:var(--surface); border-radius:14px; z-index:41; box-shadow:var(--shadow-pop); animation:fade .15s ease; }
.dialog .drawer-h{ padding-top:18px; }
.dialog .drawer-f{ padding-bottom:14px; }
.xbtn{ border:0; background:none; width:32px; height:32px; border-radius:8px; color:var(--ink-2); cursor:pointer; display:grid; place-items:center; }
.xbtn:hover{ background:var(--surface-3); color:var(--ink); }
.xbtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* Luoi deu cot (khong rang cua) - cac nut loai ban ghi thang hang nhu ban phim. */
.typepick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(78px,1fr)); gap:6px; }
.typepick button{ height:34px; padding:0 8px; border-radius:7px; border:1px solid var(--line-2); background:var(--surface); font:700 12.5px/1 "Open Sans", Arial, sans-serif; letter-spacing:.02em; cursor:pointer; color:var(--ink-2); }
.typepick:has(> button:only-child){ display:flex; }
.typegroups{ display:grid; gap:12px; }
.typegroup{ display:grid; gap:6px; }
.tglabel{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
/* Ten loai "Page" viet hoa cho dong bo voi cac loai khac (gia tri gui di van la "Page"). */
.typepick button[data-type="Page"], .typebadge[data-t="Page"]{ text-transform:uppercase; }
.typedesc{ margin:2px 0 0; font-size:14px; color:var(--ink-2); }
.typedesc:empty{ display:none; }
.typepick button:hover{ border-color:var(--brand); color:var(--brand-ink); }
.typepick button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.typepick button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.typepick button[disabled]{ opacity:.45; cursor:not-allowed; }
.fgrid{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px 12px; align-items:start; }
/* .f la 1 truong trong form. `grid-column` CHI duoc ap dung khi .f nam
   TRONG .fgrid (luoi 6 cot). Neu de `.f{grid-column:span 6}` khong gioi han,
   khoi chon loai ban ghi (cung class .f nhung la con truc tiep cua .drawer-b,
   von la grid 1 cot) se tao ra 6 cot NGAM cho .drawer-b - khien .fgrid va
   .sentence bi xep canh nhau va o Ten bi bop hep lai. */
.f{ display:grid; gap:6px; align-content:start; }
.fgrid > .f{ grid-column:span 6; }
.fgrid > .f.s2{ grid-column:span 2; } .fgrid > .f.s3{ grid-column:span 3; } .fgrid > .f.s4{ grid-column:span 4; }
.f label{ font-size:14px; font-weight:500; color:var(--ink); }
.f label .opt{ font-weight:400; color:var(--ink-3); }
.f .help{ font-size:14px; color:var(--ink-3); }
.f .error{ font-size:14px; color:var(--err); }
.affix{ display:flex; align-items:stretch; }
.affix .input{ border-top-right-radius:0; border-bottom-right-radius:0; }
.affix .suffix{ display:flex; align-items:center; padding:0 10px; border:1px solid var(--line-2); border-left:0; border-radius:0 8px 8px 0; background:var(--surface-3); color:var(--ink-2); font-size:14px; max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Xem truoc: cau dien giai + dong zone file (chuan RFC 1035) cua ban ghi. */
.sentence{ padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); font-size:14px; color:var(--ink-2); line-height:1.6; overflow-wrap:anywhere; }
.sentence::before{ content:"Xem trước"; display:block; margin-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.sentence b{ color:var(--ink); font-weight:500; background:var(--surface-3); padding:0 5px; border-radius:4px; }
.sentence .zline{ display:block; margin-top:10px; padding:8px 10px; border-radius:7px; background:var(--surface); border:1px solid var(--line);
  font:400 12px/1.6 var(--mono); color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.sentence .zline .zk{ color:var(--t-alias-ink); }
.sentence .zline .zt{ color:var(--t-addr-ink); font-weight:500; }
.sentence .say-hint{ color:var(--ink-3); }
.sentence .say-warn{ display:flex; gap:8px; align-items:flex-start; margin:10px 0 0; padding:8px 10px; border-radius:7px;
  background:var(--warn-bg); color:var(--ink); font-size:14px; line-height:1.5; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 25%, transparent); }
.sentence .say-warn .i{ margin-top:2px; color:var(--warn); }
.preview-list{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.preview-list table{ width:100%; border-collapse:collapse; }
.preview-list td, .preview-list th{ padding:8px 12px; font-size:14px; text-align:left; border-bottom:1px solid var(--line); }
.preview-list tr:last-child td{ border-bottom:0; }
.preview-list th{ background:var(--brand-bg); color:var(--brand-ink); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.checkline{ display:flex; gap:8px; align-items:flex-start; font-size:14px; }
.checkline input{ margin-top:2px; }
.copy{ display:inline-grid; place-items:center; border:0; background:none; color:var(--ink-3); cursor:pointer; padding:4px; border-radius:6px; vertical-align:middle; }
.copy .i{ width:14px; height:14px; }
.copy:hover{ color:var(--brand-ink); background:var(--brand-bg); }
.copy:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* ---------- toast (dung chung, xem webroot/js/dns-toast.js) ---------- */
#toast-stack{ position:fixed; top:calc(16px + env(safe-area-inset-top, 0px)); right:16px; z-index:60; display:grid; gap:8px; width:min(380px, calc(100% - 32px)); }
.toast{ display:flex; gap:10px; align-items:flex-start; padding:12px 12px 12px 14px; border-radius:10px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-pop); animation:toastin .2s ease; }
@keyframes toastin{ from{ transform:translateY(-6px); opacity:0; } }
.toast .ti{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none; }
.toast .ti svg{ width:14px; height:14px; stroke-width:2.4; }
.toast.success .ti{ background:var(--ok-bg); color:var(--ok); }
.toast.error .ti{ background:var(--err-bg); color:var(--err); }
.toast.warning .ti{ background:var(--warn-bg); color:var(--warn); }
.toast.info .ti{ background:var(--brand-bg); color:var(--brand-ink); }
.toast .tb{ flex:1; font-size:14px; line-height:1.45; }
.toast .tb b{ display:block; font-weight:500; }
.toast .tb span{ color:var(--ink-2); }
/* Toast co mau theo loai: nen nhat + vien + vach mau ben trai de nhan ra ngay loi/thanh cong. */
.toast.error{ background:var(--err-bg); border-color:color-mix(in srgb, var(--err) 35%, transparent); border-left:4px solid var(--err); }
.toast.error .tb b{ color:var(--err); }
.toast.error .ti{ background:var(--err); color:var(--surface); }
.toast.warning{ background:var(--warn-bg); border-color:color-mix(in srgb, var(--warn) 35%, transparent); border-left:4px solid var(--warn); }
.toast.success{ background:var(--ok-bg); border-color:color-mix(in srgb, var(--ok) 35%, transparent); border-left:4px solid var(--ok); }
.toast.success .tb b{ color:var(--ok); }
.toast.error .tb span, .toast.warning .tb span, .toast.success .tb span{ color:var(--ink); }
.toast.out{ animation:toastout .18s ease forwards; }
@keyframes toastout{ to{ transform:translateY(-6px); opacity:0; } }

/* Header o man hinh hep: cho thong tin ten mien xuong dong thu hai thay vi
   tran ngang hoac bi an mat. */
/* Man hinh hep: hang 1 = logo + tai khoan, hang 2 = ten mien + thong tin. */
@media (max-width:900px){
  .topbar{ position:relative; }
  .topbar-in{ flex-wrap:wrap; gap:8px 14px; padding-bottom:12px; }
  .domaininfo{ order:3; flex-basis:100%; justify-content:flex-start; padding-right:0; margin-right:0; border-right:0; }
  .domaininfo .dname{ flex-basis:100%; font-size:17px; }
  .domaininfo .dname + .sep{ display:none; }
}
@media (max-width:520px){
  /* Logo giu nguyen co desktop (40px/30px) cho bang logo trang dang nhap. */
  .menu{ min-width:0; width:min(280px, calc(100vw - 32px)); }
  .domaininfo .sep{ display:none; }
  .fact-inline{ flex-basis:100%; }
}

/* Doi logo theo theme: giao dien sang dung ban mau, giao dien toi dung ban net trang. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topbar .logo .logo-light{ display:none; }
  :root:not([data-theme="light"]) .topbar .logo .logo-dark{ display:block; }
}
:root[data-theme="dark"] .topbar .logo .logo-light{ display:none; }
:root[data-theme="dark"] .topbar .logo .logo-dark{ display:block; }
:root[data-theme="light"] .topbar .logo .logo-light{ display:block; }
:root[data-theme="light"] .topbar .logo .logo-dark{ display:none; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  /* PHAI la minmax(0,1fr) chu khong phai 1fr: mot track `1fr` co
     min-width:auto nen bang rong (trang DNSSEC / trang tinh, 4-5 cot) day
     ca the .card rong hon man hinh va trang bi scroll ngang - du
     .tablewrap da co overflow-x:auto. */
  .layout{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:static; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
}

/* Cot bang co dinh do rong (man hinh rong) - bang khong xe dich ngang khi doi
   tu khung xuong / trong sang du lieu that. */
@media (min-width:761px){
  #panel-records table{ table-layout:fixed; }
  #panel-records thead th:nth-child(1){ width:52px; }
  #panel-records thead th:nth-child(2){ width:96px; }
  #panel-records thead th:nth-child(3){ width:24%; }
  #panel-records thead th.st{ width:140px; }
  #panel-records thead th:last-child{ width:96px; text-align:right; }
}

/* ---------- khung xuong luc tai danh sach (trang co zone_id) ---------- */
.sk{ display:inline-block; height:12px; border-radius:6px; vertical-align:baseline;
  background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size:200% 100%;
  animation:skshine 1.4s ease-in-out infinite; }
.sk.sk-box{ width:16px; height:16px; border-radius:4px; }
.sk.sk-badge{ width:56px; height:22px; }
.sk.sk-chip{ width:108px; height:24px; border-radius:999px; }
.sk.sk-btn{ width:48px; height:30px; border-radius:7px; }
.sk.sk-w24{ width:24px; }
.sk.sk-w36{ width:36px; }
.sk.sk-w130{ width:130px; }
.sk.sk-w150{ width:150px; }
.stat.sk-stat{ background:transparent; }
tbody tr.skel:hover td{ background:transparent; }
@keyframes skshine{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce){ .sk{ animation:none; } }
@media (max-width:760px){ .sk.sk-btn{ width:34px; height:34px; } .rowacts:has(.sk-btn){ gap:4px; } }

/* ---------- ban ghi dang the tren man hinh hep (<=760px) ---------- */
.selall{ display:none; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink-2); }
@media (max-width:760px){
  .selall{ display:inline-flex; }
  #panel-records .tablewrap{ overflow-x:visible; border-top:1px solid var(--line); padding:12px 12px 2px; background:var(--surface-2); }
  #panel-records table, #panel-records tbody, #panel-records tr, #panel-records td{ display:block; width:100%; }
  #panel-records thead{ display:none; }
  /* The ban ghi: hang 1 = chon | loai | ten day du | nut; hang 2 = o gia tri
     chu don cach; hang 3 = trang thai + uu tien. Nut thao tac nam ngang o
     goc phai (khong xep doc ben phai the - phi mat 1 cot rong). */
  #panel-records tbody tr{
    display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:10px 10px; align-items:center;
    grid-template-areas:"cb ty host act" "val val val val";
    border:1px solid var(--line); border-radius:12px; padding:10px 8px 12px 12px; margin-bottom:10px; background:var(--surface);
    box-shadow:var(--shadow);
  }
  #panel-records tbody tr:has(> td.st){ grid-template-areas:"cb ty host act" "val val val val" "st st st st"; }
  #panel-records tbody tr:hover td, #panel-records tbody tr.sel td{ background:transparent; }
  #panel-records tbody tr.sel td:first-child{ box-shadow:none; }
  #panel-records tbody tr.sel{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
  #panel-records tbody td, #panel-records tbody td:first-child, #panel-records tbody td.act{ border:0; padding:0; }
  #panel-records td.cb{ grid-area:cb; width:auto; display:flex; }
  #panel-records td.ty{ grid-area:ty; width:auto; }
  #panel-records td.host{ grid-area:host; font-size:14px; font-weight:600; min-width:0; }
  #panel-records td.val{ grid-area:val; max-width:100%; display:flex; align-items:flex-start; gap:6px;
    padding:8px 6px 8px 10px; margin-right:4px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:14px; }
  #panel-records td.val .vv{ flex:1; min-width:0; }
  #panel-records td.val .prio{ margin:0; flex:none; }
  #panel-records td.val .copy{ position:static; transform:none; margin:-2px 0; }
  #panel-records td.st{ grid-area:st; }
  #panel-records td.act{ grid-area:act; width:auto; }
  #panel-records .rowacts{ gap:0; }
  #panel-records .rowbtn{ width:34px; height:34px; padding:0; justify-content:center; }
  #panel-records .rowbtn .i{ width:16px; height:16px; }
  #panel-records .rowbtn span.lb{ display:none; }
  #panel-records .empty{ padding:32px 8px; }
  #panel-records tbody tr.is-empty{ display:block; border:0; padding:0; background:transparent; box-shadow:none; }
  #panel-records .tfoot{ border-top:0; }
}
@media (max-width:600px){
  .wrap, .topbar-in, .sitefoot-in{ padding-inline:16px; }
  .domainbar{ grid-template-columns:1fr; }
  .domainbar .fact{ border-left:0; border-top:1px solid var(--line); }
  .card-h, .toolbar, .tfoot{ padding-inline:16px; }
  .bulkbar{ margin-inline:16px; }
  .fgrid > .f.s2, .fgrid > .f.s3, .fgrid > .f.s4{ grid-column:span 6; }
  .pager, .pagesize{ margin-left:0; }
  /* Nameserver tren mobile: nhan 1 dong rieng, cac the NS xuong dong ben duoi. */
  .nsline .k{ flex-basis:100%; }
  .nsline .nschange{ flex-basis:100%; margin-left:0; }
  /* Tieu de the + 2 nut hanh dong: nut chiem tron 1 hang, chia deu. */
  .card-h .desc{ order:1; }
  .card-h .actions{ order:2; margin-left:0; flex-basis:100%; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card-h .actions .btn{ min-width:0; }
  .hide-sm{ display:none; }
  .card-h .actions > .btn:only-child{ grid-column:1 / -1; }
  .card-h .actions .btn{ height:40px; }
  .card-h .actions .btn.ghost{ border-color:var(--line-2); background:var(--surface); }
  .toolbar .field-search{ max-width:none; flex-basis:100%; }
  .toolbar .select{ flex:1; }
  .toolbar .meta{ flex-basis:100%; text-align:right; margin-top:-2px; }
  /* 16px: iOS Safari tu phong to trang khi focus o nhap chu nho hon 16px. */
  .input, .select, .textarea, #rec-form .input:not(.num), #rec-form .textarea, #rec-form #f-host{ font-size:16px; }
  .input, .select{ height:40px; }
  .field-search svg{ top:12px; }
  .drawer{ width:100%; }
  .drawer-f .btn{ flex:1; height:42px; }
  .sitefoot-in{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before{ animation:none !important; transition:none !important; }
}

/* ---------------------------------------------------------------------
   Dialog thiet lap nhanh (trang DNS he thong moi)
   --------------------------------------------------------------------- */
/* .quick dung cho ca <button> va <a> - bo gach chan mac dinh cua link. */
a.quick, a.quick *{ text-decoration:none; }

.dialog-lead{ margin:0 0 12px; color:var(--ink-2); font-size:14px; line-height:1.55; }
.dialog-lead + .callout{ margin-bottom:14px; }
.dialog .fl{ display:block; margin:14px 0 6px; font-size:14px; font-weight:500; color:var(--ink); }
.err-msg{ display:block; margin-top:6px; color:var(--err); font-size:14px; }

/* ---------------------------------------------------------------------
   Trang DNSSEC: hang cong tac Bat/Tat + gia tri dang chu don cach
   --------------------------------------------------------------------- */
.switchrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.switchlabel{ font-size:14px; font-weight:500; color:var(--ink); }

/* Cap nut Tat|Bat dinh lien nhau - trang thai dang bat duoc to dam bang
   aria-pressed (khong dung class rieng de trang thai o DOM va o trinh doc
   man hinh luon khop nhau). */
.segmented{ display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
.segmented button{
  appearance:none; border:0; background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:14px; font-weight:500; padding:0 16px; height:34px; cursor:pointer;
}
.segmented button + button{ border-left:1px solid var(--line-2); }
.segmented button:hover{ background:var(--surface-3); color:var(--ink); }
.segmented button[aria-pressed="true"]{ background:var(--brand); color:var(--on-brand); }
.segmented button[data-state="0"][aria-pressed="true"]{ background:var(--err); color:var(--surface); }
.segmented button:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.segmented button[disabled]{ opacity:.5; cursor:not-allowed; }

/* Digest / pubkey la chuoi hex dai - chu don cach de doi chieu tung ky tu. */
.mono{ font-family:var(--mono); }
td.val .mono{ font-size:14px; letter-spacing:.01em; word-break:break-all; margin-right:8px; }
textarea.mono{ min-height:84px; }
/* Nhan tren nut hanh dong khong duoc xuong dong. */
.rowbtn .lb{ white-space:nowrap; }
/* .rowbtn dung cho ca <button> va <a> (vd nut Sua mo trang khac) - bo
   gach chan mac dinh cua link. */
a.rowbtn, a.rowbtn *{ text-decoration:none; }

/* Nhan nhom trong form nhieu phan (DS 1 / DS 2 / KSK). */
.grouplabel{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.grouplabel .optional{ font-weight:400; letter-spacing:0; text-transform:none; }
.fgrid > .f:has(.grouplabel){ margin-top:4px; }

/* Nut phu nhung mang y nghia pha huy (vd Xoa ban ghi DS). */
.btn.ghost.danger{ background:transparent; border-color:transparent; color:var(--err); }
.btn.ghost.danger:hover{ background:var(--err-bg); color:var(--err); }

/* ---------------------------------------------------------------------
   Lop tuong thich cho form trang tinh (#panel-page-form)

   templates/PageStatic/form_comingsoon.tpl va form_custom.tpl van dung class
   cua bootstrap (.form-group / .form-control / .row / .col-sm-*), nhung layout
   dns_app KHONG nap bootstrap nua. Thay vi viet lai 2 partial do - chung mang
   theo logic datetimepicker va upload anh - map thang cac class do sang
   design system o day. Pham vi gioi han trong #panel-page-form.
   --------------------------------------------------------------------- */
#panel-page-form .card-b{ padding:20px; }

#panel-page-form .row{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; }
#panel-page-form .col-sm-8{ grid-column:span 8; }
#panel-page-form .col-sm-4{ grid-column:span 4; }
#panel-page-form .col-sm-6{ grid-column:span 6; }
#panel-page-form .col-sm-3{ grid-column:span 3; }
#panel-page-form .col-sm-10{ grid-column:span 10; }
#panel-page-form .col-sm-1{ grid-column:span 1; }

#panel-page-form .form-group{ display:grid; gap:6px; margin-bottom:16px; }
#panel-page-form .form-group > label{ font-size:14px; font-weight:500; color:var(--ink); }
#panel-page-form .required{ color:var(--err); }

#panel-page-form .form-control{
  width:100%; height:38px; padding:0 12px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:14px;
}
#panel-page-form textarea.form-control{ height:auto; padding:10px 12px; line-height:1.55; }
#panel-page-form select.form-control{ padding-right:30px; }
#panel-page-form .form-control:focus{ outline:2px solid var(--focus); outline-offset:-1px; border-color:var(--brand); }
#panel-page-form .form-control::placeholder{ color:var(--ink-3); }

/* Nut "Quay lai" nam trong <a href> (giu nhu ban cu): bo gach chan cua link -
   neu khong khoang trang giua </button> va </a> hien thanh 1 vach ngang nho. */
#panel-page-form a:has(> .btn){ text-decoration:none; }

#panel-page-form .error-text{ margin:0; color:var(--err); font-size:14px; }

/* table-layout:fixed de bang meta khong the rong hon o chua no - neu de
   auto thi o nhap ben trong day bang vuot ra ngoai man hinh hep. */
#panel-page-form table.table_meta{ width:100%; table-layout:fixed; border-collapse:collapse; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
#panel-page-form table.table_meta th, #panel-page-form table.table_meta td{ word-break:break-word; }
#panel-page-form table.table_meta th, #panel-page-form table.table_meta td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
#panel-page-form table.table_meta thead{ background:var(--surface-2); }
#panel-page-form table.table_meta thead th{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
/* Nut "+" them the meta (anh icon_plus.png cua ban cu nam trong <figure> -
   lề mac dinh 40px day anh ra ngoai o 40px nen bi cat mat). */
#panel-page-form table.table_meta th:first-child, #panel-page-form table.table_meta th:last-child{ width:48px; padding-inline:8px; text-align:center; }
#panel-page-form table.table_meta td.stt, #panel-page-form table.table_meta td.delete_input_meta{ padding-inline:8px; text-align:center; }
#panel-page-form .add_new_meta{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; cursor:pointer; }
#panel-page-form .add_new_meta:hover{ background:var(--brand-bg); }
#panel-page-form .add_new_meta figure{ margin:0; line-height:0; }
#panel-page-form .add_new_meta img{ width:18px; height:18px; }
/* Nut xoa dong meta dung <i class="fa fa-ban"> - layout khong nap Font
   Awesome nen ve bang ky tu. */
#panel-page-form td.delete_input_meta{ cursor:pointer; }
#panel-page-form td.delete_input_meta .fa-ban{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; color:var(--err); font-style:normal; font-size:15px; }
#panel-page-form td.delete_input_meta .fa-ban::before{ content:"✕"; }
#panel-page-form td.delete_input_meta:hover .fa-ban{ background:var(--err-bg); }

#panel-page-form .add_img{
  background:var(--surface-2); border:1px dashed var(--line-2); border-radius:8px;
  color:var(--ink-3); text-transform:uppercase; font-size:12px; text-align:center; padding:32px 0; cursor:pointer; width:150px;
}
#panel-page-form .add_img:hover{ border-color:var(--brand); color:var(--brand-ink); }
#panel-page-form .add_img img{ max-width:100%; height:auto; }

@media (max-width:760px){
  #panel-page-form .row > [class^="col-sm-"]{ grid-column:span 12; }
}

/* Form "coming soon" chia 2 cot: ben trai la cac o nhap, ben phai la anh xem
   truoc. Anh xem truoc (template*.PNG) rong dung 400px va cac khung do danh
   dau vi tri duoc dat tuyet doi theo toa do pixel CUA ANH DO - nen cot phai
   phai giu dung 400px, khong duoc co gian. */
#panel-page-form .row{ grid-template-columns:minmax(0,1fr) 400px; gap:24px; align-items:start; }
#panel-page-form .row > *{ min-width:0; }
#panel-page-form .row > .col-sm-8{ grid-column:1; }
#panel-page-form .row > .col-sm-4{ grid-column:2; }
/* Moc dinh vi cho cac khung danh dau ben trong - thieu no thi chung neo theo
   the to hon ben ngoai va lech het. */
#panel-page-form .view_html_comingsoon{ position:relative; max-width:400px; }
#panel-page-form .view_html_comingsoon figure{ margin:0; }
#panel-page-form .view_html_comingsoon img{ display:block; width:100%; height:auto; border-radius:8px; }
/* Khung do danh dau vung dang sua - toa do % theo anh mau 400x467 nen khop
   ca khi anh co gian. */
#panel-page-form .view_html_comingsoon .show-box{ position:absolute; box-sizing:border-box; border:2px solid #e5484d; border-radius:4px; pointer-events:none; }
/* An mac dinh - comingsoon.js goi .show()/.hide(). Toa do tung khung theo mau. */
#panel-page-form .view_html_comingsoon .show-box{ display:none; }
#panel-page-form .tpl1 .title_show_html{ left:20%; top:5.14%; width:60%; height:14.13%; }
#panel-page-form .tpl1 .title_content_show_html{ left:2.75%; top:34.9%; width:95%; height:9.64%; }
#panel-page-form .tpl1 .content_tt_show_html{ left:2.75%; top:42.4%; width:95%; height:10.71%; }
#panel-page-form .tpl1 .date_show_html{ left:11.25%; top:53.1%; width:77.5%; height:19.27%; }
#panel-page-form .tpl2 .title_show_html{ left:20%; top:9.21%; width:60%; height:10.28%; }
#panel-page-form .tpl2 .title_content_show_html{ left:2.75%; top:19.91%; width:95%; height:13.92%; }
#panel-page-form .tpl2 .content_tt_show_html{ left:2.75%; top:32.33%; width:95%; height:10.71%; }
#panel-page-form .tpl2 .date_show_html{ left:8.25%; top:44.54%; width:77.5%; height:19.27%; }
#panel-page-form .tpl3 .logo_show_html{ left:20%; top:27.84%; width:60%; height:10.28%; }
#panel-page-form .tpl3 .content_tt_show_html{ left:10.5%; top:38.12%; width:80%; height:10.28%; }
#panel-page-form .tpl3 .date_show_html{ left:11.25%; top:50.11%; width:77.5%; height:19.27%; }

/* Chuyen tu khoi <style> cua form_comingsoon.tpl (fragment nap qua .html()). */
#panel-page-form .image_input{ display:none !important; }
#panel-page-form .add_img{ align-self:center; margin:10px 0; }
#panel-page-form .img-field{ position:relative; }
#panel-page-form span.delete_img{
  border:1px solid; padding:1px 7px; border-radius:12px; color:white; background:red; text-transform:initial;
  position:absolute; top:22px; left:140px; display:none; cursor:pointer;
}
#panel-page-form span.delete_img.is-shown{ display:block; }
#panel-page-form textarea[name="content_tt"]{ min-height:150px; }
#panel-page-form .form-actions{ text-align:center; margin-top:20px; }
#panel-page-form .view_html_comingsoon{ text-align:center; }
@media (max-width:767px){ #panel-page-form #form-add-new-page{ padding:0 10px; } }

@media (max-width:1100px){
  #panel-page-form .row{ grid-template-columns:minmax(0,1fr); }
  #panel-page-form .row > .col-sm-8, #panel-page-form .row > .col-sm-4{ grid-column:1; }
}

/* ---------------------------------------------------------------------
   Lich chon ngay (bootstrap-datetimepicker v4) cua form trang tinh.
   Plugin viet cho Bootstrap 3 ma layout dns_app khong nap bootstrap: thieu
   .list-unstyled (hien dau cham dau dong), .dropdown-menu (lich khong noi,
   day o duoi xuong) va font glyphicon (mat mui ten thang truoc/sau).
   --------------------------------------------------------------------- */
#panel-page-form .form-group{ position:relative; }
#panel-page-form .bootstrap-datetimepicker-widget.dropdown-menu{
  position:absolute; z-index:1000; display:block; width:19em; margin:4px 0; padding:8px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-pop); font-size:14px;
}
#panel-page-form .bootstrap-datetimepicker-widget.dropdown-menu::before,
#panel-page-form .bootstrap-datetimepicker-widget.dropdown-menu::after{ display:none; }
#panel-page-form .bootstrap-datetimepicker-widget ul, #panel-page-form .bootstrap-datetimepicker-widget li{ list-style:none; margin:0; padding:0; }
#panel-page-form .bootstrap-datetimepicker-widget .collapse{ display:none; }
#panel-page-form .bootstrap-datetimepicker-widget .collapse.in{ display:block; }
#panel-page-form .bootstrap-datetimepicker-widget table{ border-collapse:separate; border-spacing:2px; }
#panel-page-form .bootstrap-datetimepicker-widget table th, #panel-page-form .bootstrap-datetimepicker-widget table td{ padding:0; border:0; background:transparent; color:var(--ink); letter-spacing:0; text-transform:none; font-size:14px; }
#panel-page-form .bootstrap-datetimepicker-widget table thead tr:first-child th{ height:32px; font-weight:500; }
#panel-page-form .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
#panel-page-form .bootstrap-datetimepicker-widget table td.day:hover,
#panel-page-form .bootstrap-datetimepicker-widget table td span:hover{ background:var(--surface-2); }
#panel-page-form .bootstrap-datetimepicker-widget table th.dow{ font-size:11.5px; font-weight:500; color:var(--ink-3); text-transform:uppercase; }
#panel-page-form .bootstrap-datetimepicker-widget table td.day{ height:32px; line-height:32px; border-radius:6px; }
#panel-page-form .bootstrap-datetimepicker-widget table td.old, #panel-page-form .bootstrap-datetimepicker-widget table td.new,
#panel-page-form .bootstrap-datetimepicker-widget table td span.old{ color:var(--ink-3); }
#panel-page-form .bootstrap-datetimepicker-widget table td.active, #panel-page-form .bootstrap-datetimepicker-widget table td.active:hover,
#panel-page-form .bootstrap-datetimepicker-widget table td span.active{ background:var(--brand); color:var(--on-brand); text-shadow:none; }
#panel-page-form .bootstrap-datetimepicker-widget table td.today::before{ border-bottom-color:var(--brand); }
#panel-page-form .bootstrap-datetimepicker-widget table td.active.today::before{ border-bottom-color:var(--on-brand); }
#panel-page-form .bootstrap-datetimepicker-widget table td span{ width:31%; height:44px; line-height:44px; margin:1%; }
/* Thay icon glyphicon bang ky tu - khong can nap font. */
#panel-page-form .bootstrap-datetimepicker-widget .glyphicon{ font-style:normal; font-size:20px; line-height:1; }
#panel-page-form .bootstrap-datetimepicker-widget .glyphicon-chevron-left::before{ content:"‹"; }
#panel-page-form .bootstrap-datetimepicker-widget .glyphicon-chevron-right::before{ content:"›"; }