/* 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: 12px 12px 12px 12px;
}
.sb-toggle {
  background: transparent;
  border: 0px;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  font-size: 20px;
}
.sb-toggle:hover{color:#fbbf24}
.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: 0px 12px;
  display: grid;
  gap: 7px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.menu-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  color: #e2e8f0;
  background: #152243;
  text-decoration: none;
}
.menu-item .mi {
  width: 20px;
  text-align: center;
  color: #fbbf24;
}
.menu-item.active, .menu-item:hover {
    background: #374c6b;
    color: #fff;
}
.sb-footer{margin-top:auto;padding:12px}
.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 rgb(251 191 34 / 58%);
  border-radius: 8px;
  background: #ffed0030;
  color: #fbbf24;
  text-decoration: none;
}
.coin .buy-coin:hover{background:#0f1216}
/* 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, #0f172a, #374c6b);
    color: #fff;
    border-radius: 14px;
    padding: 32px 28px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden; /* để bubble không tràn ra ngoài */
}
.hero-text {
    position: relative;
    z-index: 1;
}
.bubbles span {
  position: absolute;
  bottom: -100px;
  display: block;
  width: 80px;
  height: 80px;
  background: #374b6a;
  border-radius: 50%;
  animation: rise linear infinite;
}

/* keyframes giữ nguyên */
@keyframes rise {
  0%   { transform: translateY(0) scale(1); opacity: 0.7; }
  100% { transform: translateY(-120vh) scale(0.7); opacity: 0; }
}

/* mỗi bubble 1 tốc độ + delay khác nhau */
.bubbles span:nth-child(1) { left: 10%; animation-duration: 4s; animation-delay: 0s;   }
.bubbles span:nth-child(2) { left: 30%; animation-duration: 5.5s; animation-delay: 1s; }
.bubbles span:nth-child(3) { left: 50%; animation-duration: 6s;   animation-delay: 2s; }
.bubbles span:nth-child(4) { left: 70%; animation-duration: 4.5s; animation-delay: 0.5s; }
.bubbles span:nth-child(5) { left: 90%; animation-duration: 5s;   animation-delay: 1.5s; }


.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, button#btn-gemini-room, button#btn-gemini-3d, button#btn-gemini-ve, button#btn-gemini-boi, button#btn-gemini-sua, button#btn-gemini-coi {
    background: #ffffff;
    color: #1a263d;
    width: auto;
    margin-top: 10px;
}
button#btn-upload, button#btn-upload-room, button#btn-upload-3d, button#btn-upload-ve, button#btn-upload-sua, button#btn-upload-coi {
  border: 1px solid #ffffff;
  color: #ffffff;
  background: none;
  margin-right: 10px;
  width: auto;
  margin-top: 10px;
}
button#btn-gemini:hover, button#btn-gemini-room:hover, button#btn-upload:hover, button#btn-upload-room:hover, button#btn-upload-3d:hover, button#btn-gemini-3d:hover, button#btn-gemini-ve:hover, button#btn-upload-ve:hover, button#btn-gemini-boi:hover, button#btn-gemini-sua:hover, button#btn-upload-sua:hover, button#btn-gemini-coi:hover, button#btn-upload-coi: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;}
.controls2{background:var(--card);border-radius:12px;padding:12px 12px;margin-bottom:18px;border: 1px solid #f78268;}
.controls3{background:var(--card);border-radius:12px;padding:12px 12px;margin-bottom:18px;border: 1px solid #6339d4;}
.controls4{background:var(--card);border-radius:12px;padding:12px 12px;margin-bottom:18px;border: 1px solid #cfaa02;}
.controls5{background:var(--card);border-radius:12px;padding:12px 12px;margin-bottom:18px;border: 1px solid #ff6291;}
.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-san-co-room, .mau-san-co-room-style, .mau-san-co-type, .mau-san-co-sat, .mau-san-co-3d, .mau-san-co-sua, .mau-san-co-coi{display:flex;flex-wrap:wrap;gap:6px;}
.mau-suggestion, .mau-suggestion-room{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, .mau-suggestion-room:hover{background:#ec5c851a;border-color:#dbeafe;color:#ee647f}
.mau-suggestion-room-style, .mau-suggestion-type, .mau-suggestion-sat, .mau-suggestion-3d, .mau-suggestion-sua, .mau-suggestion-coi {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-room-style:hover, .mau-suggestion-3d:hover, .mau-suggestion-sua:hover, .mau-suggestion-coi:hover {
    background: #5cd0ec1a;
    border-color: #dbeafe;
    color: #60a1f9;
}
.mau-suggestion-type:hover {
  background: #8e5cec1a;
  border-color: #dbeafe;
  color: #651ec0;
}
.mau-suggestion-sat:hover {
  background: #ecae5c1a;
  border-color: #dbeafe;
  color: #b95707;
}
/* Active state for material */
.mau-suggestion-sat.active {
  background: #f6f0dc;
  border-color: #d7b760;
  color: #8b6b1f;
}

/* Active state for house renovation styles */
.mau-suggestion-sua.active, .mau-suggestion-coi.active, .mau-suggestion-room-style.active, .mau-suggestion-3d.active {
  background: #e0f7ff;
  border-color: #5fa1f9;
  color: #1e40af;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(215,183,96,0.2);
  transform: translateY(-1px);
}
/* Active state for room type */
.mau-suggestion-type.active{
  background:#8e5cec1a;
  border-color:#651ec0;
  color:#651ec0;
  font-weight:600;
  box-shadow:0 0 0 2px rgba(101,30,192,0.2);
  transform: translateY(-1px);
}
/* Active states for room design buttons */
.mau-suggestion-room.active {
    background: #ec5c851a;
    border-color: #ee647f;
    color: #ee647f;
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(238, 100, 127, 0.2);
    transform: translateY(-1px);
}

.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:7px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#374151;cursor:pointer;margin-top: 10px;}
.tomau-tag .dot{width:20px;height:20px;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{position:relative}
.pinmau-canvas-wrap canvas{border-radius: 10px;}
.pinmau-canvas{display:block;width:100%;height:auto}
.pinmau-cross{position:absolute;top:-15px;left:-15px;width:30px;height:30px;pointer-events:none;display:none;transition:all 0.1s ease;--pixel-color:#111827;border-radius:50%;border:3px solid rgba(255,255,255,0.9);box-shadow:0 0 0 1px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);background:var(--pixel-color);z-index:1000}
.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 #1da96f;}
.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:100%;height:100%;display:none;z-index:1;}
.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:2;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.compare.has-after::after {
  content: "\f337";
  font-family: "FontAwesome";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  background: #0b12209e;
  border: 2px solid #5fa1f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #5fa1f9;
  z-index: 3;
  transform: translateY(-50%);
  cursor: col-resize;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.compare[data-pos]{--pos:50}
.compare[data-pos].has-after::before{left:calc(var(--pos) * 1% - 1px)}
.compare[data-pos].has-after::after{left:calc(var(--pos) * 1% - 20px)}
.compare[data-pos].has-after .after-wrap{clip-path:inset(0 calc(100% - var(--pos) * 1%) 0 0)}
.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: #1ca971;
  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, div#gen-status-room span, div#gen-status-3d span, div#gen-status-ve span,  div#gen-status-sua span, div#gen-status-coi span{
  margin-top: 10px;
  display: block;
  color: #fbce66;
}
section#tab-saved h2 {
  background: linear-gradient(90deg, #0f172a, #374c6b);
    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;
  background: none !important;
  margin-top: 15px;
  padding: 12px 0px;
}
.title-colo {
  padding: 5px 20px;
  color: #fff;
  margin-left: 15px;
  border-radius: 10px 10px 0px 0px;
  width: 150px;
  font-size: 14px;
  font-weight: bold;
}
.title-colo i{width:25px;}
.title-colo.title-colo-v1 {
  background: linear-gradient(90deg, #4f46e5, #60a5fa);
}
.title-colo.title-colo-v2 {
  background: linear-gradient(90deg, #e54697, #fa8b60);
}
.title-colo.title-colo-v3 {
  background: linear-gradient(90deg, #428d2a, #1aab75);
}
.title-colo.title-colo-v4 {
  background: linear-gradient(90deg, #712a8d, #641dc2);
}
.title-colo.title-colo-v5 {
  background: linear-gradient(90deg, #cf6900, #cfc100);
}
.title-colo.title-colo-v6 {
  background: linear-gradient(90deg, #ff276f, #ff6291);
}
span.coin-value i {
  color: #fbbf24;
  margin-right: 5px;
}
button#btn-save-media, button#btn-save-media-room,  button#btn-save-media-3d, button#btn-save-media-ve, button#btn-save-media-sua, button#btn-save-media-coi{
  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: 10px;
    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: 7px;
    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;
}
span#phan-tich-anh {
    background: #ee647f;
    color: #fff;
    border: 1px solid;
}
span#phan-tich-anh:hover {
    opacity: 0.6;
}
div#phan-tich-ra span {
    background: #ee647f26;
    border: 1px solid #ee647f;
}
/* Image Analysis Results Styling */
.analysis-loading {
  text-align: center;
  color: #6b7280;
  font-style: italic;
}

.analysis-loading i {
  margin-left: 8px;
  color: #ee647f;
}

.analysis-error {
  color: #dc2626;
  font-size: 14px;
}

.analysis-result {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-top: 10px;
}

.compare.has-image.has-after, .compare.has-image{min-height: auto !important;}

section#compare-text-tot {
    padding: 12px;
}

/* Xem bói màu theo phong thủy styling */
.loading-boi {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.boi-error {
    padding: 15px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 14px;
    text-align: center;
}

.boi-error i {
    margin-right: 8px;
    color: #dc2626;
}

.boi-element-info {
    background: #ee647f26;
    border: 1px solid #f98a61;
    color: #f88466;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.boi-element-info strong {
    color: #f88466;
    font-size: 16px;
}

.boi-lunar-date {
    display: block;
    color: #6b7280;
    font-size: 14px;
    margin-top: 5px;
}

.boi-analysis-section,
.boi-advice-section {
    margin-bottom: 15px;
}

.boi-analysis-section ol,
.boi-analysis-section ul,
.boi-advice-section ol,
.boi-advice-section ul {
    margin: 10px 0;
    padding-left: 25px;
}

.boi-analysis-section li,
.boi-advice-section li {
    margin-bottom: 8px;
    line-height: 1.6;
}
.boi-advice-section{margin-bottom: 0px;}
.boi-analysis-section h4,
.boi-advice-section h4 {
    color: #1caa71;
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid #1caa71;
    padding-bottom: 8px;
}

.boi-analysis-content,
.boi-advice-content {
    color: #374151;
    line-height: 1.6;
}

.boi-analysis-content p,
.boi-advice-content p {
    margin-bottom: 12px;
}

.boi-analysis-content p:last-child,
.boi-advice-content p:last-child {
    margin-bottom: 0;
}
.btn.primar-up i, .btn.primar-tao i{margin-right: 5px;}
.xem-boi-tit-v1 {
    color: #5fa1f9;
}
.xem-boi-tit-v2 {
    color: #f98862;
}
.prompt-texta {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    width: 100%;
}

/* Material Upload Styles */
.materials-list.has-vl{
  margin-top:15px;
}

.upload-btn {
    background: #cfaa02;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.upload-btn:hover {
    opacity: 0.7;
}

.upload-btn i {
    font-size: 16px;
}

.materials-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.material-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    position: relative;
}

.material-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
}

.material-type-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}

.material-type-input:focus {
    outline: none;
    border-color: #cfaa02;
    box-shadow: 0 0 0 2px rgba(207, 170, 2, 0.1);
}

.material-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.material-remove-btn:hover {
    background: #b91c1c;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .materials-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .material-preview {
        height: 100px;
    }
}