/* Minification failed. Returning unminified contents.
(11,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
/* =====================================================================
   CARD TILE — TEMPLATE "STICKY NOTE DOODLE" (TileTypeId == 3)
   Chỉ được load khi TileTypeId == 3 (include theo điều kiện trong
   Views/Memory/Index.cshtml). Vì file CSS card default KHÔNG được load
   cùng lúc nên có thể dùng lại các class hook (.card_curve, .card__image,
   .card__title...) mà không bị đè — không cần !important/scope.
   Nguồn skin: WebOrderFood/TemplateCard/template-02-sticky.css
   ===================================================================== */

:root {
  --pink:     #F58AA8;
  --pink-lt:  #FFE3EC;
  --pink-bg:  #FFF1F5;
  --cream:    #FFF8F0;
  --mint:     #9BD6B4;
  --mint-lt:  #E2F4EA;
  --yellow:   #FCD96B;
  --yellow-lt:#FFF6D6;
  --lav:      #E4D6F5;
  --ink:      #5A4A52;
  --ink-soft: #8A7680;
}

/* ---------- Container lưới riêng cho sticky (thay layout của default) ---------- */
.card_curve__container {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(244px, 244px));
    grid-auto-rows: 420px;
    grid-auto-flow: row dense;
    gap: 2rem;
    padding: 20px;
    padding-bottom: 270px;
    list-style-type: none;
}

.card_curve__div {
    transition: all ease .3s;
    pointer-events: auto;
    scroll-margin-top: 70px;
}

/* Anchor (.card_curve.wish_card) làm wrapper TRONG SUỐT — chrome do .t-sticky lo */
.card_curve {
    position: relative;
    display: block;
    height: auto;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
    cursor: pointer;
    pointer-events: auto;
}

.card-hooks-hidden { display: none !important; }

/* ---------- khối ảnh dùng chung (placeholder + ảnh thật) ---------- */
.lb-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lb-photo__hint {
  font-family: "Quicksand", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(120,100,110,.55);
  letter-spacing: .02em;
  user-select: none;
}

/* 02 — STICKY NOTE DOODLE */
.t-sticky {
  position: relative;
  width: 244px;
  height: 400px;
  background: linear-gradient(160deg, #FFF6D6, #FFEFC0);
  padding: 20px 20px 18px;
  border-radius: 3px 3px 14px 3px;
  box-shadow: 2px 8px 20px rgba(190,160,70,.28);
  transform: rotate(1.5deg);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.t-sticky:hover { transform: rotate(-1deg) translateY(-5px); box-shadow: 2px 14px 30px rgba(190,160,70,.4); }
.t-sticky > svg:first-of-type { position: absolute; top: 12px; right: 16px; }
.t-sticky__fold {
  position: absolute; right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 26px 26px;
  border-color: transparent transparent rgba(0,0,0,.07) transparent;
  border-bottom-right-radius: 14px;
}
.t-sticky__doodle { position: absolute; }
.t-sticky__doodle--a { top: 70px; right: 14px; transform: rotate(12deg); }
.t-sticky__doodle--b { bottom: 64px; left: 12px; transform: rotate(-10deg); }
.t-sticky__photo-wrap {
    position: relative;
    width: 130px;
    height: 96px;
    min-width: 130px;
    min-height: 96px;
    max-width: 130px;
    max-height: 96px;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin: 4px auto 14px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    transform: rotate(-3deg);
}

    .t-sticky__photo-wrap .lb-photo,
    .t-sticky__photo-wrap .card__image-container {
        width: 118px;
        height: 84px;
        min-width: 118px;
        min-height: 84px;
        max-width: 118px;
        max-height: 84px;
        flex: 0 0 auto;
        overflow: hidden;
    }

    .t-sticky__photo-wrap .card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.t-sticky__photo-wrap .lb-photo { width: 100%; height: 100%; background: linear-gradient(135deg,#FFE3EC,#FFEFD9); }
.t-sticky__tape {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 52px; height: 18px;
  background: rgba(245,138,168,.55);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  z-index: 2;
}
.t-sticky__msg {
  margin: 0;
  min-height: 0; /* cho phép flex item co lại để overflow:hidden ăn */
  font-family: "Patrick Hand", cursive;
  font-size: 17px;
  line-height: 1.4;
  color: #6A5836;
  text-wrap: pretty;
  overflow: hidden;
}
/* Line-clamp PHẢI đặt ở phần tử con (không phải flex item trực tiếp):
   Firefox blockify flex item -> đổi -webkit-box thành flow-root -> mất clamp. */
.t-sticky__clamp {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}
.t-sticky__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

/* Nút emoji (VIP) hiển thị in-flow phía trên tên — không còn đè lên ảnh như mặc định */
.t-sticky__foot .emoji-top-bar {
  position: static;
  margin: 0;
  width: fit-content;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  gap: 6px;
}
/* Count reaction đọc được trên nền sticky sáng */
.t-sticky__foot .emoji-count-center {
  color: #6A5836;
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}

.t-sticky__name {
    font-size: 16px;
    color: #C77E45;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    text-align: right;
}

/* Q&A (form mode) trong sticky */
.t-sticky__qa { overflow: hidden; }
.t-sticky__q {
  display: inline-block;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #B06A2E;
  margin: 2px 0;
}
.t-sticky__a {
  margin: 0 0 8px;
  font-family: "Patrick Hand", cursive;
  font-size: 16px;
  line-height: 1.35;
  color: #6A5836;
}

.emoji-main-icon-unselect {
    background: linear-gradient(135deg, #376a2f6e, #ffcc334f) !important;
}

.emoji-main-icon {
    background: linear-gradient(135deg, #7a8679bf, #ffcc334f) !important;
}


/* Giữ footer/tên người gửi luôn nằm trong card */
.t-sticky {
    display: flex;
    flex-direction: column;
}

/* Hình không được co */
.t-sticky__photo-wrap {
    flex: 0 0 auto;
    flex-shrink: 0;
}

/* Vùng lời chúc chỉ được chiếm phần còn lại */
.t-sticky > .truncate-overflow {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Footer không bị đẩy / không bị co */
.t-sticky__foot {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: 10px;
}

/* Riêng form mode: QA không được tràn xuống footer */
.t-sticky__qa {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

    .t-sticky__qa .t-sticky__clamp {
        display: block;
        max-height: 100%;
        overflow: hidden;
    }

.t-sticky > .truncate-overflow {
    position: relative;
}

    .t-sticky > .truncate-overflow::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28px;
        background: linear-gradient( to bottom, rgba(255, 246, 214, 0), #FFF1C7 );
        pointer-events: none;
    }

.t-sticky__q {
    margin: 1px 0;
    /*font-size: 11px;*/
}

.t-sticky__a {
    margin: 0 0 5px;
    /*font-size: 15px;*/
    line-height: 1.25;
}