/* Home page styles for Sơn nhà */
:root{--bg:#f7f8fb;--card:#ffffff;--primary:#4f46e5;--primary-2:#6366f1;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--sb:#0f172a;--sb-muted:#94a3b8}
body.sonnha{background:var(--bg);padding:0px !important;width: 100% !important;display: block !important;}
.topbar{display:none}
.layout{display:grid;grid-template-columns:auto 1fr;min-height:100vh;min-height:100dvh;height:100%}
.sidebar{background:var(--sb);color:#e2e8f0;border-right:1px solid #0b1220;display:flex;flex-direction:column;width:280px;min-height:100vh;min-height:100dvh;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.sb-top{display:flex;align-items:center;gap:10px;padding:10px 12px}
.sb-toggle{background:transparent;border:1px solid rgba(226,232,240,.2);color:#e2e8f0;border-radius:8px;padding:6px 10px;cursor:pointer}
.brand{padding:6px 8px;font-weight:700;color:#fff;font-size:18px}
.brand img.custom-logo{max-height:32px;width:auto;display:block}
.menu {
  padding: 6px;
  display: grid;
  gap: 7px;
}
.menu-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:6px;color:#e2e8f0;text-decoration:none}
.menu-item .mi{width:20px;text-align:center}
.menu-item.active,.menu-item:hover{background:#1f2937;color:#fff}
.sb-footer{margin-top:auto;padding:8px}
.coin-value{display:inline-block;padding:6px 10px;border:1px solid rgba(226,232,240,.2);border-radius:8px;background:#0b1220;color:#e2e8f0}
.coin .buy-coin{margin-left:5px;display:inline-block;padding:6px 10px;border:1px solid rgba(226,232,240,.2);border-radius:8px;background:#1f2937;color:#e2e8f0;text-decoration:none}
.coin .buy-coin:hover{background:#374151}
/* collapsed */
.sidebar.collapsed{width:72px}
.sidebar.collapsed .brand,.sidebar.collapsed .ml,.sidebar.collapsed .coin{display:none}
.sidebar.collapsed .sb-top{justify-content:center}
.sidebar.collapsed .menu-item{justify-content:center;align-content:center;text-decoration:none}
.sidebar.collapsed .menu-item .mi{width:auto}
.layout .sidebar.collapsed + .content .container{max-width:1200px}

.content{padding:24px 28px;height:100vh;overflow:auto}
.container{max-width:1120px;margin:0 auto}
.hero{background:linear-gradient(90deg,#4f46e5, #60a5fa);color:#fff;border-radius:14px;padding:32px 28px;margin-bottom:18px}
.hero h1{font-size:28px;margin-bottom:20px}
.hero h1 .greeting-name{color:#fbbf24;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.1)}
.hero p{margin:0 0 16px;color:#eef2ff}

button#btn-gemini {
  background: #ffffff;
  color: #556ced;
  width: auto;
  margin-top: 10px;
}
button#btn-upload {
  border: 1px solid #ffffff;
  color: #ffffff;
  background: none;
  margin-right: 10px;
  width: auto;
  margin-top: 10px;
}
button#btn-gemini:hover, button#btn-upload:hover{opacity: 0.7;}
.btn.icon{background:#eef2ff;color:var(--primary);padding:10px;border:1px solid #dbeafe}

.controls{background:var(--card);border-radius:12px;padding:12px 12px;margin-bottom:18px;border: 1px solid #5fa1f9;}
.control-label{color:var(--muted)}
.control-input input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px}

/* Color search box */
.tim-ma-box{display:flex;align-items:center;gap:8px;margin:4px 0 12px}
.tomau-search{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.tomau-search::placeholder{color:#9ca3af}

/* Color input row and tags */
.tomau-input-row{display:flex;gap:8px;align-items:center;}
.tomau-input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.tomau-input::placeholder{color:#9ca3af}

.tomau-btn{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);font-weight:600;cursor:pointer}
.tomau-btn-muted{background:#f3f4f6;color:#374151}
.tomau-btn:hover{background:#eef2ff;border-color:#dbeafe}

.tomau-tags{display:flex;flex-wrap:wrap;gap:8px}
.mau-san-co{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mau-suggestion{display:inline-block;padding:4px 8px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;font-size:12px;color:#374151;cursor:pointer;transition:all 0.2s ease}
.mau-suggestion:hover{background:#eef2ff;border-color:#dbeafe;color:#1e40af}
.color-list .color-chip.highlight{
    border-color:#3b82f6; 
    box-shadow:0 0 0 3px rgba(59,130,246,0.25);
    transform: translateY(-2px);
}
.tomau-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#374151;cursor:pointer;margin-top: 10px;}
.tomau-tag .dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}
.tomau-tag .label{font-size:12px}
.tomau-tag .remove{font-size:14px;line-height:1;color:#6b7280;padding:0 2px}
.tomau-tag .remove:hover{color:#ef4444}

/* Pin màu panel */
#pin-mau{border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:10px;padding:10px}
.pinmau-wrap{display:flex;flex-direction:column;gap:10px}
.pinmau-toolbar{display:flex;align-items:center;gap:10px}
.pinmau-file{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff}
.pinmau-info{color:#6b7280;font-size:12px}
.pinmau-hex {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: monospace;
  min-width: 30px;
  min-height: 30px;
}
.pinmau-close{border:1px solid var(--line);background:#f3f4f6;border-radius:8px;padding:6px 10px;cursor:pointer}
.pinmau-canvas-wrap canvas{border-radius: 10px;}
.pinmau-canvas{display:block;width:100%;height:auto}
.pinmau-cross{position:absolute;top:8px;left:8px;width:22px;height:22px;pointer-events:none;display:none}
.pinmau-cross::before,.pinmau-cross::after{content:"";position:absolute;background:#111827}
.pinmau-cross::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.pinmau-cross::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
.pinmau-upload{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#374151;cursor:pointer}
.pinmau-upload:hover{background:#eef2ff;border-color:#dbeafe}

.result h2{font-size:20px;margin:8px 0 12px;color:var(--text)}
.compare{position:relative;border-radius:12px;background:#f8fafc;min-height:300px;overflow:hidden;border: 1px solid #5fa1f9;}
.cmp-img{object-fit:cover;width:100%;height:100%;display:block}
.cmp-after{position:absolute;inset:0;width:100%;height:100%}
.compare.has-image .placeholder{display:none}
.compare .placeholder{z-index:1}

/* Built-in slider */
.after-wrap{position:absolute;inset:0;width:50%;height:100%;overflow:hidden;display:none}
.cmp-range{position:absolute;inset:auto 0 0 0;left:0;right:0;bottom:12px;margin:auto;width:60%;z-index:2;appearance:none;height:4px;background:rgba(0,0,0,0.2);border-radius:999px;display:none}
.cmp-range::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.cmp-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.compare.has-after::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:rgba(255,255,255,0.9);z-index:1;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.compare[data-pos]{--pos:50}
.compare[data-pos].has-after::before{left:calc(var(--pos) * 1% - 1px)}
.compare[data-pos].has-after .after-wrap{width:calc(var(--pos) * 1%)}
.compare.has-after .after-wrap{display:block}
.compare.has-after .cmp-range{display:block}
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #5fa0f9;
  background: #ffffff;
}
.ph-title {
  font-size: 66px;
  font-weight: 600;
  text-align: center;
}
.ph-title span {
  display: block;
  font-size: 18px;
}
.actions{margin-top:12px}
.actions.hidden{display:none}
.after-meta{margin-top:10px;display:flex;gap:8px;align-items:center}
.after-meta.hidden{display:none}
.color-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#374151}
.color-badge .dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}

/* Saved list */
.saved-list{display:flex;flex-direction:column;gap:10px}
.saved-item{gap:10px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.saved-item .info{display:flex;gap:10px;align-items:center}
.saved-item img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.saved-item .btns{display:flex;gap:8px}
.saved-item .btn{background:#e5e7eb;border:none;border-radius:6px;padding:8px 10px;font-weight:600;cursor:pointer;text-decoration:none;color:#374151;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px}
.saved-item .btn:hover{background:#d1d5db}
.saved-item .btn-delete{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.saved-item .btn-delete:hover{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  /* Mobile top bar same color as sidebar */
  .topbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:24;background:var(--sb);color:#e2e8f0;border-bottom:1px solid #0b1220;padding:8px 12px;gap:10px;align-items:center}
  .topbar .sb-toggle{color:#e2e8f0;border-color:rgba(226,232,240,.2)}
  .content{padding-top:52px}
  .container{margin-top:30px}
  /* Sidebar slide in from left when body has .menu-open */
  .sidebar{position:fixed;z-index:30;left:0;right:auto;top:0;bottom:0;display:flex;transform:translateX(-100%);transition:transform .2s ease}
  body.menu-open .sidebar{transform:translateX(0)}
  /* Saved items: stack and move button row to new line */
  .saved-item{flex-direction:column;align-items:stretch}
  .saved-item .btns{flex-wrap:wrap;justify-content:flex-start;margin-top:8px}
}
.clr-field {
  width: 100%;
}
.clr-field input {
  width: 100%;
}
.clr-field button {
  border-radius: 0px 10px 10px 0px;
  width: 40px !important;
}
div#gen-status span {
  margin-top: 10px;
  display: block;
  color: #fbce66;
}
section#tab-saved h2 {
  background: linear-gradient(90deg, #4f46e5, #60a5fa);
    color: #fff;
    border-radius: 14px;
    padding: 32px 28px;
    margin-bottom: 18px;
}
.no-img {
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
}
a.menu-item.logout {
  border-top: 1px solid #2a385b;
  border-radius: 0px;
  margin-top: 15px;
}
.title-colo {
  padding: 3px 20px;
  background: linear-gradient(90deg, #4f46e5, #60a5fa);
  color: #fff;
  margin-left: 15px;
  border-radius: 10px 10px 0px 0px;
  width: 120px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
span.coin-value i {
  color: #fbbf24;
  margin-right: 5px;
}
button#btn-save-media {
  width: auto;
  border-radius: 30px;
  background: #60a5fa;
  color: #fff;
  padding: 10px 20px;
}
.control-input {
    max-height: 230px;
    overflow: auto;
    padding: 3px;
}
#color-list {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.color-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.color-chip:hover {
    transform: translateY(-2px);
}

.color-chip-text {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Color Filter Buttons */
.color-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.filter-btn:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.filter-btn.active {
    border-color: #3b82f6;
    background: #eff6ff;
}

.filter-circle {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mamau-ne{
  width:160px;
}
.mamau-ne input{
  width:100%;
}

/* Footer styles */
.footer {
    margin-top: 40px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.footer-content {
  color: var(--muted);
  line-height: 1.6;
}

.footer-content p {
  margin: 0 0 12px;
}

.footer-content p:last-child {
  margin-bottom: 0;
}

.footer-content a {
  color: var(--primary);
  text-decoration: none;
}

.footer-content a:hover {
  text-decoration: underline;
}
.logo-ico img {
    max-width: 200px;
}
.logo-ico {
    text-align: center;
    margin-bottom: 10px;
}

/* Focus-visible styling for all inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  outline-offset: 1px;
  border-color: #5fa1f9;
}