/* Copy from original assets/css/style.css (UI giữ nguyên) */
.submit_container__SFJYL{width:689px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center}
.submit_wrapper__Rc7t1{display:flex;order:1}
.submit_unsentProject__CC9A0{position:relative;width:440px;height:496px;background-repeat:no-repeat;background-size:contain;background-color:#000}
.submit_recipient__3jtQC{position:absolute;width:56.8182%;height:7.66129%;top:2.82258%;left:22.0455%;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:0 12px;box-sizing:border-box;overflow:hidden}
.submit_to___dMRv{font-family:arial;font-size:33px;line-height:44px;letter-spacing:-1px;color:#000;text-shadow:0 0 0 #000;flex:0 0 auto}
.submit_name__P7J_c{width:calc(100% - 6px);margin-left:6px;font-size:33px;line-height:44px;outline:0;-webkit-appearance:none;border:0;box-sizing:border-box;background-color:transparent;font-family:arial;letter-spacing:-1px;color:#000;text-shadow:0 0 0 #000;max-width:none;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.submit_text__05VyW{position:absolute;top:11.6935%;left:5%;width:90.2273%;height:80.0403%;max-height:none;max-width:none;resize:none;padding:18px;font-size:46px;line-height:55px;outline:0;-webkit-appearance:none;border:0;box-sizing:border-box;background-color:transparent;font-family:arial;letter-spacing:-1px;color:#000;text-shadow:0 0 0 #000}
.submit_lightScheme__Pck9B{color:#fff}
.submit_lightScheme__Pck9B::placeholder{color:#bfbfbf}
.submit_colors__z4EOq{display:flex;flex-direction:column}
.submit_colorPalette__AmdmH{display:flex;flex-wrap:wrap;width:249px}
.submit_colorPalette__AmdmH:last-child{margin-right:0}
.submit_colorItem__QYLb7{cursor:pointer;display:inline-block;width:52.25px;height:52.25px;flex:1 0 52.25px;box-shadow:inset 0 0 0 4px #000;margin:5px}
.submit_submit__p9MH5{-webkit-appearance:none;box-shadow:inset 0 0 0 5px #000;font-weight:700;line-height:3rem;font-size:1.5rem;width:calc(100% - 10px);box-sizing:border-box;padding:0;border:0;margin-left:5px;margin-top:1rem;background:#e9e9e9;color:#6b7280}
body{background:#ffffff;color:#111827}
.navbar{border-bottom:1px solid #e5e7eb}
.navbar.navbar-dark.bg-dark{background:#ffffff!important;color:#111827}
.navbar .nav-link, .navbar .navbar-brand{color:#111827!important}
.card.bg-dark{background:#ffffff!important;color:#111827!important;border:1px solid #e5e7eb}
.note-card{height:360px;overflow:hidden;border-radius:16px;padding:22px;display:flex;flex-direction:column;box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06)}
.note-title{font-weight:700;text-align:center;opacity:.9;margin-bottom:6px}
.note-body{white-space:pre-wrap;flex:1;overflow:auto;padding-right:4px}
.note-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.btn-open{background:#1f6feb;border:0;color:#fff;padding:4px 12px;border-radius:999px;font-weight:600}
.btn-open:hover{background:#2563eb;color:#fff}
a{text-decoration:none}
.btn-primary{background:#2563eb;border-color:#1d4ed8}
.form-control, .form-select{background:#ffffff;color:#111827;border-color:#d1d5db}
.form-control::placeholder{color:#9ca3af}
.alert-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.note-body::-webkit-scrollbar{width:8px}
.note-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:8px}
.submit-wrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:nowrap;width:689px;margin-left:auto;margin-right:auto}
.card .card-body{display:block}
.submit-left{display:flex;flex-direction:column;gap:16px}
.submit-canvas{position:relative;width:440px;height:496px;background-repeat:no-repeat;background-size:contain;background-color:#000;background-image:url('../images/template.png');box-shadow:0 6px 16px rgba(0,0,0,.15)}
.submit-to{position:absolute;width:56.8182%;height:7.66129%;top:2.82258%;left:22.0455%;display:flex;align-items:center;padding:0 12px;box-sizing:border-box;font-size:33px;line-height:44px;color:#000;font-weight:700}
.submit-to .label{font-family:arial;letter-spacing:-1px;margin-right:6px}
.submit-to input{width:100%;margin-left:6px;font-size:33px;line-height:44px;border:0;outline:0;background:transparent;color:#9ca3af}
.submit-to input::placeholder{color:#9ca3af}
.submit-to input{width:100%;border:0;background:transparent;color:#000;outline:none;font:inherit}
.submit-to input::placeholder{color:#9ca3af}
.submit-text{position:absolute;top:11.6935%;left:5%;width:90.2273%;height:80.0403%;max-height:none;max-width:none;resize:none;padding:18px;border:0;background:transparent;outline:none;color:#000;font-size:46px;line-height:55px;box-sizing:border-box}
.submit-footer{position:absolute;left:10px;right:10px;bottom:8px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.palette{display:flex;flex-wrap:wrap;width:249px}
.swatch{cursor:pointer;display:inline-block;width:52.25px;height:52.25px;flex:1 0 52.25px;box-shadow:inset 0 0 0 4px #000;margin:5px}
.swatch:focus{outline:2px solid #1f6feb;outline-offset:2px}
.submit-bar{-webkit-appearance:none;box-shadow:inset 0 0 0 5px #000;font-weight:700;line-height:3rem;font-size:1.5rem;width:calc(100% - 10px);box-sizing:border-box;padding:0;border:0;margin-top:1rem}
/* Center submit button inside submit container on desktop */
.submit_container__SFJYL .submit-bar{display:block;margin:10px auto 0;order:3}
.submit-bar[disabled]{opacity:.25;cursor:not-allowed}
.submit-bar:not(:disabled):hover{background:#6b6b6b;color:#fff}
.submit-bar .spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border:2px solid transparent;border-top:2px solid #000;border-radius:50%;animation:spin 1s linear infinite;display:none}
.submit-bar.loading .spinner{display:block}
.submit-bar.loading{color:transparent}
.submit-bar .progress-bar{position:absolute;bottom:0;left:0;height:4px;background:#000;transition:width .3s ease;width:0%;border-radius:0 0 4px 4px}
@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
.submit-check{width:689px;margin:0 auto;text-align:center;order:2}
.submit-check p{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;line-height:1.5}
.submit-check .form-check-input{margin:0;transform:scale(1.2);width:18px;height:18px;accent-color:#007bff}
.submit_text__05VyW{white-space:pre-wrap}
.note-card{position:relative}
.filter_palette .submit_colorItem__QYLb7.selected{outline:3px solid #1f6feb;outline-offset:-3px}
.filter-wrap{position:relative}
.filter-panel{position:absolute;top:calc(100% + 6px);right:0;width:360px;border:2px solid #111827;z-index:20}
.color-dot{display:inline-block;width:16px;height:16px;border-radius:50%}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:1.5rem;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto;box-sizing:border-box}

/* PC: fix grid to 3 columns, match layout in reference image */
@media (min-width: 992px){
  .post-list{grid-template-columns:repeat(3,minmax(340px,1fr));gap:24px}
  /* Ensure note tiles follow column width (override inline 440x496) */
  .post-list .submit_unsentProject__CC9A0{width:100% !important;height:auto !important;aspect-ratio:440/496}
  /* Desktop: name input margin reset ONLY in lists (not submit canvas) */
  .post-list .submit_name__P7J_c{margin-left:0px !important}
}

/* Mobile responsive for post list */
@media screen and (max-width: 768px){
  .post-list{grid-template-columns:1fr;gap:1rem;padding:0;margin:0 auto;width:calc(100vw - 20px);max-width:360px}
}
.post-list li{list-style:none}
.post-list img{width:100%;height:auto;display:block}
.thumb{position:relative}
/* Vô hiệu overlay hover để không che click */
.thumb:hover::after{display:none}
.thumb .del-icon{display:none}

/* Force message text size inside notes list */
.post-list .submit_text__05VyW{font-size:22px!important;line-height:22px!important}
.mobile-hidden{display:none}
@media (min-width:640px){.mobile-hidden{display:block}}
.btn-loading-target.loading .spinner-border{display:inline-block!important}
.btn-loading-target.loading{opacity:.85}
#countPosts{font-size:.95rem}
.search-cont h2{font-size:1rem!important; line-height:1.4}
.tagline{font-size:1.125rem;line-height:1.7;font-weight:400;color:#374151;text-align:center}
.w-full{width:100%}
.max-w-2xl{max-width:42rem}
.mx-auto{margin-left:auto;margin-right:auto}
.container{width:100%}
.mt-12{margin-top:3rem}
.mb-4{margin-bottom:1rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
@media (min-width:768px){.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-gray-700{color:#374151}
.font-bold{font-weight:700}
.fw-semibold{font-weight:600}
.fs-4{font-size:1.5rem}

/* Mobile responsive - match original theunsentproject.com exactly */
@media screen and (max-width: 768px){
  /* Main container responsive: keep safe padding so content is not clipped */
  main.container{padding-left:12px;padding-right:12px;max-width:100%}
  
  /* Card body minimal padding */
  .card .card-body{padding:10px}
  
  /* Container full width on mobile and flex for ordering */
  .submit_container__SFJYL{width:100%;max-width:100%;padding:0;margin:0;display:flex;flex-direction:column;align-items:center}
  
  /* Stack vertically and center */
  .submit_wrapper__Rc7t1{flex-direction:column;align-items:center;gap:15px;width:100%}
  .submit_wrapper__Rc7t1{order:1}
  
  /* Canvas responsive - maintain aspect ratio */
  .submit_unsentProject__CC9A0{
    width:100%;
    max-width:360px;
    height:auto;
    aspect-ratio:440/496;
    margin:0 auto;
    background-size:100% 100%;
  }
  
  /* Sidebar below canvas, same width as canvas */
  .submit_sidebar__R_41X{
    width:100%;
    max-width:360px;
    margin:0 auto;
    order:2;
  }
  
  /* Color palette as grid - 4 columns like original */
  .submit_colorPalette__AmdmH{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    width:100%;
    margin:0;
  }
  .submit_colorItem__QYLb7{
    width:100%;
    height:auto;
    aspect-ratio:1;
    margin:0;
    flex:none;
    min-height:40px;
  }
  
  /* Checkbox section - above submit button */
  .submit-check{
    width:100%;
    max-width:360px;
    margin:15px auto;
    text-align:center;
    order:2;
  }
  
  .submit-check p{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0;
    font-size:14px;
    line-height:1.4;
  }
  
  .submit-check .form-check-input{
    margin:0;
    transform:scale(1.2);
    flex-shrink:0;
  }
  
  /* Submit button same width as canvas */
  .submit-bar{
    width:100%;
    max-width:360px;
    display:block;
    margin:10px auto 0;
    box-sizing:border-box;
    order:3;
  }
  
  /* Scale text appropriately for mobile */
  .submit_to___dMRv{font-size:calc(33px * 0.75);line-height:calc(44px * 0.75)}
  .submit_name__P7J_c{font-size:calc(33px * 0.75);line-height:calc(44px * 0.75)}
  /* Override per request: exact mobile sizes and negative margins */
  .submit_recipient__3jtQC .submit_to___dMRv{font-size:24px !important;line-height:34px !important;margin-left:-10px}
  .submit_recipient__3jtQC .submit_name__P7J_c{font-size:22px !important;line-height:34px !important;margin-left:-17px}

  /* Update: Use 33/44 and reset margins for mobile Enter Name across pages (list/archive/note.php) */
  .submit_unsentProject__CC9A0 .submit_name__P7J_c,
  .post-list .submit_name__P7J_c{
    font-size:33px !important;
    line-height:44px !important;
    color:#000000 !important;
    margin-top:-6px !important;
    margin-left:0px !important;
  }
  /* Specific case: when input has light-scheme class too */
  .submit_unsentProject__CC9A0 .submit_name__P7J_c.submit_lightScheme__Pck9B,
  .post-list .submit_name__P7J_c.submit_lightScheme__Pck9B{
    font-size:22px !important;
    line-height:44px !important;
    margin-left:-17px !important;
    margin-top:1px !important;
  }
  .submit_text__05VyW{font-size:calc(46px * 0.75);line-height:calc(55px * 0.75)}
  
  /* Notes list responsive */
  .post-list{
    grid-template-columns:1fr;
    gap:1rem;
    padding:0;
    margin:0 auto;
    width:100%;
    max-width:360px;
  }

  /* Mobile: keep a little padding around notes grid to avoid edge clipping */
  .container.mx-auto.mt-8{padding-left:0px!important;padding-right:12px!important}
  .container.mx-auto.mt-8 > .post-list{width:100%;max-width:360px;margin:0 auto;padding:0}
  
  /* Note cards responsive */
  .note-card{
    height:auto;
    min-height:280px;
    margin-bottom:1rem;
  }
  
  /* Search and filter responsive */
  .filter-wrap{
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:360px;
    margin:0 auto;
  }
  
  .filter-wrap .flex-grow-1{
    width:100%;
    margin:0;
  }
  
  #filterBtn{
    width:100%;
  }
}
/* Desktop override: light scheme name input in lists */
@media (min-width: 992px){
  .post-list .submit_name__P7J_c.submit_lightScheme__Pck9B{margin-left:-16px !important}
}