@import "ds/nen.css";
@import "ds/thanh-phan.css";
@import "ds/bo-cuc.css";

/* style.css - Autopage24h: "ban dieu phoi dang bai" - yen tinh, day thong tin, mot mau thuong hieu.
   TANG 4 (be mat app): CHI phan rieng cua app. Token, thanh phan, bo cuc dung chung nam o public/ds/
   (nen.css -> thanh-phan.css -> bo-cuc.css, nap bang 3 @import o tren theo dung thu tu cascade).
   Quy tac: docs/DESIGN-SYSTEM.md §0 (cac tang) + §6.1 (be mat app). Khong dinh nghia lai lop don
   cua tang 2-3 o day; can bien the thi dung selector co ngu canh. */

/* An giao dien tool cho toi khi biet trang thai ban quyen (chong flash luc mo lan dau) */
html.chua-san-sang .sidebar, html.chua-san-sang .main{visibility:hidden}

/* ---------- Banner canh bao het han (TINH, chi goi TRA PHI con < 3 ngay) ---------- */
.han-banner{ display:none; position:fixed; top:0; inset-inline:0; min-height:var(--han-h); z-index:540;
  align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 12px; padding:4px 16px;
  font-size:13px; font-weight:600; text-align:center;
  background:color-mix(in srgb, var(--err) 14%, var(--bg)); color:var(--tx);
  border-bottom:1px solid var(--err); user-select:none; }
body.co-han-banner .han-banner{ display:flex; }
/* --han-h duoc app.js do lai theo chieu cao THAT cua banner (chu dai/tieng A Rap o 960px xuong 2 dong)
   -> phan duoi khong bi banner de len. */
body.co-han-banner{ padding-top:var(--han-h); }
body.co-han-banner .sidebar, body.co-han-banner .main{ height:calc(100vh - var(--han-h)); }
.han-banner-btn{ flex:0 0 auto; background:var(--err); color:var(--on-err); border:0; border-radius:var(--r-sm);
  padding:4px 12px; font-weight:600; font-size:12px; cursor:pointer; white-space:nowrap; }
.han-banner-btn:hover{ background:color-mix(in srgb, var(--err) 88%, var(--tx)); }

/* ---------- Uu dai (market): the uu dai cua admin ---------- */
.mkt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--s4); }
.mkt-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color var(--nhanh) var(--ease); }
.mkt-clickable{ cursor:pointer; }
.mkt-clickable:hover{ border-color:var(--acc); }
.mkt-anh{ height:150px; background-size:cover; background-position:center; background-color:var(--card2); position:relative; }
.mkt-anh-plain{ height:56px; background:var(--acc-soft); }
.mkt-badge{ position:absolute; top:10px; inset-inline-start:10px; background:var(--acc-fill); color:var(--acc-tx);
  font-size:12px; font-weight:600; padding:2px 8px; border-radius:var(--r-xs); }
.mkt-body{ padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:6px; flex:1; }
.mkt-title{ font-weight:600; font-size:16px; color:var(--tx); line-height:1.35; }
.mkt-desc{ color:var(--tx2); font-size:13px; line-height:1.55; flex:1; white-space:pre-wrap; }
.mkt-cta{ color:var(--acc); font-weight:600; font-size:13px; margin-top:6px; }

/* ==================================================================
   PHAN DAY THANH BEN RIENG CUA APP: hang nut nho (ngon ngu), chon giao dien, dong goi dang dung.
   (Khung thanh ben dung chung nam o ds/bo-cuc.css.)
   ================================================================== */
.sb-row2{display:flex;align-items:center;gap:6px;margin:6px 16px 0}
.sb-mini{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 10px;
  background:var(--card); border:1px solid var(--line); color:var(--tx2); border-radius:var(--r-sm);
  font:600 12px/1 var(--sans); cursor:pointer; transition:border-color var(--nhanh),color var(--nhanh);
}
.sb-mini:hover{border-color:var(--acc); color:var(--tx)}
/* Bo chon giao dien 3 trang thai: Sang / Toi / Theo may */
.sb-theme-seg{display:inline-flex;margin-inline-start:auto;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.sb-theme-seg button{width:32px;height:30px;border:0;background:none;color:var(--tx2);display:inline-flex;align-items:center;justify-content:center;padding:0}
.sb-theme-seg button + button{border-inline-start:1px solid var(--line)}
.sb-theme-seg button:hover{color:var(--tx);background:var(--card2)}
.sb-theme-seg button[aria-checked="true"]{background:var(--acc-soft);color:var(--acc)}
.sb-theme-seg button:focus-visible{outline-offset:-2px}
#btnTheme{display:none}
/* Goi dang dung + con bao lau (app.js veTieuDeBanQuyen): mot dong chu nho, cham mau theo tinh trang,
   bam vao mo trang Tai khoan. Thanh ben thu gon thi an (thong tin day du van o tieu de cua so). */
.sb-goi{display:flex;align-items:center;gap:6px;width:calc(100% - 16px);margin:6px 8px 0;padding:4px 12px;
  background:none;border:0;border-radius:var(--r-sm);font:inherit;font-size:12px;line-height:1.35;color:var(--tx2);text-align:start;cursor:pointer}
.sb-goi::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.sb-goi[data-muc="warn"]::before{background:var(--warn)}
.sb-goi[data-muc="err"]::before{background:var(--err)}
.sb-goi[data-muc="err"]{color:var(--err)}
.sb-goi:hover{background:var(--card2)}
.sb-goi[hidden], html.sb-thu .sb-goi{display:none}
.sb-plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;color:var(--tx);
  display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;margin:6px 8px 0}
.sb-plan .days{background:var(--acc-soft);color:var(--acc);padding:1px 8px;border-radius:var(--r-xs);font-size:12px}

/* Thanh ben thu gon: phan rieng cua app (khung chung o ds/bo-cuc.css) */
html.sb-thu .sb-row2{flex-direction:column;margin:6px 8px 0}
html.sb-thu .sb-mini{width:44px;padding:0}
html.sb-thu .sb-theme-seg{display:none}
html.sb-thu #btnLang{font-size:0;gap:0}
html.sb-thu #btnTheme{display:inline-flex}

/* Bieu do Canvas o Tong quan: chieu cao co dinh, rong theo the */
.chart-card canvas{display:block; width:100% !important; height:220px}

/* ---------- Soan bai + xem truoc ---------- */
.compose-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--s4); align-items:start}
.fb-preview{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.fb-preview-head{display:flex; gap:10px; align-items:center; padding:var(--s3)}
.fb-avatar{width:36px;height:36px;border-radius:99px;background:var(--acc-fill);display:flex;align-items:center;justify-content:center;color:var(--acc-tx);font-weight:700}
.fb-preview-name{font-weight:600; font-size:13px; color:var(--tx)}
.fb-preview-meta{font-size:12px; color:var(--dim)}
.fb-preview-body{padding:0 var(--s3) var(--s3); font-size:13px; white-space:pre-wrap; word-break:break-word}
.fb-preview-body a{color:var(--acc)}
.fb-preview-media{background:var(--card2); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--dim)}
.fb-preview-media img{width:100%;height:100%;object-fit:cover}
.fb-preview-actions{display:flex; border-top:1px solid var(--line); padding:4px 8px}
.fb-preview-actions span{flex:1; text-align:center; padding:8px 0; font-size:12px; font-weight:600; color:var(--dim); display:flex; align-items:center; justify-content:center; gap:6px}

/* ---------- The trang (danh sach) ---------- */
.page-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s3) var(--s4); display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s2);
  transition:border-color var(--nhanh) var(--ease);
}
.page-card:hover{border-color:color-mix(in srgb, var(--tx) 25%, var(--line))}
.page-avatar{width:40px;height:40px;border-radius:99px;flex:0 0 40px;object-fit:cover;background:var(--card2)}
.page-avatar.fallback{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--avatar-fg);font-size:14px}
/* Avatar 24px trong danh sach chon trang (hop "Chon trang them vao kho" o Token) */
.page-avatar.nho{width:24px; height:24px; flex:0 0 24px}
/* Pill nhom/token trong hang chon trang (hop Them/chuyen trang o Nhom trang): khong co, cat o 128px */
.hang-chon > .pill{flex:none; max-width:128px}
/* Ho so trang trong hop "Thong tin" (Danh sach trang): anh bia + avatar chong len + nut doi anh.
   Anh bia van dat dong qua style background-image (gia tri tung trang). */
.hs-khung{border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.hs-bia{position:relative; height:110px; background:var(--card2) center/cover no-repeat}
.hs-bia > .btn{position:absolute; inset-inline-end:var(--s2); bottom:var(--s2); margin:0; cursor:pointer; box-shadow:var(--shadow-pop)}
.hs-dau{display:flex; align-items:flex-end; gap:var(--s3); padding:0 var(--s4) var(--s4); margin-top:-32px}
.hs-avatar{position:relative; flex:none}
.hs-avatar > img{display:block; width:72px; height:72px; border-radius:50%; border:3px solid var(--card); object-fit:cover; background:var(--card2)}
.hs-avatar > .btn-icon{position:absolute; inset-inline-end:-4px; bottom:-4px; margin:0; cursor:pointer; background:var(--acc-fill); color:var(--acc-tx); border:2px solid var(--card); box-shadow:var(--shadow-pop)}
.hs-dau > .muted{padding-bottom:var(--s1)}
.page-info{flex:1;min-width:0}
.page-name{font-weight:600; font-size:14px; color:var(--tx)}
.page-id{font-size:12px; color:var(--dim); font-family:var(--mono)}
.page-tags{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.page-card .page-actions{gap:6px; margin-inline-start:0}

/* Ket qua job trong hop tien trinh */
.jt-done,.jt-fail,.jt-part{display:inline-flex; align-items:center; gap:6px; font-weight:600}
.jt-done{color:var(--ok)} .jt-fail{color:var(--err)} .jt-part{color:var(--warn)}

/* Chi bao toan cuc "dang chay" + khung "Dang dang ngay": cung khung toast goc duoi phai.
   Chi hien job cua trang KHAC trang dang xem (xem ganJobChoTrang trong app.js). */
.job-indicator,.dn-khung-tien-trinh{
  pointer-events:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-pop); padding:10px 12px; font-size:12px; color:var(--tx);
}
.dn-khung-tien-trinh{display:flex; align-items:center; gap:10px; font-size:13px}
.dn-khung-tien-trinh > span{flex:1; min-width:0}
.ji-head{font-weight:600; margin-bottom:6px; font-size:13px; display:flex; align-items:center; gap:8px}
.ji-row{display:flex; align-items:center; gap:8px; padding:3px 0; flex-wrap:wrap}
.ji-row > span:first-child{flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.ji-bar{flex:1 1 120px; min-width:100px; height:6px; background:var(--line-soft); border-radius:99px; overflow:hidden; order:3}
.ji-bar > div{height:100%; background:var(--acc-fill); transition:width .3s var(--ease)}
.ji-cur{flex:1 1 100%; color:var(--tx2); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; order:4}
@media(max-width:1000px){
  .compose-grid{grid-template-columns:minmax(0,1fr)}
}

/* ==================================================================
   LOP PHU BAN QUYEN THEO MA MAY (license-gate.js)
   ================================================================== */
/* margin:auto tren hop thay cho align-items:center: man thanh toan cao hon man hinh thi
   center se cat mat phan dau (khong cuon toi duoc), margin:auto thi van cuon binh thuong. */
#licenseGate .lg-bg{
  position:fixed; inset:0; z-index:600; display:flex; align-items:flex-start; justify-content:center;
  background:var(--bg); padding:var(--s5); overflow:auto;
}
#licenseGate .lg-box{
  width:440px; max-width:100%; margin:auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6) var(--s5) var(--s5);
}
#licenseGate .lg-box-rong{width:880px}   /* man thanh toan: bang gia + QR can cho rong */
#licenseGate .lg-head{text-align:center; margin-bottom:var(--s5)}
#licenseGate .lg-thuong-hieu{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--tx)}
#licenseGate .lg-thuong-hieu .sb-mark{width:32px;height:32px;flex-basis:32px;font-size:16px}
#licenseGate .lg-thuong-hieu span span{color:var(--acc)}
/* Toast / hop xac nhan / chu thich phai noi TREN lop phu khi no dang mo. */
body:has(#licenseGate) #toastWrap{z-index:700}
body:has(#licenseGate) .xn-bg{z-index:700}
body:has(#licenseGate) .gy-bong{z-index:710}
#licenseGate .lg-tieu-de{margin:0 0 var(--s2); font-size:20px; font-weight:700; text-align:center; color:var(--tx)}
#licenseGate .lg-mo-ta{color:var(--tx2); font-size:13px; line-height:1.55; text-align:center; margin-bottom:var(--s4)}
#licenseGate .lg-trang-thai{display:flex; align-items:center; justify-content:center; gap:10px; padding:var(--s4) 0; font-weight:600; color:var(--tx2)}
#licenseGate .lg-goi{text-align:start}
#licenseGate .lg-may{margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line); text-align:center}
#licenseGate .lg-may-nhan{font-size:12px; font-weight:600; color:var(--tx2); margin-bottom:6px}
#licenseGate .lg-may-dong{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap}
#licenseGate .lg-may-ma{font-family:var(--mono); font-size:13px; word-break:break-all; color:var(--tx); user-select:all}
#licenseGate .lg-logo{display:none}
#licenseGate .lg-sub{display:none}
#licenseGate .lg-go{width:100%; justify-content:center; margin-top:var(--s4); min-height:40px}
#licenseGate .lg-msg{margin-top:var(--s3); font-size:13px; font-weight:600; text-align:center; min-height:1.5em}
#licenseGate .lg-msg.err{color:var(--err)}
#licenseGate .lg-msg.ok{color:var(--ok)}
#licenseGate .lg-ho-tro{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); font-size:13px; color:var(--tx2)}
#licenseGate .lg-ho-tro a{display:inline-flex; align-items:center; gap:4px; color:var(--acc); font-weight:600; text-decoration:none}
#licenseGate .lg-ho-tro a:hover{text-decoration:underline}
/* Hang lien he ho tro can giua duoi nut (thay 3 kieu inline) */
#licenseGate .lg-giua{display:flex; justify-content:center; margin-top:var(--s3)}
#licenseGate .lg-giua-tren{margin:0 0 var(--s1)}
#licenseGate .lg-duoi{margin-top:var(--s3)}

/* ---- Bo chon ngon ngu tren lop phu ban quyen (dropdown co co quoc gia) ---- */
#licenseGate .lg-lang-dd{position:relative; margin:var(--s4) auto 0; max-width:280px}
#licenseGate .lg-lang-nut{width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 12px; color:var(--tx); font:inherit; font-size:14px; text-align:start}
#licenseGate .lg-lang-nut:hover{border-color:color-mix(in srgb, var(--tx) 30%, var(--line))}
#licenseGate .lg-lang-ten{flex:1; font-weight:600}
#licenseGate .lg-lang-mui{color:var(--tx2); flex:0 0 auto}
#licenseGate .lg-lang-panel{position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:10;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:4px; max-height:320px; overflow-y:auto; box-shadow:var(--shadow-pop)}
#licenseGate .lg-lang-panel.hide{display:none}
#licenseGate .lg-lang-muc{width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:transparent; border:0; border-radius:var(--r-sm); padding:8px 10px; color:var(--tx);
  font:inherit; text-align:start}
#licenseGate .lg-lang-muc:hover{background:var(--card2)}
#licenseGate .lg-lang-muc.chon{background:var(--acc-soft)}
#licenseGate .lg-lang-2d{flex:1; display:flex; flex-direction:column; line-height:1.25}
#licenseGate .lg-lang-2d b{font-weight:600; font-size:14px}
#licenseGate .lg-lang-2d small{color:var(--tx2); font-size:12px}
#licenseGate .lg-lang-muc[dir=rtl] .lg-lang-2d{align-items:flex-end}
#licenseGate .lg-lang-tick{color:var(--acc); flex:0 0 auto; display:inline-flex}

/* ---------- Bo chon ngon ngu (hop thoai tu thanh ben) ---------- */
.lang-ds{padding:4px 8px 12px;max-height:60vh;overflow:auto}
.lang-muc{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:0;background:none;
  color:var(--tx2);border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:14px;text-align:start;
  transition:background-color var(--nhanh),color var(--nhanh)}
.lang-muc:hover{background:var(--card2);color:var(--tx)}
.lang-muc.active{background:var(--acc-soft);color:var(--acc);font-weight:600}
.lang-co{font-size:12px;font-weight:600;background:var(--card2);color:var(--tx2);
  padding:2px 6px;border-radius:var(--r-xs);min-width:30px;text-align:center}
.lang-ten{flex:1}
.lang-rtl{font-size:12px;font-weight:600;color:var(--warn);border:1px solid var(--warn);padding:0 4px;border-radius:var(--r-xs)}

/* Lich su thao tac hang loat (app.js veLichSuJob) */
.lich-su-dau{margin-top:var(--s4)}
.dong-lich-su{border-bottom:1px solid var(--line-soft); padding:6px var(--s1); font-size:12px}
.dong-lich-su:last-child{border-bottom:0}
.dong-lich-su summary{cursor:pointer; margin-top:2px}
.dong-lich-su ul{margin:2px 0 0; padding-inline-start:16px; color:var(--dim)}
/* Hop tai ban moi: chu trang thai + % cung mot hang */
.hang-tien-do{display:flex; justify-content:space-between; gap:var(--s2); margin-top:var(--s2); font-size:12px}
.hang-tien-do + .ghi-chu{margin-top:var(--s3)}
/* ---------- Tai khoan (account.js) ---------- */
/* Anh QR thanh toan: nen trang CO DINH o moi theme vi may quet ngan hang can nen sang */
.anh-qr{flex:none; width:200px; height:200px; padding:var(--s2); border-radius:var(--r); background:var(--qr-nen)}
/* Gia tri khach phai doc / chep dung tung ky tu (so tien, STK, noi dung CK, ma gioi thieu, ID may) */
.gia-tri-chep{font-size:16px; font-weight:700; line-height:1.4; color:var(--tx)}
.gia-tri-chep.lon{font-size:20px}
.gia-tri-chep.nhan-manh{color:var(--acc)}
/* Don thanh toan: QR + thong tin chuyen khoan canh nhau, hep thi xuong dong */
.don-tt{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--s5)}
.don-tt > .grow{flex:1 1 280px}

/* ---------- Cai dat & sao luu (guide.js) ---------- */
/* Khoi ma / cau hinh de chep (MCP): chu don cach 12px, xuong dong, cuon trong khung */
.khoi-ma{margin:0; padding:var(--s2) var(--s3); max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card2); font:12px/1.5 var(--mono); color:var(--tx); white-space:pre-wrap; overflow-wrap:anywhere}

/* ---------- Tong quan (dashboard.js) ---------- */
/* Bang chi tiet xo xuong duoi hang the so lieu: dau / hang quet / than cuon / phan trang lien khoi */
.xo-bang{padding:0; border-color:var(--acc); overflow:hidden}
.xo-dau{padding:var(--s3); border-bottom:1px solid var(--line); background:var(--card2)}
.xo-quet{padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); background:var(--card2)}
.xo-than{max-height:min(52vh, 430px); overflow:auto}
.xo-bang > .pager{margin:0; padding:var(--s2) var(--s3); border-top:1px solid var(--line); background:var(--card2); font-size:12px}
/* So thu tu buoc trong danh sach 4 buoc bat dau */
.badge.so-buoc{min-width:24px; justify-content:center}
.o-chi-so .gia-tri{font-size:16px; font-weight:700; line-height:1.2}

/* ---------- Quan ly bai (posts.js) ---------- */
/* O loc trang: o nhap + nut xoa trong o + danh sach goi y bung xuong */
.loc-trang{position:relative; flex:1 1 220px; min-width:200px}
.loc-trang > input{width:100%; min-width:0; margin:0; padding-inline-end:32px}
.loc-trang-xoa{position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); width:20px; height:20px; display:inline-flex;
  align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--card2); color:var(--tx2); cursor:pointer; padding:0}
.loc-trang-ds{position:absolute; z-index:60; top:calc(100% + 4px); inset-inline:0; max-height:min(330px, 45vh); overflow:auto; padding:4px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-pop)}
#dsTrang .dt-item{display:flex; align-items:center; gap:var(--s2); padding:6px 8px; border-radius:var(--r-sm); cursor:pointer; min-width:0}
/* Dong dang chon bang phim mui ten / re chuot */
#dsTrang .dt-item.active,#dsTrang .dt-item:hover{background:var(--acc-soft)}
.dt-ic{width:24px; flex:0 0 24px; display:inline-flex; justify-content:center}
.lk-trang{display:flex; align-items:center; gap:var(--s2); min-width:0; cursor:pointer}
/* The bo loc dang ap dung (bam de bo) */
.badge.the-loc{gap:6px; padding:4px 12px; max-width:min(340px, 100%)}
.anh-xem-truoc{display:block; max-width:100%; max-height:min(220px, 30vh); border-radius:var(--r); margin-top:var(--s2); object-fit:contain}
.blc-bo-anh{display:inline-flex; border:0; background:none; padding:0; cursor:pointer; color:var(--acc)}
.anh-nho.nho{width:24px; height:24px; flex:0 0 24px}
/* Nut thu/mo "muc" trong mot nhom chien dich (posts-nhom.js): mui ten dung .nhom-mui cua tang thanh phan */
.nh-mo-muc{display:inline-flex; align-items:center; gap:6px; min-height:28px; font-size:13px; font-weight:700; user-select:none; cursor:pointer}
.nh-mo-muc.rong{cursor:default}

/* ---------- Sua video (sua-video.js) ---------- */
/* Xem thu 3 giay */
.video-xem-thu{display:block; max-width:min(320px, 100%); border-radius:var(--r)}