/* ==========================================================================
   پنل کاربری نودسرو (بخش ۳۸ چک‌لیست)
   ظاهر یکپارچه با خود سایت: همان رنگ‌ها، همان فونت وزیرمتن، همان گردی‌ها.
   همهٔ قواعد با .hp شروع می‌شوند تا مثل inner.css فقط داخل قالب سایت اثر کنند.
   ========================================================================== */

.hp .pn-shell{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:22px;
  align-items:start; padding:26px 0 8px;
}
/* بدون min-width:0، جدول‌های پهنِ داخل پنل می‌توانند عرض گرید را بکشند
   و در موبایل سرریز افقی بسازند. */
.hp .pn-shell > #panel-main,
.hp .pn-shell > .pn-side,
.hp .pn-box{min-width:0}
.hp #panel-main{overflow-x:clip}

/* ---------------------------------------------------------------- سایدبار */
.hp .pn-side{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:12px; position:sticky; top:14px;
}
.hp .pn-side-user{
  display:flex; align-items:center; gap:10px; padding:10px 10px 12px;
  border-bottom:1px solid var(--line); margin-bottom:10px;
}
.hp .pn-avatar{
  width:40px; height:40px; flex:0 0 40px; border-radius:12px;
  background:linear-gradient(135deg,var(--teal),var(--teal-light));
  color:#fff; font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center;
}
.hp .pn-side-user b{display:block; font-size:13.5px; color:var(--ink); font-weight:800}
.hp .pn-side-user span{display:block; font-size:11.5px; color:var(--muted); direction:ltr; text-align:right}
.hp .pn-side h2{
  font-size:11.5px; color:var(--muted); font-weight:800; margin:6px 10px 8px;
  letter-spacing:.3px;
}
.hp .pn-menu{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.hp .pn-menu a{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:var(--r-sm);
  color:var(--ink); font-size:13.5px; font-weight:600; transition:var(--tr);
}
.hp .pn-menu a:hover{background:var(--bg-soft); color:var(--teal-600)}
.hp .pn-menu a[aria-current="page"]{background:var(--teal); color:#fff; font-weight:800}
.hp .pn-menu a[aria-current="page"] svg{stroke:#fff}
.hp .pn-menu svg{width:17px; height:17px; flex:0 0 17px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hp .pn-menu .pn-count{
  margin-inline-start:auto; background:var(--green); color:#fff; font-size:10.5px;
  font-weight:800; min-width:19px; height:19px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
}
.hp .pn-menu a[aria-current="page"] .pn-count{background:#fff; color:var(--teal)}
.hp .pn-side .pn-exit{margin-top:10px; border-top:1px solid var(--line); padding-top:9px}
.hp .pn-side .pn-exit a{color:#b0392b}
.hp .pn-side .pn-exit a:hover{background:#fdf2f2; color:#8f2c20}

/* --------------------------------------------------------------- سر صفحه */
.hp .pn-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:16px;
}
.hp .pn-head h1{margin:0; font-size:22px; font-weight:900; color:var(--ink); line-height:1.5}
.hp .pn-head p{margin:5px 0 0; font-size:13px; color:var(--muted)}
.hp .pn-head-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ------------------------------------------------------------------ کارت‌ها */
.hp .pn-box{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); margin-bottom:20px; overflow:hidden;
}
.hp .pn-box > h2,
.hp .pn-box > h3{
  margin:0; padding:14px 18px; font-size:15px; font-weight:900; color:var(--ink);
  border-bottom:1px solid var(--line); background:var(--bg-soft);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.hp .pn-box > h2 small{font-size:12px; color:var(--muted); font-weight:600}
.hp .pn-box .pad{padding:18px}
.hp .pn-box .pad-tight{padding:12px 18px}

.hp .pn-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px}
.hp .pn-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:15px 17px;
}
.hp .pn-card .v{font-size:22px; font-weight:900; color:var(--teal); line-height:1.5}
.hp .pn-card .l{font-size:12.5px; color:var(--muted); font-weight:600}
.hp .pn-card a{font-size:12.5px}

/* ------------------------------------------------------------------ جدول‌ها */
.hp .pn-tbl{width:100%; border-collapse:collapse}
.hp .pn-tbl th,
.hp .pn-tbl td{padding:11px 14px; border-bottom:1px solid var(--line); text-align:right; font-size:13px; vertical-align:middle}
.hp .pn-tbl thead th{background:var(--bg-soft); color:var(--ink); font-size:12.5px; font-weight:800; white-space:nowrap}
.hp .pn-tbl tbody tr:last-child td{border-bottom:0}
.hp .pn-tbl tbody tr:hover td{background:#fbfdfd}
.hp .pn-tbl .empty{text-align:center; color:var(--muted); padding:24px}
.hp .pn-tbl tr.is-off td{opacity:.62}

/* ------------------------------------------------------------------- برچسب */
.hp .pn-tag{display:inline-block; padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:700;
  background:#eef3f4; color:#5d757c; white-space:nowrap}
.hp .pn-tag.ok{background:var(--green-50,#eef7e2); color:#3f6d0a}
.hp .pn-tag.warn{background:#fff7e0; color:#8a6100}
.hp .pn-tag.info{background:var(--teal-50,#e6f4f6); color:var(--teal-600,#006d7d)}
.hp .pn-tag.bad{background:#fdecea; color:#b42318}
.hp .pn-code{
  direction:ltr; font-family:Consolas,'Courier New',monospace; font-size:12.5px; font-weight:700;
  background:#f1f6f7; border:1px solid var(--line); padding:5px 10px; border-radius:8px;
  display:inline-block; overflow-wrap:anywhere;
}

/* ------------------------------------------------------------------ پیام‌ها */
.hp .pn-note{margin:0 0 16px; padding:12px 16px; border-radius:var(--r-md); font-size:13.5px; line-height:1.9; font-weight:700}
.hp .pn-note.ok{background:var(--green-50,#eef7e2); border:1px solid #cfe8a8; color:#3f6d0a}
.hp .pn-note.err{background:#fdf2f2; border:1px solid #f0cccc; color:#8f2c20}
.hp .pn-note.info{background:var(--teal-50,#e6f4f6); border:1px solid #bfe3e8; color:var(--teal-600,#006d7d)}
.hp .pn-note ul{margin:6px 18px 0 0; padding:0}

/* ------------------------------------------------------------------ فرم‌ها */
.hp .pn-form .pn-field{margin-bottom:14px}
.hp .pn-form label,
.hp .pn-field > span.lbl{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px}
.hp .pn-form input[type=text],
.hp .pn-form input[type=tel],
.hp .pn-form input[type=email],
.hp .pn-form input[type=password],
.hp .pn-form input[type=number],
.hp .pn-form select,
.hp .pn-form textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:13.5px; background:#fff; color:var(--ink); transition:var(--tr);
}
.hp .pn-form input:focus,
.hp .pn-form select:focus,
.hp .pn-form textarea:focus{outline:0; border-color:var(--teal-light); box-shadow:0 0 0 3px rgba(53,201,219,.16)}
.hp .pn-form textarea{min-height:120px; resize:vertical; line-height:1.9}
.hp .pn-form .hint,
.hp .pn-hint{display:block; margin-top:6px; font-size:12px; color:var(--muted); line-height:1.8}
.hp .pn-form .err{display:block; margin-top:6px; font-size:12px; color:#b42318; font-weight:700}
.hp .pn-form .pn-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hp .pn-form .pn-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px}
.hp .pn-readonly{
  background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:11px 13px; font-size:13.5px; color:var(--ink); direction:ltr; text-align:right; font-weight:700;
}

/* --------------------------------------------------------------------- تب‌ها */
.hp .pn-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap}
.hp .pn-tab{
  appearance:none; background:transparent; border:0; border-bottom:3px solid transparent;
  padding:10px 16px; font:inherit; font-size:13.5px; font-weight:800; color:var(--muted);
  cursor:pointer; transition:var(--tr); border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.hp .pn-tab:hover{color:var(--teal-600); background:var(--bg-soft)}
.hp .pn-tab[aria-selected="true"]{color:var(--teal); border-bottom-color:var(--teal); background:transparent}
.hp .pn-pane[hidden]{display:none}

/* ------------------------------------------------------------------ مراحل */
.hp .pn-steps{display:flex; gap:8px; margin:0 0 18px; padding:0; list-style:none; flex-wrap:wrap}
.hp .pn-steps li{
  display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--muted);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:20px; padding:6px 13px;
}
.hp .pn-steps li.is-on{background:var(--teal); border-color:var(--teal); color:#fff}
.hp .pn-steps li.is-done{background:var(--green-50,#eef7e2); border-color:#cfe8a8; color:#3f6d0a}

/* ------------------------------------------------------------------ تایم‌لاین */
.hp .pn-timeline{list-style:none; margin:0; padding:6px 0 0}
.hp .pn-timeline li{position:relative; padding:0 20px 16px 0; border-right:2px solid var(--line); margin-right:6px}
.hp .pn-timeline li:last-child{border-right-color:transparent; padding-bottom:2px}
.hp .pn-timeline li::before{
  content:''; position:absolute; right:-7px; top:4px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--teal-light);
}
.hp .pn-timeline b{display:block; font-size:13px; color:var(--ink); font-weight:800}
.hp .pn-timeline span{display:block; font-size:11.5px; color:var(--muted); margin-top:3px}

/* ------------------------------------------------------------------- اعلان */
.hp .pn-notif{display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.hp .pn-notif:last-child{border-bottom:0}
.hp .pn-notif.is-new{background:#f4fbfc}
.hp .pn-notif .dot{width:9px; height:9px; border-radius:50%; background:var(--teal-light); margin-top:7px; flex:0 0 9px}
.hp .pn-notif.is-read .dot{background:var(--line)}
.hp .pn-notif .body{flex:1 1 auto; min-width:0}
.hp .pn-notif b{font-size:13.5px; color:var(--ink); font-weight:800}
.hp .pn-notif p{margin:5px 0 0; font-size:12.8px; color:var(--body,#3f565e); line-height:1.9}
.hp .pn-notif .meta{font-size:11.5px; color:var(--muted); margin-top:6px; display:flex; gap:10px; flex-wrap:wrap}

/* ---------------------------------------------------------------- تیکت‌ها */
.hp .pn-chat{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.hp .pn-chat li{
  border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; background:#fff;
  box-shadow:var(--sh-1);
}
.hp .pn-chat li.from-admin{background:var(--bg-soft); border-color:#cfe3e7}
.hp .pn-chat .who{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:7px}
.hp .pn-chat .who .tag{font-weight:700}
.hp .pn-chat .txt{font-size:13.5px; color:var(--body,#3f565e); line-height:2; white-space:pre-wrap; overflow-wrap:anywhere}
.hp .pn-chat .at{font-size:11.5px; color:var(--muted); margin-inline-start:auto; font-weight:600}
.hp .pn-chat li.is-internal{border-style:dashed; background:#fffbf0}

/* ------------------------------------------------------------------ آموزش */
.hp .pn-tut-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.hp .pn-tut{
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-1);
  overflow:hidden; display:flex; flex-direction:column; transition:var(--tr);
}
.hp .pn-tut:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.hp .pn-tut .cover{height:120px; background:var(--bg-soft); display:block; overflow:hidden}
.hp .pn-tut .cover img{width:100%; height:100%; object-fit:cover}
.hp .pn-tut .cover.no-img{display:flex; align-items:center; justify-content:center; color:var(--teal); font-size:30px}
.hp .pn-tut .in{padding:13px 15px; display:flex; flex-direction:column; gap:7px; flex:1 1 auto}
.hp .pn-tut h3{margin:0; font-size:14px; font-weight:800; color:var(--ink); line-height:1.8}
.hp .pn-tut p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.9}
.hp .pn-tut .foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px}

/* --------------------------------------------------------------- صفحه‌بندی */
.hp .pn-pager{display:flex; gap:6px; flex-wrap:wrap; padding:14px 18px; align-items:center}
.hp .pn-pager a,
.hp .pn-pager span{
  min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:9px; font-size:13px; font-weight:700; color:var(--ink);
  padding:0 10px;
}
.hp .pn-pager a:hover{background:var(--bg-soft); border-color:var(--teal-light)}
.hp .pn-pager .on{background:var(--teal); border-color:var(--teal); color:#fff}
.hp .pn-pager .off{color:var(--muted); opacity:.6}

/* ------------------------------------------------------------------ دکمه‌ها */
.hp .pn-danger{
  background:#fdf2f2; color:#b42318; border:1px solid #f0cccc; border-radius:var(--r-sm);
  padding:8px 13px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:var(--tr);
}
.hp .pn-danger:hover{background:#fbe3e3}
.hp .pn-inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.hp .pn-inline input[type=text],
.hp .pn-inline select{padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font:inherit; font-size:12.5px}

/* --------------------------------------------------------------- واکنش‌گرا */
@media (max-width:1024px){
  .hp .pn-shell{grid-template-columns:1fr}
  .hp .pn-side{position:static}
  .hp .pn-menu{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); display:grid}
}
@media (max-width:860px){
  .hp .pn-form .pn-row{grid-template-columns:1fr}
  .hp .pn-head h1{font-size:19px}
}
@media (max-width:600px){
  .hp .pn-grid{grid-template-columns:1fr}
  .hp .pn-tut-grid{grid-template-columns:1fr}
  .hp .pn-tbl th,
  .hp .pn-tbl td{padding:9px 10px; font-size:12.5px}
}

/* ---------------------------------------------------- کارت‌های لایسنس (سبک ESET HOME) */
.hp .pn-lic-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-bottom:20px}
.hp .pn-lic-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px; transition:var(--tr);
}
.hp .pn-lic-card:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.hp .pn-lic-card header{display:flex; align-items:center; justify-content:space-between; gap:8px}
.hp .pn-lic-card .brand{font-size:10.5px; font-weight:900; letter-spacing:1px; color:var(--teal); direction:ltr}
.hp .pn-lic-card h3{margin:0; font-size:15px; font-weight:800; color:var(--ink); line-height:1.8}
.hp .pn-lic-card dl{margin:0; display:grid; gap:6px}
.hp .pn-lic-card dl > div{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px}
.hp .pn-lic-card dt{color:var(--muted); font-weight:700; direction:ltr; font-size:11px; letter-spacing:.5px}
.hp .pn-lic-card dd{margin:0; color:var(--ink); font-weight:800}
.hp .pn-lic-card .code{display:grid; gap:5px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px}
.hp .pn-lic-card .code .lbl{font-size:11.5px; color:var(--muted); font-weight:700}
.hp .pn-lic-card .bar{height:7px; border-radius:6px; background:var(--line); overflow:hidden}
.hp .pn-lic-card .bar span{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-light))}
.hp .pn-lic-card .usage{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--body)}
.hp .pn-lic-card footer{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}

/* ------------------------------------------------------------------- مودال‌ها */
.hp .pn-modal{
  position:fixed; inset:0; background:rgba(12,38,44,.55); z-index:1200;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.hp .pn-modal[hidden]{display:none}
.hp .pn-modal-card{
  background:#fff; border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(10,35,42,.28);
  width:min(560px,100%); max-height:88vh; overflow:auto;
}
.hp .pn-modal-card > header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--bg-soft);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.hp .pn-modal-card > header h3{margin:0; font-size:15px; font-weight:900; color:var(--ink)}
.hp .pn-modal-card .x{
  appearance:none; border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer;
  color:var(--muted); padding:2px 6px; border-radius:8px;
}
.hp .pn-modal-card .x:hover{background:#f1f6f7; color:var(--ink)}
.hp .pn-modal-card .body{padding:18px}
.hp .pn-modal-card footer{display:flex; gap:8px; justify-content:flex-start; padding:0 18px 18px}
.hp .pn-modal .picker{display:grid; gap:8px; margin-bottom:12px}
.hp .pn-modal .picker button{
  text-align:right; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:var(--tr);
}
.hp .pn-modal .picker button:hover{border-color:var(--teal-light); background:var(--bg-soft)}
.hp .pn-modal .picker button.is-picked{border-color:var(--teal); background:var(--teal-50,#e6f4f6)}

/* ------------------------------------------------------- کارت دستگاه محافظت‌شده */
.hp .pn-dev-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.hp .pn-dev{
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-1);
  padding:14px 16px; display:flex; flex-direction:column; gap:9px;
}
.hp .pn-dev.is-off{background:#fbfdfd; opacity:.85}
.hp .pn-dev.is-pending{border-color:#f0d9a8; background:#fffdf7}
.hp .pn-dev.is-reinstall{border-color:#bfe3e8; background:#f4fbfc}
.hp .pn-dev header{display:flex; align-items:center; justify-content:space-between; gap:8px}
.hp .pn-dev h4{margin:0; font-size:14px; font-weight:800; color:var(--ink)}
.hp .pn-dev .host{font-size:12px; color:var(--muted); direction:ltr; text-align:right}
.hp .pn-dev .row{display:flex; align-items:center; justify-content:space-between; font-size:12.5px}
.hp .pn-dev .acts{display:flex; gap:7px; flex-wrap:wrap; margin-top:auto}
.hp .pn-seat-empty{
  border:1px dashed var(--line); border-radius:var(--r-lg); background:#fbfdfd;
  display:flex; align-items:center; justify-content:center; min-height:120px;
  color:var(--muted); font-size:13px; font-weight:700; gap:8px;
}

/* ------------------------------------------------------- تبلیغات نوار کناری */
.hp .pn-side-ads{margin-top:12px; border-top:1px solid var(--line); padding-top:10px; display:grid; gap:9px}
.hp .pn-side-ad{
  display:grid; gap:6px; padding:9px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg-soft); text-decoration:none; transition:var(--tr);
}
.hp .pn-side-ad:hover{border-color:var(--teal-light); background:#f4fbfc}
.hp .pn-side-ad img{width:100%; height:auto; border-radius:8px}
.hp .pn-side-ad b{font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.7}

/* ------------------------------------------------- نوار «ورود به جای کاربر» */
.hp .pn-impersonate{
  background:#fff4d6; border-bottom:2px solid #f0d9a8; color:#7a5300;
  padding:9px 18px; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.hp .pn-impersonate a{
  background:#7a5300; color:#fff; border-radius:20px; padding:6px 14px; font-size:12.5px; text-decoration:none;
}

/* --------------------------------------------------------- سوالات متداول */
.hp .pn-faq{border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; margin-bottom:8px; background:#fff}
.hp .pn-faq summary{cursor:pointer; font-size:13.5px; font-weight:800; color:var(--ink)}
.hp .pn-faq .ans{margin-top:9px; font-size:13px; color:var(--body,#3f565e); line-height:2}

/* ── راهنمای «بعد از خرید» در پنل مشتری (بخش ۴۶) ─────────────────────── */
.pp-guide{ font-size:13.5px; line-height:2.05; color:#26454c }
.pp-guide > :first-child{ margin-top:0 }
.pp-guide > :last-child{ margin-bottom:0 }
.pp-guide h3,.pp-guide h4{ font-size:15px; margin:13px 0 7px; color:#0f2b31 }
.pp-guide p{ margin:0 0 10px }
.pp-guide ol,.pp-guide ul{ margin:0 0 12px; padding-inline-start:20px }
.pp-guide li{ margin:0 0 6px }
.pp-guide a{ color:#008193; font-weight:700 }
.pp-guide code{
  background:#f2f7f8; border:1px solid #e2ecef; border-radius:6px; padding:1px 6px;
  font-family:Consolas,monospace; font-size:12.5px; direction:ltr; display:inline-block;
}
.pp-guide table{ width:100%; border-collapse:collapse; margin:0 0 12px; font-size:13px }
.pp-guide th,.pp-guide td{ border:1px solid #e2ecef; padding:7px 9px; text-align:right }
.pp-guide img{ max-width:100%; height:auto; border-radius:10px }