/* Minification failed. Returning unminified contents.
(45,30): run-time error CSS1039: Token not allowed after unary operator: '-curve'
(105,30): run-time error CSS1039: Token not allowed after unary operator: '-curve'
(106,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-color'
(125,30): run-time error CSS1039: Token not allowed after unary operator: '-curve'
(126,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-color'
(141,20): run-time error CSS1039: Token not allowed after unary operator: '-surface-color'
 */
/* =====================================================================
   CARD TILE — TEMPLATE "DEFAULT" (TileTypeId == 1)
   Tách ra từ zmysite_memory.css để mỗi template chỉ load CSS của chính
   nó (include theo TileTypeId trong Views/Memory/Index.cshtml). Nhờ vậy
   các template dùng lại trùng tên class hook (.card_curve, .card__image,
   .card__title...) sẽ KHÔNG đè nhau vì chỉ 1 file được load mỗi trang.
   Lưu ý: .card__thumb__detail + CSS detail modal/emoji vẫn nằm ở
   zmysite_memory.css (dùng chung cho mọi template).
   ===================================================================== */

/*CARD BORDER CURVE*/
.card_curve__container {
    display: grid;
    justify-content: center;
    /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
    grid-auto-rows: 415px;
    grid-auto-flow: row dense;
    grid-gap: 23px;
    gap: 2rem;
    /*margin: 0px 50px;*/
    padding: 20px;
    padding-bottom: 270px !important;
    list-style-type: none;
    /*pointer-events: none;*/
}

.card_curve__div {
    transition: all ease .3s;
    /*    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;*/
    /*transform: perspective(800px) rotateY(25deg);*/
    transition: 0.3s;
    pointer-events: auto;
    scroll-margin-top: 70px;
}

.card_curve {
    position: relative;
    display: block;
    height: 100%;
    border-radius: calc(var(--curve) * 1px);
    overflow: hidden;
    text-decoration: none;
    /*border: 3px solid transparent;*/
    box-shadow: 0 2px 5px -3px rgba(0,0,0,.23),0 10px 5px -2px rgba(0,0,0,.04) !important;
    transition: all ease .3s;
    /*    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;*/
    /*transform-origin: bottom cent;*/
    transition: 0.3s;
    pointer-events: auto;
}

.card_curve__container:hover .card_curve.every-else {
    /*opacity: 0.8;*/
    /*-webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);*/
}

.card_curve__container .card_curve__div .card_curve {
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,.2) !important;
    /*transform: scale(1.2) translate(0, 25px);*/
    z-index: 9;
    /*transform-style: preserve-3d;*/
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    height: 420px;
}

.card_curve__container .card_curve__div .card__image {
    min-height: 255px;
    max-height: 255px;
}

.card__image {
    width: 100%;
    height: auto;
    min-height: 220px;
    max-height: 220px;
    object-fit: cover;
    object-position: center;
}

.card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border-radius: calc(var(--curve) * 1px);
    background-color: var(--surface-color);
    transform: translateY(0);
    transition: .2s ease-in-out;
}

.card_curve:hover {
}

    .card_curve:hover .card__overlay {
        /*border-radius: 0;*/
        transform: translateY(0);
    }

.card__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em;
    border-radius: calc(var(--curve) * 1px) 0 0 0;
    background-color: var(--surface-color);
    transform: translateY(0);
    transition: .2s ease-in-out;
}

.card__arc {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 99%;
    right: -1px;
    z-index: 1;
}

    .card__arc path {
        fill: var(--surface-color);
        d: path("M 40 80 c 32 0 40 -22 40 -40 v 40 Z");
    }

.card_curve:hover .card__header {
    transform: translateY(0)
}

.card__thumb {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.card__title {
    font-size: 1em;
    margin: 0 0 .3em;
    color: #6A515E;
    font-family: Boris, 'Roboto';
}

.card__tagline {
    display: block;
    margin: 1em 0;
    font-family: "MockFlowFont";
    font-size: .8em;
    color: #D7BDCA;
}

.card__status {
    font-size: .8em;
    color: #D7BDCA;
}

.card__description {
    /*padding: 0 2em 2em;*/
    margin: 0;
    color: #F08974;
    /*font-family: "MockFlowFont";*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 3;*/
    /*height: 134px;*/
    padding: 0 0.8em 0.5em;
    font-family: Boris, 'Roboto';
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
/*CARD BORDER CURVE*/

.truncate-overflow {
    height: 126px;
}

/* CSS cho Image container và Emoji Reaction Overlay (tile default) */
.card__image-container {
    position: relative;
    overflow: hidden;
}

.card__image {
    width: 100%;
    height: auto;
    min-height: 220px;
    max-height: 220px;
    object-fit: cover;
    object-position: center;
}

.card_curve__container .card_curve__div .card__image {
    min-height: 255px;
    max-height: 255px;
}

/* Tile overrides nằm trong media query gốc (zmysite_memory.css @1397) */
@media only screen and (max-width: 768px), (max-width: 992px) {
    .card_curve__container {
        grid-template-columns: repeat(auto-fit, minmax(320px, 250px)) !important;
    }

    .card_curve__container .card_curve__div:hover .card_curve {
        cursor: pointer;
        transform: none !important;
        /*height: unset !important;*/
    }
}